Node.js - Babel

- Babel 

---

Babel , 바벨 이라고 불리우는 이 녀석은 뭐하는 애일까?

일단 이 친구를 알기 전에 ES6,7 과 ES5 간의 차이를 알아야 한다. 

ES5는 2009년도 에 표준화된 JavaScript로 우리가 익히 알고 있던 JavaScript 표준 언어(동적 언어)이다.

그러다 2015년에 개정판으로 표준화된 JavaScript가 나오게 됬는데 이것을 ECMAScript2015(EC2015) , ECMAScript6(ES6) 이라고 한다.

더 나아가서 2016년에도 추가로 개정되어 ES7 이 나와서 최신 표준이 되었지만 아직까지 ES6가 대세이고 이 ES6에 들어와서 획기적인 변화들이 생기게 되었다.

변화된 문법들중 대표적으로

• import & export
• let & const
• class
• arrow function
• template string
• generator
• destructuring

이러한 문법들이 있으며 추후에 알아가보도록 하며 여기서 Babel이라는 개념을 다시 상기시켜본다면 JavaScript의 버전업그레이드로 인한 문제로 생겨나게 된다.

문제는 앞에 나열한 최신 문법을 가진 ES6 코드를 런타임환경인 브라우저가 인식하고 실행할수 있느냐 이다.

IE를 포함한 모든 브라우저가 이러한 최신 ES6 문법을 다 지원하지 못하기에 효율성과 유지보수등의 이유로 코드자체는 ES6으로 구현해야 하지만 실행환경이 뒷받쳐주지 못함으로 인해 버전 차이가 발생하게 된다.

Babel은 이러한 문제점을 해결해주는 녀석으로 ES6,7로 작성된 코드를 브라우저가 인식할 수 있는 ES5로 변환시켜주는 Transpiler 이다. 

대단한 친구임에 분명함에도 주의해야 할 점은 Babel을 사용한다고 해서 ES6,ES7 함수를 다 사용할수 있는 건 아니다.

따라서 프로그램이 처음 시작될 때 브라우저에서 지원하지 않은 함수를 검사해 처리해 주는 작업이 이루어져야 한다.( babel-ployfill )

- Hello World

---

babel 이라는 폴더를 생성한후 

js 파일 및 package.json 을 구성해본다.

package.json

{

  "name": "babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3" // express 웹 어플리케이션 모듈 설치
  }
}

app.js

import express from 'express';

export class Server {
    constructor(){
        this.app=express();
        this.app.get('/console',(req,res)=>{
            res.send('This is Node Server');
        })
    }
}

server.js

import {Server} from "./app";

const port = 8080;
const app= new Server().app;
app.set('port',port);
app.listen(app.get('port'),()=>{
    console.log(app.get('port') + 'server is Running');
}).on('error',err => {
    console.log('Error message ' + err);

})

app.js, 와 server.js 에서는 es6 문법으로 코딩해보았다.

그후 server.js 를 실행 시키면 

SyntaxError 로서 nodejs 의 현재 버전으로는 import 구문을 지원하지 않는다는 뜻이다.

ES6구문을 지원받기 위해서 Babel을 설치하고 사용해 보자.

- Babel 설정

---

먼저 설치 과정이다.

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

이 네가지 모듈이 대해 정의해보자면

@babel/core : 바벨의 핵심 파일, 바벨의 다른 모듈들이 종속성을 가진다.

@babel/node : 바벨의 CLI 도구 중 하나이다. 이전 버전의 babel-cli 로부터 분리되었다.

@babel/preset-env : 바벨의 preset 중 하나로 es6+ 이상의 자바스크립트를 각 브라우저/ 노드 환경에 맞는 코드로 변환시켜준다.

nodemon : 파일을 관찰하고 있다가 변경점이 발생하면 자동으로 애플리케이션을 재시작해주는 편리한 도구이다. 

( babel 설치와는 별개의 옵션이다라고 생각했던 모듈이었는데 필요한 모듈이었다...)

모듈을 설치 했으면 .babelrc 파일을 프로젝트 폴더 바로 아래에 만들어 주자.

.babelrc 파일로 babel을 설정할수 있고 구성은 다음과 같이 코딩하자.

.babelrc

{

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

}

마지막으로 package.json 의 scripts 부분안에 

package.json

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

을 추가하고 npm start  하게 되면 제대로 서버가 돌아가는 것을 확인 할수 있다.

정리하자면 Babel은 ES6,7 언어를 ES5 로 변환시켜주는 트랜스파일러로 설치과정이 생각보다 간단하다.

https://gompro.postype.com/post/1699968

https://poiemaweb.com/es6-babel

https://jaeyeophan.github.io/2017/05/16/Everything-about-babel/

https://moon9342.github.io/javascript-babel