NodeJS 기본 설정하기 (nodemon, babel)

Noma·2021년 8월 21일
0

💎 Dev Point

  • Ctrl+S 할 때마다 알아서 재시작 되도록 할 것 → nodemon
  • ES6 문법을 사용할 수 있도록 할 것 → babel

1. 필요한 패키지 설치하기

$ npm i -D nodemon
$ npm i -D @babel/core
$ npm i -D @babel/node
$ npm i -D @babel/preset-env
  • i 는 install의, -D 는 --save-dev의 shortcut이다.

  • --save-dev : 서버를 만드는데 꼭 필요한 요소는 아니지만, 개발을 편리하게 해주는 패키지들을 package.json의 devDependencies에 정리해주는 옵션이다.

한번에 설치하려면 아래 같이 띄어쓰기로 구분하여 한줄로 작성하면 된다.

npm i -D nodemon @babel/core @babel/node @babel/preset-env

nodemon

개발할 때 파일이 수정되는 걸 감지해 알아서 재시작해주는 패키지이다. 이것이 없으면 파일을 수정할 때마다 변경사항을 확인하기 위해 서버를 매번 재시작해야한다.

babel

우리가 작성한 최신 JS문법을 nodeJS가 이해할 수 있는 문법으로 바꿔주는 자바스크립트 컴파일러이다.

  • @babel/node: 코드의 transpile과 실행을 한꺼번에 처리하기 위한 명령어(babel-node)를 사용할 수 있도록 한다.

  • @babel/cli : 터미널에서 babel 명령어로 최신 JS문법을 호환성 좋게 transpile 할 수 있다. 이때 플러그인과 함께 사용하여 어떤 식으로 transpile할 건지 설정할 수 있다.

babel-node 명령어와 달리 transpile을 할 뿐 그 파일을 실행시켜주지는 않는다.

  • @babel/preset-env : 바벨의 플러그인 중 하나

  • @babel/core : 바벨 컴파일러의 코어

2. package.json의 scripts 고치기

"scripts": {
    "start": "node build/init.js",
    "build": "babel src -d build",
    "dev": "nodemon --exec babel-node src/init.js"
},

터미널에서 npm run <script key>로 해당 key에 정의된 value를 명령어로 실행시킬 수 있다.

  • 예시:
$ npm run dev
$ npm run build
$ npm run start = npm start (예외적)

위에서 작성한 스크립트를 설명하자면 아래와 같다.

  • node build/init.js : build 폴더에 있는 init.js 실행
    → 프로젝트를 배포버전으로 실행시키기위해 사용한다.

  • babel src -d build : src 폴더에 있는 파일들을 babel로 transpile하여 그 결과물을 build 폴더에 생성
    → 프로젝트를 빌드하는데 사용한다.

  • nodemon --exec babel-node src/init.js : src폴더에 있는 init.js를 babel-node로 transpile하고 실행. 파일 수정시 알아서 재시작 되도록 nodemon 설정
    → 프로젝트를 개발 모드로 키고 싶을 때 사용한다.

3. preset-env 설정하기

root 디렉터리에 babel.config.json 파일을 만들고 아래 코드를 적어준다.

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

이렇게 하면 babel과 nodemon을 이용한 NodeJS 설정이 완료된다.🥳🔥

profile
오히려 좋아

0개의 댓글