Babel 활용하기

추가 자료

1) How to use ES6 with Babel and webpack

https://blog.jakoblind.no/babel-webpack-es6/

2) What is babel-preset-env and why do I need it?

https://blog.jakoblind.no/babel-preset-env/

Babel이란 무엇인가?

- Babel은 자바스크립트 컴파일러로서, 최신의 자바스크립트 코드를 아주 무난한 이전 단계의 자바스크립트 코드로 변환 가능하게 해주는 개발 도구,  즉 트랜스파일러(Transpiler)이다.

  이와 같은 트랜스파일러(Transpiler)가 필요한 이유는, ES6+를 사용하여 프로젝트를 진행하려면 ES6+로 작성된 코드를 IE를 포함하여 모든 브라우저에서 문제 없이 작동할 만한 개발환경을 구축해야 하기 때문이다.

 즉, Babel 패키지를 활용하면 자바스크립트 최신 문법으로 자유롭게 코딩하면, 그것과 웹브라우저간의 호환을 Babel 패키지가 책임져준다.   

Babel이 제공하는 기능은 다음과 같다. 

 1) 구문(Syntax) 변환

 2) (당신의 현재 환경에 없는) Polyfill 기능 

 3) 소스 코드 변환

 4) +@

그 구체적인 예시는 다음과 같다. 

위의 왼쪽 입력창에 const something = (a, b) => a * b; 를 입력하면,

이를 Babel이 var something = function something(a,b) { return a * b}; 로 변환해준다. 

참고로 const는 ES6에서 새로 도입되었으며, 자바스크립트에서 변수나 함수의 선언에 활용된다. 

ES6란, ECMAScript6의 줄임말로서, ECMAScript는 자바스크립트의 표준을 의미한다. 

한 단계씩 Babel의 활용에 대해서 알아보자. 

1) npm install '@babel/node'를 입력하고 실행한다. 

    이를 통해서 node.js에서 Babel을 활용할 수 있다. 

2) package.json파일의 dependencies에 @babel/node가 추가되었다. npm install을 통해서 추가되는 모듈에 관한 정보는 모두 여기에 기록된다. 

3) 다음은 npm install '@babel/preset-env'를 입력하고 실행한다. 

    preset-env란 함께 사용되어야 하는 Babel 플러그인을 모아 놓은 곳으로서, 

    이외에도 Babel이 공식 지원하는 프리셋에는

    @babel/preset-typescript, @babel/preset-react 등이 있다. 

    플러그인이란 호스트 응용 프로그램과 서로 응답하는 프로그램이며,

    특정한 '주문식'기능을 제공한다. 

 4) .babelrc라는 파일을 새로 만든다. .babelrc는 Babel에 대해 설정을 하는 파일이다.

     .babelrc파일을 통해 설치한 프리셋을 연결해줄 수 있다. 

5) .babelrc파일에 다음과 같은 코드를 입력한다. 

    {

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

   }

   이 코드를 통해, 자바스크립트 파일(ex) index.js)이 실행될 때, 

   바벨이 이 코드를 읽고 바벨의 preset과 관련한 기능을 실행한다. 

6) package.json파일의 script칸의 start에 node index.js를 babel-node index.js로 변환해준다. 이를 통해 npm start를 할 때, Babel이 같이 실행되게 된다. 

7) 다음은 npm install @babel/core를 설치한다. 

    @babel/core는 transform과 관련한 기능을 제공한다. 

8) 이제 index.js로 돌아와보자. 이제 원래 express모듈을 호출하기 위해서 작성했던 

const express = requires('express')를 최신 문법인 import express from "express";로 바꾸어서 실행할 수 있다.  

9) npm start를 하면 이전과 같이 express 서버가 잘 실행되는 것을 관찰할 수 있다. 

    만약 Babel을 설치하지 않고서 import express from "express"를 사용한다면, 

    특정 브라우저와 호환되지 않는 문제가 발생할 수 있다. 

"다음은 노마드코더(https://academy.nomadcoders.co/)의 [초급 풀스택] 유튜브 클론 코딩 강의를 참고하였습니다."