[JavaScript, Node.js] 유튜브 클론 정리 2장 (3) - babel, nodemon

머리글

이번 시간에는 babel은 무엇인지, 그리고 nodemon은 무엇인지 알아보도록 하겠다.

Babel?

https://babeljs.io/

Babel · Babel

'Babel은 JavaScript의 컴파일러다.'

nodeJS는 대부분의 JavaScript 코드를 이해한다.
하지만 호환이 되지 않는 최신의 코드도 있을 것이다.

그래서 우리는 Babel을 사용해서 우리의 코드를 컴파일하는 방법을 사용한다.

우선 터미널에 명령어를 입력해 주자.

npm i --save-dev @babel/core

다른 명령어는 이해가 가는데 --save-dev의 경우는 처음 보는 명령어다.

이는 package.json 파일에서 알 수 있다.

devDenpendencies

dependencies 파일의 내용은 프로젝트를 돌리기 위해 필요한 내용이었다면,
devDenpendencies 파일의 경우 개발을 할 때 필요한 내용을 담고 있다.

즉, 개발자에게만 필요한 파일 목록이라는 이야기다.

이제 환경설정을 위해서 'babel.config.json' 파일을 하나 생성해 준다.

그리고 파일에 다음을 작성해 준다.

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

그리고 또 하나의 명령어를 실행해 준다.

npm i @babel/preset-env --save-dev

이 과정까지 진행했다면, 프리셋이 완료되었다.
이제 nodemon에 대해서 알아보자.

Nodemon?

우선 명령어를 입력하자.

npm i @babel/node --save-dev

그리고 package.json 파일의 scripts 부분으로 이동한다.

기존에 win이라고 작명했던 script의 이름을 dev로 변경해 주고,
내용을 'babel-node index.js'로 변경해 주자.

이렇게 변경하자

그리고 index.js 파일에 적당히 console.log를 작성해 주자.
그리고 명령어를 실행한다.

npm run dev

그러면 정상적으로 작동한다!
근데 이렇게 하게 되면, 파일을 수정할 때마다 다시 시작을 해줘야 하는데 너무 귀찮은 일이다.

그래서 우리는 nodemon을 사용한다.
nodemon은 파일의 변화를 감지하고 알아서 재시작을 해주는 역할을 한다.

우선 nodemon을 설치하자.

npm i nodemon --save-dev

그리고 scripts의 내용을 변경해 주자.

"nodemon --exec babel-node index.js"

이렇게 하면 index.js의 내용이 변화할 때마다, nodemon이 감지해서 자동으로 npm run dev를 해준다.

마무리

Babel은 JavaScript의 컴파일러라는 내용과 최신의 코드와 호환하기 위해서 사용한다는 점을 배웠고,
nodemon을 통해 파일이 수정되었을 때, 자동으로 재실행하는 방법을 알아보았다.

다음 강의에선 express를 통해 서버를 실행하는 방법을 배운다.