TIL DAY 216

오늘 배운 일

<3> 노마드 인스타그램 클론코딩

저번 시간에는 간단하게 프로젝트를 진행하기 앞서, 백엔드 셋업 과정을 해보는 시간을 가졌다.

우리는 라이브러리들을 불러올 때, import 기능을 사용했다.

import 기능을 쓸려면, package.json 파일에 type: module 를 따로 작성해주어야 했다.

하지만 type module 은 장단점이 존재해서 할 수 있는 것들과 없는 것들이 존재한다.

그러니까 특정 nodeJS 버전에 제약을 받는 것보다, 우리의 코드가 어떠한 버전의 nodeJS 에 무사히 동작할 수 있도록 해보겠다.

그래서 우선 type : module 코드를 지워주고 Babel 을 설치해준다.

Babel 이란?

• 자바스크립트 컴파일러이다.
  (예를 들어 최신 자바스크립트 코드를 작동시킬 때, 브라우저가 이해할 수 있는 코드로 변환해준다.)

먼저 우리 프로젝트로 돌아가서, 터미널을 키고 해당 커맨드를 입력해준다.

npm install --save-dev @babel/core

그리고 babel/env 를 설치해준다.

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

다음으로 babel.config.json 이라는 파일을 생성해준다.

babel.config.json

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

위의 코드를 해당 파일에 붙여넣기 해준다.

이제 nodeJS 버전에 신경 쓸 필요가 없다.

그럼 package.json 로 돌아가서...

dev 명령어를 수정해야 한다.
더 이상 node server.js 를 실행하지 않을 것이다.

다음과 같이 dev 를 수정해준다.

"dev": "nodemon --exec babel-node server"

이러면 이제 babel-node 를 실행하는데, 우리 프로젝트에는 아직 설치되지 않아서 따로 설치해보자!

npm install @babel/node --save-dev

각자 짧게 설명하면...

• babel/core 는 babel 그 자체고
• babel/preset 은 계속 우리의 코드를 업데이트 해준다.
• babel/node 의 역할은 JS 파일을 실행시키는 것이다.

이제 터미널로 돌아가서 npm run dev 를 실행해보자!

실행시켜보면 아무런 문제 없이 작동하는 것을 볼 수 있다.

요약하면

• 우리는 굳이 babel 이 없어도 import 를 사용할 수 있다. 하지만 자바스크립트는 계속 업데이트 되는 기능들이 있고 낮은 노드 버전을 갖고 있는 사람들도 있을 것이다. 그리하여 특정 기능을 사용하기 위해 node 의 버전 업데이트에 의존하는 대신에 babel 이라는 좋은 자바스크립트 컴파일러를 사용했던 것이다.
• babel 은 모든 node 버전들에서 이해 가능한 옛날 자바스크립트 문법으로 컴파일 해준다.