[Express 셋팅 라이브러리]: babel, nodemon

babel 이란?

최신 ES6 JS코드를 무난한 예전의 코드로 변환해주는 **"자바스크립트 컴파일러 라이브러리"**이다.

babel 설치

npm install @babel/node
npm install @babel/core
npm install @babel/preset-env
npm install core-js@3

// 만약 리액트를 사용한다면, 다른 종류의 프리셋을 사용해야한다. 여기선 env프리셋을 사용했다.

.babelrc 파일 만들기

바벨의 프리셋을 설정하는 파일을 만든다.
바벨이 실행되기 전에 이 파일 거쳐, 설정해둔 프리셋을 읽게 된다.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": 3
      }
    ]
  ]
}

babel로 실행하기

node가 index.js를 실행하는 대신 babel이 실행해준다.
package.json파일에서 다음과 같이 수정한다.

  {
  "scripts": {
    "start": "babel-node init.js"
  },
  ...
  }

import "core-js";

nodemon 이란?

변경한 코드를 저장할 때 마다, 서버를 다시 시작해주는 라이브러다.

서버 개발시 생산성 향상을 위해 사용한다.

nodemon설치 및 실행

npm install -g nodemon
// 시스템 경로에 글로벌하게 설치할 경우

npm install --save-dev nodemon
= npm i nodemon -D

// 개발자 모드로 설치할 경우
// = dependency(프로젝트에 사용 될 패키지)와 관련 없이 설치할 경우

package.json파일에서 다음과 같이 수정한다.

"scripts":
	"start": "nodemon index.js"

// npm start 명령어를 통해 파일이 저장될 때 마다 서버를 재실행한다.

오류 발생 시

1. "babel-node module cannot be found"

package.json파일에 아래와 같이 추가해준다.

npx: babel-node가 binary 실행 파일이라 환경 변수, 경로 설정을 해줘야하는데, npx을 이용해 실행시켜주어 해결할 수 있다.
--exec는 nodemon 패키지를 오픈하라는 명령어

  "scripts":
 {
    "start": "nodemon --exec npx babel-node init.js"
 }

2. Warning: To load an ES module, set “type”: “module”

새로운 버전으로 type:module로 대체가능하지만, 후에 webpack모듈을 불러올 때 충돌이 발생하므로 1번을 사용한다.

3. 서버가 두 번 갱신되는 오류

"scripts":
	"start": "nodemon index.js --delay 2"

//2초의 여유를 두는 코드를 사용한다.

번외) polyfill 이란?

polyfill : 충전솜이라는 의미를 가지고 있다.
솜이 꺼졌을때 충전솜을 채워 메꾸는 역할을 한다. -> 무엇을 메꾸는가?
브라우저에서 지원하지 않는 코드를 사용가능한 코드 조각이나 플러그인(추가기능)을 의미한다.

babel 만 있으면 장땡 아닙니까?

바벨은 ESNext 에서 지원하는 문법을 ES5 문법으로 번역해주지만, ES5에 존재하지 않는 ES6의 Map, Promise, Set, Object.assigin() 이런애들은 존재하지 않으니 번역을 해줄수가 없다.
그래서 저걸 매꾸기 위해 polyfill 을 사용한다. (Map, Promise, Set 등을 사용가능한 객체로 만들어준다)
babel 은 babel-polyfill 모듈을 사용하면 되지만, 현재 deprecated 되었기 때문에 core-js와 regenerator-runtime을 직접 사용하는 방식을 제안하고 있다.