React(리액트) 티키타카 3 (NODE NPM 이해 )

2024.09.24 - [분류 전체보기] - React(리액트) 티키타카 2 (개발 환경 구축 )

 

를 읽었다면, 음 이제 시작인가! 흥분으로 콩당 콩당 할 수 있당.~~

아직 아니당. ( 상태는 아직 체킁 메롱이당)

급하디 급한 맴 보다는 여유로운 맘이 밀도 충만한 진정한 가속의 힘이당.

 

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.json 파일 내용은 전부는 아니더라도 대략  어떤 정보들을 써야 하는 지  느끼미 왔을 거시당.

[ 일단 요걸로 만족하장... 시르면 먼저 독학하삼 ] 

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

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

 

아래 내용으로 myserver.js 파일을 맹글장.(낯 썰어도 주석도 한번 보깅)

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

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

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

//  http 모듈을 이용하여 간단히 http 서버 생성
//  req는 request의 약자, res는 response의 약자지용
const server = http.createServer((req, res) => {
  console.log("체콩:", req.url);
  res.writeHead(200, { "Content-Type": "text/html;charset=utf-8" });
  res.write("<h1>난 E7E얌 넌 뉴규?</h1>");
  res.end("<h1>모르지만 반가벙</h1>");
});

// Listen 시작
server.listen(serverPort, () => {
  console.log(`서버가 ${serverPort}에 귀를 대고 있어용`);
});

 

TERMINAL에 아래 처럼 입력해 보장.

D:\reactstudy\webserver> node myserver.js

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

위와 같은 에러가 나타날꺼당.

require 안 쓰고, import 썼다고 투덜 된당.~~ ㅠㅠ

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

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

추세로 보면 결국 import가 득세하게 될 꺼이당. 시간이 걸리긴 할꺼당.

 

맘이 급하다면 아래 글을 읽어보장

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

 

해결방법은 초 간단하당.~~ 첫번째 방법

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

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

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

 

두번째 방법:  파일 확장자는 .js로 그대로 둔당 ~~ 요걸 난 더 추천

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

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

 

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

D:\reactstudy\webserver> node myserver.js

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

 

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

프로그램 실행을 멈추려면 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이 머하는 아이인지 느낌은 왔다 믿어 의심해 보지만,

일단 아래 정도의 옵션만 알아 두고, 나머진 필요에 의해 알아가장.(안 필요하면?) 

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 사이트가 훨씬 더 상세하게 많은 정보를 제공해 줌에 놀라움과 감사를 

분명 세상에 외칠거당. ㅋㅋ

 

나만 힘들면 억울하닝, 구글에서 npm vs npx 라고 검색하여 npx가 먼지 

알아보는 수고를 해보장.

 

안경 금테 생각하다가 깨닫는다. 실상은 은퇴 생각에 빠져 있음을....

---

 

대전 지하철 서대전네거리역 4번 출구로 나와 아무 생각없이 쪼메만 걷다보면

대덕 인재개발원 간판이 보인당. 간판 꽤 크넹!~~

 

머 하는 곳일깡? ...... 

 

 

https://www.youtube.com/channel/UC-Q4WCYdovIVVj4WxVC11kg

[디딧TV] 대덕인재개발원 DDIT