[NodeJS] NodeJS 처음 시작하기

▶NodeJS 처음 시작하기

node node 하는데 처음에 아무 것도 없이는 실행할 수는 없습니다!

이번 글에서는 손수 시작하는 방법과 뼈대를 만들어주는 라이브러리를 소개하려고 합니다 :)

 

1. 손수 시작하기

① 빈 폴더 하나 만들기

빈 폴더 생성

 

② 만든 폴더 VSCode로 열기

만든 폴더 VSCode로 열기

빈 폴더를 열게 되면 이렇게 텅텅 빈 화면이 나오겠죠?

 

③ 터미널 열기

상단바에서 터미널 → 새 터미널 열기

혹은 Ctrl + ` 해주면 터미널이 열리게 됩니다.

 

④ 터미널에서 npm init

npm init

실행하게 되면 package.json 파일이 생성되게 됩니다.

 

package.json 파일은 개발자가 배포한 패키지에 대해, 다른 사람들이 관리하고 설치하기 쉽게 하기 위한 문서.

npm에 패키지를 배포하고 npm registry에 올리기 위해서 반드시 필요한 문서 파일입니다.

곧 설치하게 될 내가 install한 모듈이 다 모여있는 node_modules 라는 파일은 용량이 굉장히 큽니다.

그래서 다른 사람과 협업을 할 때 node_modules라는 파일은 공유 하지 않습니다.

 

"그렇게 파일을 빼놓고 공유해도 되는건가요..?"

"네 됩니다. package.json 파일 덕분에요"

 

package.json에는 개발자가 install한 모듈을 다 기록하고 있습니다.

대부분의 사람들이 깃허브에 파일을 커밋&풀 할 때 node_modules은 제외하기 때문에 그 깃허브를 클론 하게 되면

node_modules는 당연히 없을 것 입니다.

 

이제 클론 한 폴더에서 처음 시작할 때 npm install 을 하게 되면 package.json에 기록된 모듈을 모두 설치해줍니다.

node_modules를 같지 안 받아 두려울 필요가 없는 이유가 이것 입니다!

 

다시 돌아와서... 위 명령어를 치게 되면 다음과 터미널에 다음과 같은 로그가 보이는데요.

이 로그는 package.json을 어떻게 구성할 거냐고 물어보는 것입니다.

모두 엔터를 쳐서 넘겨도 좋고 원하는 명칭이 있다면 입력해도 좋습니다.

모두 입력을 해주고 마지막으로 yes를 입력하면 아래와 같은 파일이 만들어지게 됩니다.

방금 입력한 명칭을 바탕으로 package.json 파일이 생성되었을 겁니다.

 

⑤ 터미널에서 npm install 

npm install

실행하게 되면 package-lock.json 파일이 생성되게 됩니다.

이 파일은 파일은 의존성 트리에 대한 정보를 모두 가지고 있습니다.

 

따라서 깃허브에 커밋을 할 때 꼭 ! package.json 파일과 package-lock.json 파일은 반드시 포함되어야 합니다!

 

⑥ 터미널에서 npm install express

npm install express

실행하게 되면 드디어 node_modules 폴더가 생기게 됩니다.

 

express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크입니다.

 

 

⑦ 서버 파일 만들기

server.js 파일을 하나 만들어줍니다.

이 파일은 서버 구동의 핵심이 되는 파일이 될 겁니다.

• app.set('port', 포트)로 서버가 실행될 포트 지정
• app.get('주소', 라우터)로 GET 요청이 올 때 어떤 동작을 할지 지정(REST API)
• app.listen('포트', 콜백)으로 몇 번 포트에서 서버를 실행할지 지정

const express = require("express"); // node_modules의 express 패키지를 가져온다
const app = express(); // app이라는 변수에 express 함수의 값을 저장한다.

app.set("port", process.env.PORT || 3000); // 환경변수에서 port를 가져온다. 그러나 없으면 3000번 포트 사용

app.get("/", (req, res) => { // 서버에게 "/"로 요청을 보냄
  res.send("<h1>Express 서버 연습중~!</h1>"); // 요청에 대한 응답으로 이걸 해줘!
});

app.listen(app.get("port"), () => { // 입력해준 port로 실행할테니까 실행이 다 되면
  console.log(app.get("port"), "번 포트에서 대기 중"); // 이걸 호출해줘!
});

 

⑧ express 서버 실행하기

npm run start를 콘솔에서 실행합니다.

npm run start

실행하게 되면 콘솔창에 아래와 같은 로그들이 보이는데요.

알아서 웹 브라우저가 열리진 않아서 직접 웹 브라우저 주소 창에 locallhost:[지정한 포트 번호]를 입력하면 됩니다.

서버에게 요청을 보내고 응답으로 보내달라고 한 내용이 잘 온 것을 확인할 수 있습니다.

 

◎ 서버 다시 실행하기

좀 전에 우리는 npm run start를 통해 express 서버를 실행했었습니다.

그런데 자바스크립트 파일을 저장하고 웹 브라우저에 들어가면 변경사항이 적용되지 않은 것을 확인할 수 있을 겁니다.

(리액트에서는 저장하면 자동으로 변경사항을 반영해줬는데 말이죠...)

노드는 알아서 바꿔주지 않아서 Ctrl+C를 통해 서버를 종료시키고 다시 npm run start를 해주어야만 변경된 사항이 적용될 것입니다.

하지만! 이렇게 번거로움을 해결해주는 패키지가 존재합니다.

 

nodemon

 

결론부터 말하자면 nodemon을 사용하면 저장과 동시에 서버가 재시작됩니다. 알아서! 정말 편합니다!

 

nodemon 설치하기 위해 아래 코드를 콘솔창에서 실행합니다.

npm install -g nodemon

 nodemon을 실행할 때는 콘솔창에 아래 코드를 실행합니다.

nodemon --watch ./ [서버파일명]

powershell가 아닌 gitBash에서 실행해야 nodemon이 실행됩니다!

실행하게 되면 아래와 같은 로그가 출력됩니다.

자바스크립트 파일을 저장할 때 마다

재시작되는 것을 확인할 수 있습니다.

 

매번 이 명령어를 실행하기 번거롭다고 생각이 들면

package.json 파일을 열어 start 부분 바로 아래에

"원하는단어" : "nodemon --watch ./ [서버파일명]"

라는 줄을 추가해주면

npm run "원하는 단어" 로 실행하게 되면 바로 nodemon을 통해 서버를 실행할 수 있게 됩니다.

(주로 "dev"나 "server"를 사용하곤 합니다.)

2. 패키지 이용하기 - Express-generator

Express-generator라는 패키지는프레임워크에 필요한 pakage.json과 기본 구조까지 잡을 수 있게 도와주는 패키지 입니다.

설치는 꼭  cmd창에서 전역에 해줘야 합니다!

만들고 싶은 폴더 위치에 가서 아래 코드를 실행합니다.

npm install -g express-generator

설치를 완료했다면 본격적으로 아래 코드를 실행하여 뼈대를 만들어 봅시다.

express [프로젝트이름]

실행하게 되면 아래와 같은 구조로 파일들이 생성되게 됩니다.

그런데 node_modules 폴더가 없죠? 그러면 콘솔창에 npm install 하여 설치해주면 됩니다!

주의할 점은 입력한 프로젝트명으로 폴더 내부에 파일들이 생성되었기 때문에

cd [프로젝트명] 해서 모든 파일들이 있는 가장 상위 폴더로 이동해줍니다.

npm install

설치를 완료했다면 npm run start 해서 express 서버를 실행해볼까요?

 

그런데 살펴볼 점이 있습니다.

package.json을 보게 되면 start 시 node ./bin/www 파일이 실행되게 되어있는 걸 확인할 수 있습니다.

이 파일을 열어보면 모든 서버 정보가 여기에 있는 것을 볼 수 있습니다.

열어보게 되면 3000번 port가 열리게 되어있습니다. 

그러면 우리가 방금 실행한 express server는 로컬 3000번 포트에서 열렸다는 것을 알 수 있습니다.

가봅시다.

잘 실행된 것을 확인했습니다 :)