[유튜브 클론코딩] 2.5 ES6 on NodeJS using Babel

2.5 ES6 on NodeJS using Babel

Babel이란?

- 최신의 Javascript 코드를 무난한 예전의 Javascript 코드로 변환해주는 것

- 우리는 Babel을 node에서 쓸 것이기 때문에 많은 방법 중 Babel Node를 사용할 것이다.

- 설치 방법

   VS Code의 콘솔에서 npm install @babel/node 로 설치한다.

 

- babel의 stage

  또 babel이 갖고 있는게 있는데 많은 stage가 있다.

  만약 stage3의 Babel을 이용한다면 브라우저한테 절반 정도 받아들여질 것이다.

  만약 stage0을 이용한다면 완전 실험적인 걸 얻게 될 것이다.(리스크가 크다는 말인 것 같음)

  우리가 사용할 것은 env이다. (가장 최신이긴 한데 실험적인 수준까지는 아님)

 

- babel env 설치

  npm install @babel/preset-env 을 이용해서 babel을 설치한다.

 

.babelrc 파일 생성

나머지 할 일은.babelrc 라는 파일을 생성하고, 이 파일에 우리가 원하는 모든 설정을 다 집어넣을 것이다. (node.js와 JS와 관련된 필요한 것들을 다 집어넣을 것이다.)

예를 들면, "Babel, 넌 이런 preset을 가질 거야. 또는 다른 Preset을 가질거야." 같은. 즉 babelrc가 babel을 설정하는 곳이다.

babel이 실행되기 전에 이 파일을 찾아보고 여기 설정해둔 preset을 읽고 이해하게 될 것이다. 이 Preset에 따라 코드를 변환할 것이다.

 

VS Code에서 .babelrc 파일을 하나 만든다.

{

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

}

.babelrc에 이렇게 작성하고 저장한다.

 

이것이 잘 작동하는지 보기 위해서는 index.js에서

 

const express = require('express');

이 부분을 지우고

 

import express from "express";

이렇게 바꾼다.

 

package.json 수정 - 자동으로 실행되도록 "scripts" 수정

"scripts": {

    "start": "babel-node index.js"

  }

그리고 package.json에서 다음과 같이 수정한다.

이제 node가 내 index.js를 실행하는 대신 babel이 실행해주길 바래 뭐 이런 의미이다.

어떻게 된거냐면, babel이 코드를 못생긴 코드로 변환한 다음 node.js로 실행해주는 것이다.

npm install @babel/core 코드 입력 후 npm start 하면 잘 작동한다.

 

 

화살표 함수: ES6 최신 문법인데 함수를 더 멋지게 쓰는 방법이다. ES6의 새로운 기능인 const 변수 선언 기능이다.

function handleProfile(req,res){

    res.send("You are on my profile");

}

이것을

const handleProfile = (req,res) => res.send("You are on my profile");

이렇게 바꿀 수 있다. 훨씬 보기 좋다. 이것을 arrow function(화살표함수) 라고 한다. 나머지도 다 이렇게 수정해준다.

 

nodemon package 설치 - 저장하면 서버가 자동으로 재시작 되도록 하기 위함

그런데 우리가 여태껏 코드를 바꾸며 새로고침하진 않았다. 수동으로 서버를 끄고 다시 켰다. 이게 사실 썩 좋진 않다.

그래서 nodemon이라는 package를 설치한다.

 

dependency와 별개로 패키지를 설치하는 방법

dependency란: 프로젝트가 실행되려면 필요한 것을 말한다.

만약 내가 프로젝트의 실행과 관련이 없는, 하지만 개발자를 좀 더 편하게 해주는 것을 설치하려고 한다면 우리는 이걸 dependency에 포함하려는게 아니다. (왜냐면 이건 프로젝트를 실행하는데 필요한게 아니니까)

 

npm install nodemon -D 라고 입력하여 설치한다.

그렇게 하면 package.json에 devDependencies에 nodemon이 추가된 것을 볼수가 있다.

"devDependencies": {

    "nodemon": "^2.0.7"

  }

이런건 프로젝트가 필요한게 아니라 개발자가 필요한 것을 말한다.

 

"scripts": {

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

  },

package.json에서 여기도 이렇게 수정해준다.

그렇게 하면 npm start를 한 상태에서 index.js의 코드를 수정하고 저장하면 바로 다시 실행되는 것을 볼 수가 있다.

저장할 때마다 서버를 새로 실행한다. 이렇게 하면 우리 프로젝트를 우리가 매번 껐다 다시 키고 새로고침하고 저장하고 멈췄다가 다시 키고 이럴 필요가 없이 자동으로 된다.