[React] 272샘의 React3 (NODE NPM 이해)

https://deahan.tistory.com/414

[React] React 개발환경 구축

여기까지 잘 했다면 72샘이 이제 시작이라고 함..

 

Node는 크게  2가지 용도로 필요 할 수 있음

    1. Node로 서버(백엔드)를 개발하거나,

    2. Node의 npm을 개발에 편하게 사용하기 위해서 사용.

 

React는 프론트 개발에 사용하는 라이브러리라 

백엔드는 Node가 올 수도 Java Spring이 올 수도 , 기타 뭐든 올 수 있음

2가지 용도 중 2번 용도가 현 상태에선 주로 사용

 

그럼 NPM 에 대해 알아보자.(사실 이건 명령어이기도 하당)

NPM -> Node Package Manager (노드 패키지 관리자)

명령어 사용 옵션을 보려면 terminal에서 npm help 라고 치면 됨

 

자바스크립트로 초간단 웹서버 맹그는 5분짜리 프로젝트를 진행해가며

npm 명령어로 무얼 할 수 있는지 확인해보자.

 

먼저 vscode에서 이전 글에서 만들었던 reactstudy 폴더를 열어보자

그리고 terminal에서 아래 명령어를 치고 무슨 일이 생기는지 눈으로 확인해보자

 

webserver 폴더 아래에 package.json 파일과 package-lock.json  파일이 만들어졌을 것이다

package-lock.json 파일은 package.json 파일을 보조해주는 파일이라 보면 되는데 없을 수 도 있다.

한번 클릭하여 열어서 눈으로 확인해보자

 

보통 처음 만들 땐  일일이 답변하지 않고 그냥 엔터를 치는데

npm init -y  식으로 -y 옵션을 주면 엔터 칠 필요도 없어짐.

 

아래 내용으로 myserver.js 파일을 맹글자.

import http from "http"; // http 모듈 가져오기(기본 제공 모듈)

console.log("나 서버로 태어날 거임");

const serverPort = 220; // 서버 포트 지정, 포트갯수는 64K -> 64 * 1024

//  http 모듈을 이용하여 간단히 http 서버 생성

//  req는 request의 약자, res는 response의 약자

const server = http.createServer((req, res) => {

  console.log("check:", req.url);

  res.writeHead(200, { "Content-Type": "text/html;charset=utf-8" });

  res.write("<h1>Hellow 민우 Server </h1>");

  res.write("https://e-7-e.tistory.com/251'> e7e샘의 react티키타카");

  res.end("<h1>e7e샘 블로그 보고 만든 node 서버</h1>");

});

// Listen 시작

server.listen(serverPort, () => {

  console.log(`서버가 ${serverPort}에 귀를 대고 있어요`);

});

 

TERMINAL에 아래 처럼 입력..

D:\reactstudy\webserver> node myserver.js

 

위와 같은 에러가 나옴

require 안 쓰고, import 썼다고 나오는 에러 라고함.

require는 그동안 써 오던 commonjs라는 자바스크립트 커뮤니티에서 제안한 모듈 가져오는

명령어이고, import는  나중에 표준으로 만들어진 모듈 가져오는 명령어인데...

추세로 보면 결국 import로 사용하게 될 것이라고 함....

 

맘이 급하다면 아래 e7e샘의 블로그에 가서 읽어보자

2023.09.05 - [자바스크립트] - 브라우져에서 자바스크립트 Module 사용하당

 

해결방법은 초 간단

첫번째 방법

myserver.js  파일명을 myserver.mjs 로 확장자만 바꾼당.

Terminal에  node myserver.mjs 라고 입력하면 실행 될껄용!~~

프로그램 실행을 멈추려면 Terminal에서 CTRL+ C 를 누르장.

 

두번째 방법:  파일 확장자는 .js로 그대로 둔다  272샘은 이걸 더 추천

package.json 파일을 열고, 아래 처럼 "type":"module" 을 추가하고 꼭 저장

"main": "index.js", 
"type": "module",

 

다시 terminal에서 아래 처럼 node myserver.js를 입력

D:\reactstudy\webserver> node myserver.js

다른 문제가 없다면 Terminal에 console 메세지가 보이면서 실행 될것이다..

이제 브라우져에서 http://localhost:220 를 입력하면 아래 처럼 보여야한다

 

프로그램 실행을 멈추려면 Terminal에서 CTRL+ C 를 누르고,

 

package.json 파일에 가서  아래 처럼  scripts 부분에 추가

  "scripts": {   
            "start": "node myserver.js",
             "test": "echo \"Error: no test specified\" && exit 1" 
},

이제 Terminal에  npm start 라고 입력

결과가 느낌이 딱 와야할 것이다.

 

여기까지는 추가 외부 모듈 없이 작성한 소스이다.

이제 npm  명령이 필요한 외부 모듈을 설치해 보자

node를 사용하는 개발자들에겐 너무도 유명한 express란 모듈이 있다
Terminal에서 아래 처럼 입력해 보자.

 

npm install express

webserver 폴더 밑에 node_modules란 폴더가 생기고, 거길 열어보면

express 디렉토리도 있지만, 이것 저것 낯선 것들이 많이 있다.

요런 것들을 디펜던시(Dependency 의존)라 부름

express 모듈이 개발 될 때, 가져 다 쓴 모듈들이다...

 

좀 더 쉽게 이야기 하면 자동차 사면, 거기에 핸들, 타이어, 헤트라이트등이 

자동차가 자동차가 되기 위한 것들이 Dependency다. 핸들 없으면 화가난다..

 

이제 package.json 파일을 열어보자.  느끼미 온다. 안 온다면 적성검사 필요

  "dependencies": {   
       "express": "^4.21.0",   
        "webserver": "file:" 
}

 

과감히 node_modules 폴더를 지워보자

그리고 Terminal에  (현재 디렉토리가 webserver인 상태에서) 아래 명령어를 쳐보자

npm install 

node_modules 폴더가 다시 생김을 알 수 있다

무얼 다운로드 받아 오냐면, package.json에 적혀 있는 모듈들을 다운 받는다.

곧  package.json 파일만 있으면, 실제 모듈들은 언제든 다시 다운 받을 수 있을 것이다

그래서 node_modules 폴더는 배포하지 않는당.

 

자 여기서 언급하지 않았던, package-lock.json 파일을 열어보자. 

node_modules 폴더 아래에 있는 모든 module에 대해 버젼이 명시되어 있다.

이거슨 버젼 호환성을 위해서당. 내가 e7e 모듈 3.0을 받아서 개발했는데,

다른 사람이 개발 소스를 가져가서 e7e 모듈 4.0을 받으면 문제 될 수 있다.

그런 애매한 경우를 방지하기 위해 개발 당시 사용한 모듈들의 버젼 리스트를 가진 파일이

package-lock.json 파일이다. Github에 올린다면 이 애를 꼭 올려주자.

 

그럼 여기까지 하고

일단 아래 정도의 옵션만 알아 두고, 나머진 필요에 의해 알아가자....

npm help
npm init -y   ## package.json 파일이 생성됨이 눈에 보임
npm install 모듈명    ## 현재 패키지(프로젝트)에 포함
npm install -g 모듈명   ##전역설치 
npm install -D 모듈명   ##개발시에만 포함
npm install --force 모듈명 ## 있어도 덮어 설치

 

모듈 검색은 오데서 하냐면 아래 사이트 당. 가서 express를 검색하고 느낌받장.

https://www.npmjs.com/

npm | Home

 

자바 스프링 사용자라  maven repository를 자주 방문해 봤던 사람이라면

npmjs 사이트가 훨씬 더 상세하게 많은 정보를 제공해 줌에 놀라움과 감사를 

분명 세상에 외칠것이라 하는데 나는 잘 모르겠다.

 

e7e샘이 구글에서 npm vs npx 라고 검색하여 npx가 먼지 알아보는 수고를 해보라고 했다...

 

 

출처 : https://e-7-e.tistory.com/251