[ Node JS ] Node.js개발환경 준비 - express, babel.js, nodemon, morgan

---

 

 

아래는 코딩을 하기 전에 편리하게 코딩을 하기 위해 하는 작업 + express 사용을 위한 준비이고

기본적으로 Node.Js가 깔려있어야 한다.

node --version을 터미널에 입력해 다운이 되어있는지 확인해 보고

다운이 안되어있으면 https://nodejs.org/ko/download 여기에서 다운로드하면 된다.

 

 

 

1. package.json 파일 생성 

= npm init를 터미널에 입력해준다

 

 

"main"은 대표 파일을 지정하는 것이고

"scripts"는 긴 명령어들을 간단하게 사용할 수  있도록 한다.

터미널에서 npm run test를 입력하면 7번 라인에 존재하는 명령어가 실행된다.

 

 

 

2. express install

npm i express

 

express를 추가하는 것으로 위의 명령어를 입력 시 node_modules와 package-lock.json이 생성된다.

node_modules는 npm으로 설치한 모든 패키지가 들어있는 폴더이고

package-lock.json는 개발자들이 동일한 node_module 트리를 생성해서 같은 의존성을 설치할 수 있도록 보장해준다.

 

혹시 package-lock.json에 대해 자세히 알고싶다면 아래의 글을 참고하면된다.

https://calssess.tistory.com/138

 

이 명령어 이후엔 package.json의 변화가 생긴다.
dependencies에 express가 추가되는데 이 덕분에 협력이나 다른 컴퓨터로 작업을 위해서

Github에  node_module을 올리지 않아도 된다.

 

dependencies에는 프로젝트 실행을 위한 필요한 것들을 저장하고 있다.

그렇기에 package.json이 있을 경우엔 npm i 만 하면

npm은 dependencies를 확인해 필요한 패키지가 전부 설치한다. ( node_module 생성 )

 

 

 

 

 

3. Babel js

node.js는 최신의 js코드는 이해하지 못한다.

그래서 babel js를 사용할 텐데 이는 사용자가 쓴 최신의 js코드를 node.js가 이해할 수 있는 코드로 변환시켜 준다.

 

 

아래 명령어를 통해 babel을 설치한다.

npm install @babel/core @babel/node --save-dev

 

설치를 했다면 babel.config.json파일을 만들어 아래의 코드를 넣어준다.

{
  "presets": ["@babel/preset-env"]
}

 

이후 package.json파일의 scripts에 아래의 내용을 입력한다. 

dev는 우리가 실행시킬 명령어로 다른 이름으로 정해도 무관하다.

"scripts": {
    "dev":"babel-node server.js"
}

 

위의 과정을 거친 후 터미널에 npm run dev를 입력하면

server.js를 babel이 node.js가 이해할 수 있는 코드로 변환시켜 준다.

 

 

 

4.nodemon

파일의 변화를 감시하는 패키지로 이 패키지가 없다면 파일을 수정하고 이를 반영시키기 위해서는 수동으로 서버를 재시작해야 한다.

그러나 nodemon를 이용하면 파일의 변화를 캐치해 자동으로 서버를 재시작해준다.

 

아래 명령어를 이용해 설치한다.

npm i nodemon --save-dev

 

설치가 완료되면 package.json의 scripts에 nodemon --exec를 추가해 주면 된다.

"scripts": {
    "dev":"nodemon --exec babel-node [ 서버를 여는 js파일 주소 ] "
}

 

여기까지 하고 나서 package.json파일을 살펴보면

dependencies뿐만 아니라 devDependencies가 추가됨을 알 수 있다.

이는 개발할 때 사람에게 유용한 패키지들을 모아둔 것이다.

그렇기에 nodemon은 devDependencies에 속해져 있는 걸 볼 수 있다

 

물론 이러한 패키지를 devDependencies에 추가하고 싶으면 install시 --save-dev 옵션을 추가해줘야 한다!

 

 

 

5.morgan

= node.js용 request logger middleware

= morgan 호출시 설정한 대로 middleware return한다

 

아래의 명령어를 이용해 설치한다.

npm i morgan

 

이후 server.js 파일에 아래와 같이 추가한다.

예를 server.js로 들었지만 자신이 서버와 관련되어 사용하는 js파일에 삽입하면 된다.

import morgan from "morgan";

const logger = morgan("dev");
app.use(logger);

 

이렇게되면 request에 대한 log를 확인할 수 있는데

dev가 적힌 자리엔 log의 포맷을 설정하는 것으로 dev를 제외하고도 combined, common, short, tiny와 같이 다양하게 존재한다.

dev는 아래와 같은 정보를 출력해준다.

:method :url :status :response-time ms - :res[content-length]

자세한 내용은 아래 사이트에서 확인할 수 있다.

https://www.npmjs.com/package/morgan

 

 

여기까지왔으면 이제 서버를 열고 코딩을 하면된다.

이러한 환경에서 코드 짜면 정말 편하다 --b

서버 재시작도 안해도 되고 최신의 js 코드도 사용 가능하고!!