소통방 자유게시판 최신글모음 개발자방 퍼블리셔방 디자이너방 기획방 고객후기 가입인사 랭킹뷰 메모로그 출석부

Babel을 사용해보자

2019년 03월 21일

Introduction

아무 생각없이 Babel을 쓰고 있지만 예전부터 궁금했던 Babel이란 이름이 내가 알고 있는 그 바벨탑의 바벨인가? 라는 의문에 이름의 근원을 찾아보고 이왕 찾아본 김에 Babel의 간단한 사용법 정도만 정리해 보도록 하겠습니다. ( 도데체 이런게 왜 궁금한건대? )

Babel이란 이름의 기원

결론적으로 Babel Official HomePage 에서는 이름에 대한 근원을 찾을수는 없었습니다. 어딘가에 숨어있는지는 모르겠지만요. 여하간 Babel은 성경 영어로 구약성서 창세기에 그 근원을 두고 있습니다. ( 왠지 산으로 가는 느낌입니다. )

노아의 홍수 이후로 인간은 다시 번성하기 시작했고 그 당시에는 전 세계의 언어가 하나였다고 합니다. 하나님은 인간들에게 흩어져 살 것을 명하셨지만, 사람들은 하나님의 말씀에 불순종하여 Shinar 라는 곳에 모여 살았답니다. 그리고 그들은 자신들을 위해 하나의 도시를 건설하고 하늘에까지 닿는 높은 탑도 같이 세워 자신들의 이름을 높이고 흩어지지 않겠다는 의미로 하나의 높은 탑을 건설하게 되었는데 이게 그 Babel(바벨탑)이랍니다.

하지만 인간들의 그러한 동기를 아시는 하나님께서 그들이 탑을 세우지 못하고 전 세계로 흩어지게끔 그들의 언어를 여러개로 나누셔서 서로간의 의사소통이 되지 않도록 하셨답니다. 서로 말이 통하지 않자 탑 공사는 중단되고 결국 언어가 맞는 사람끼리 뿔뿔히 흩어져 살게되었다라는 이야기지요.

그래서 Babel의 사전적 의미는 “와글와글”, “바벨탑”, “거대한 탑” 의 의미를 가지게 되었다고 합니다.

Babel의 목적

Babel은 JavaScript transpiler입니다. 공식 홈에는 compiler라고 표현했지만 사실 compiler보다는 transpiler라는 용어가 더 맞지 않나 싶습니다. 여하간 Babel의 입력은 JavaScript이고 출력 역시 JavaScript입니다.

잘 알다시피 ES5 표준은 2009년도에 표준화되었습니다. 그리고 한동안 변경이 없다가 2015년에 ES6가 표준화가 됩니다. 현재 시점은 ES7 이 최신표준이지만 아직까지 ES6가 대세라고 볼 수 있습니다. 이 ES6에 들어와서는 여러가지 획기적인 변화가 생기게 되었습니다.

변화된 내용 중 대표적인 것들은 다음과 같습니다.

class
arrow function
template string
generator
destructuring
let & const

문제는 이런 최신의 문법들로 쓰여진 JavaScript 코드를 런타임 환경인 browser가 인식하고 실행할 수 있는냐는 것입니다. browser는 최신 ECMAScript 문법을 다 지원하지 못하거든요. 특히 구형 browser나 IE같은 경우는 그 정도가 심합니다.

하지만 생산성과 유지보수성등의 이유로 코드자체는 ECMAScript 최신버전으로 구현하는게 당연히 좋습니다. 즉, 구현과 실행환경과의 버전차이가 생기게 됩니다. Babel은 ECMAScript 6,7 으로 작성된 코드를 browser가 인식할 수 잇는 문법(ES5)으로 변환시켜주는 transpiler입니다.

한가지 주의해야 할 점은 Babel을 사용한다고 해서 모든 최신의 JavaScript함수를 다 사용할 수 있는건 아닙니다. Babel은 문법만 변환시켜 주는 역할만 할 뿐입니다. 따라서 프로그램이 처음에 시작될 때 browser에서 지원하지 않는 함수를 검사해 처리해주는 작업이 이루어져야 하고 이 부분은 babel-ployfill이 runtime에 담당하게 됩니다. ( 이 기능을 사용하기 위해서는 추가적인 설정이 필요합니다. )

Babel의 사용

자 그럼 실제 사용하는 예를 알아보도록 하겠습니다.

Babel역시 다른 node module과 마찬가지로 npm으로 설치하면 됩니다.

npm install --save-dev babel-cli babel-preset-es2015

package.json에 다음과 같이 npm script 작성

{  ...  ...  "scripts": {    "build": "babel babelTest.js -d lib",    "test": "echo \"Error: no test specified\" && exit 1"  },  ...  ...
}

ES6로 다음과 같은 코드 작성하고 babelTest.js로 저장합니다.

let [a,,b] = [1,2,3];

let myName = "홍길동";

console.log(`Hello ${myName}`);

class Student {    constructor(sName) {        this.sName = sName;    }
}
let stu = new Student("Moon");
console.log(stu.sName);

다음과 같이 .babelrc 파일을 작성합니다.

{  "presets": [    "es2015"  ]
}

다음과 같이 npm script를 실행시켜 lib폴더에 생성된 컴파일된 결과 파일을 확인합니다.

npm run build

결과로 생성된 ES5 파일의 내용

"use strict";

function _classCallCheck(instance, Constructor) {     if (!(instance instanceof Constructor)) {         throw new TypeError("Cannot call a class as a function");     } }

var _ref = [1, 2, 3],    a = _ref[0],    b = _ref[2];
 
var myName = "홍길동";

console.log("Hello " + myName);

var Student = function Student(sName) {    _classCallCheck(this, Student);
    this.sName = sName;
};

var stu = new Student("Moon");
console.log(stu.sName);