유튜브 클로닝 #1-3 Set Up: Babel & devDependencies

Preview

Node.js 사용시 번역가 역할을 해주는 Babel 프레임워크와 devDependencies 의 개념에 대해 알아보자.

또 babel 을 도와주는 추가 패키지 nodemon 에 대해서도 추가로 배워볼 것이다.

강의 내용

바벨 Babel

Bable is a JavaScript compiler.

최신 자바스크립트를 node.js 혹은 브라우저가 이해할 수 있는 자바스크립트로 변환하는 번역기 같은 역할.

https://babeljs.io/

Babel 설치

npm i --save-dev @bable/core

Babel 설정 파일 만들기

어떤 모듈이든 컴퓨터는 모듈 설치시 모듈의 설정을 위해 설정 파일을 먼저 들여다본다.

babel의 설정 파일을 만들어보자.

1) babel 의 설정 파일(config.json)

touch babel.config.json

2) 만들어진 설정 파일에 아래 코드 복붙

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

컴퓨터는 바벨 설치후 설정 파일을 들여다보면 preset-env 라는 preset이 있는 걸 발견하고, 그걸 찾으려고 할 것이다.

preset 이란 바벨을 위한 거대한 플러그인* 이다. 그리고 preset 중 preset-env 가 가장 유명하다. preset-env 는 우리가 이러한 환경에 필요한 구문 변환을 세부적으로 관리할 필요 없이 최신 자바스크립트(ES2015+)를 이용하도록 도와준다.

• 플러그인의 본래 의미는 콘센트에 플러그를 꼽는다는 뜻이다. 하지만 인터넷이 발달하고 웹브라우저가 담당해야 할 부분이 증가하면서 메인프로그램인 웹브라우저가 처리하지 못하는 부분을 처리해 주는 작은 프로그램들을 플러그인이라고 부르기 시작하였다.

3) preset-env 설치해주기

https://babeljs.io/docs/en/babel-preset-env

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

devDependencies

이전 글에서 배운 dependencies 가 프로젝트에 필요한 모듈들이었다면, devDependencies 는 개발자(dev, developer)를 위한 모듈들이다.

dependendies 에 있는 모듈들은 왼쪽 창의 node_modules 에 설치되어 있는 걸 확인할 수 있지만, devDependencies 에 있는 모듈들은 내 작업환경에 실제로 설치되지는 않는다.

dependendies 가 차(프로젝트)에 꼭 필요한 엔진, 연료 등이라면, devDependencies 에 있는 모듈들은 운전자(개발자)의 운전에 도움이 되는 부가요소, 예를 들어 음악, 같은 것이라고 할 수 있겠다.

dependencies 설치 시엔 npm i 또는 npm i (모듈 이름) 으로 한다. 반면 devDependencies 설치 시엔 npm i --save-dev (모듈 이름) 으로 --save-dev 를 붙여줘야 한다.

다시 한 번 언급하지만 dependencies 나 devDependencies 같이 npm i 로 설치하는 모든 것들은 package.json 파일을 닫거나 저장한 상태에서 진행해야 한다.🌟

Babel 의 사용

Babel 사용법은 공식 사이트에도 나와있듯이 아래와 같다.

require("@babel/core").transform("code", {
  presets: ["@babel/preset-env"],
});

"code" 부분에 최신 자바스크립트로 쓴 코드를 넣으면, node.js 가 알아들을 수 있는 구버전 자바스크립트로 변환된다.

하지만 일일이 코드를 이렇게 넣을 수 는 없는 일.
그래서 사용의 편의를 위해 nodemon 이라는 추가 패키지를 설치한다.

Babel의 활용

nodemond 은 파일의 수정사항을 알아서 체크하고 자동으로 바벨을 재실행해준다.

nodemon 이전에 @bable/node 를 먼저 설치해주어야 한다. @babel/node 는 babel-node 명령문을 가능하게 해준다. babel-node 명령문을 이용하면 세부적인 명령 사항들까지 최신 자바스크립트를 (node.js가 알아들을 수 있는) 구식 자바스크립트로 알아서 번역해준다.

1) nodemon & @babel/node 설치

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

@bable/core 는 이미 설치했으니 빼도 무방하다. @babel/node, nodemon 만 추가설치 해주면 됨.

2) @babel/node 사용

package.json 에 scripts 에 이전에 연습 겸 적었던 코드를 babel-node 를 이용한 실행으로 바꿔보자.

없었다면 그냥 새로 내가 사용하고 싶은 script 를 적어주고 앞에 babel-node 만 붙여주면 됨.

"scripts": { 
	"dev": "node index.js"
 },
 
 // 실행 결과: Hello NodeJS!

"scripts": { 
	"dev": "babel-node index.js"
},

 // 실행 결과: Hello NodeJS!

실행 결과는 달라지지 않았지만, babel 을 이용하여 최신 자바스크립트 문법을 사용하더라도 Node.js 가 이해할 수 있게 되었다는 점에서 다르다. 만약 최신 문법을 전자를 이용하여 실행했다면 에러가 났을 것이다.

이제 코드별로 일일이 아래와 같이 써야하는 불편함에서

require("@babel/core").transform("code", {
  presets: ["@babel/preset-env"],
});

babel-node 를 이용해 package.json 에 아래와 같이 한 번만 적어두면
npm run dev 라고만 치면 아주 간단히 실행할 수 있게 되었다.

"scripts": { 
	"dev": "babel-node index.js"
},

 // npm run dev 실행 결과: Hello NodeJS!

3) nodemon 사용

하지만 여전히, 코드를 수정할 때마다 npm run dev 를 일일이 실행해 줘야 하기에 번거로움이 남는다.

nodemon 설치를 해줬기 때문에 이제 --exec 을 사용할 수 있게 되었다. nodemon --exec 를 scripts 에 추가해주면,
이러한 수정사항을 자동으로 감지하고 알아서 나 대신 babel-node 를 재실행 해준다.
( Linux 사용시 nodemon -L --exec 로 -L 이 추가된다.)

"scripts": { 
	"dev": "nodemon --exec babel-node index.js"
},

 // npm run dev 실행 결과: Hello NodeJS!

추가 공부 ？

x

요약 💬

• 이렇게 node.js 에서 자스의 구버전 신버전을 번역해주는 babel 패키지와 그를 도와줄 추가 패키지 nodemon 에 대해 배워보았다.
• 추가로 devDependencies 에 대해 이전 시간에 배웠던 dependencies 와 비교하여 알아보았다.