Babel(feat. nodemon)

첫 사용 느낌은 간단하게 말하면 'JS 코드를 깔끔하게 만들어준다!' 였다.

// 원래 알던 JS
function handleHome(req, res) {
  res.send("Hello World!");
}

// Babel 적용
const handleHome = (req, res) => res.send("Hello World!");

그런데 내가 볼때는 간단하게... 는 아닌것 같다.

여기서 쓴 '=>'는 'Arrows함수' 라고 불리는 ES6의 문법중 하나다.

https://jsdev.kr/t/es6/2944

사실 이건 C#을 잠깐 공부 했을때 본 적이 있는 것 같아서 찾아봤더니 비슷한 쓰임새였다.

// 굳이 바꿔 쓰자면 이런 느낌?? (물론 문법은 좀 잘못됬다..ㅎㅎ)
static void handleHome(req, res) => req.send("Hello World!");

어쨋든. 이걸 쓰기 위해서 어떻게 해야하냐!!

우리는 node에서 Babel을 사용할 것이므로 컨솔 창에 다음과 같이 입력한다.

npm install @bable/node

꼭 node가 아니더라도 사용할 수 있는데 '/'뒤에 'node'대신에 다른 것을 넣으면 되는듯하다.

 

본인이 만든 js와 같은 위치에 '.babelrc'라는 파일을 하나 생성하고 그 안에 다음을 입력한다.

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

 

추가로 하나 더 컨솔창에서 받아줄 것이 있다.

npm install @babel/core

(이걸 안받으면 ERR가 뜨는데 사실 잘 모르겠... (쉿......!!!))

그리고 npm install을 통해서 생성된 package.json파일에다가 다음을 추가로 입력해 놓자.

"scripts": {
    "start": "babel-node (파일명).js"
  }

후에 컨솔에 npm start를 적으면 굳이 매번 bable-node (파일명).js를 입력해야 하는 수고를 덜어줄 수 있다.

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

Babel · The compiler for next generation JavaScript

위의 사이트에 더욱 자세히 적혀 있다. (왼쪽 카테고리에 env말고도 react등 다양하게 있다.)

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

웹을 개발 하다보면 변경점이 있으면 서버를 껏다가 다시 켜야 하는 수고를 덜어주는 방법도 있다.

npm install nodemon

이걸 사용하면 굳이 서버를 끄지 않아도 새로고침 만으로도 변경된 내용을 적용시켜주는 신기한 모습을 볼 수 있다.