배워서 나주는 시리즈 그 두번째
이번에는 Babel에 대해서 알아보자.

1)Babel이란?

Babel is a JavaScript compiler. -공식사이트-

Babel은 자바스크립트 컴파일러다. 쉽게 생각하면 자바스크립트를 자바스크립트로 변환(컴파일)해주는 역할을 한다. 그런데 왜 굳이 자바스크립트를 자바스크립트로 컴파일할까?

자바스크립트 문법은 매해 발전하고 새로운 문법과 기술들이 지금도 나오고 있다.
때문에 사용자들이 이용하는 브라우저가 이를 따라가지 못하는데 이를 해결하기 위해 BABEL이 등장했다.

브라우저가 업데이트 될때마다 사용자가 브라우저를 최신으로 유지한다면 매우 좋겠지만 사실 그렇게 되지 않고 최신 브라우저도 최신 자바스크립트 문법을 이해하지 못하는 경우도 있기 때문에 최신 자바스크립트를 기존 브라우저가 이해할 수 있도록 컴파일해주기 위해서는 Babel이 필수적이라고 할 수 있겠다.

또한 Babel은 요즘 개발자들 사이에서 핫한 Typescript를 Javascript로 변환해주는 역할 역시 해주고 있다.

2)그래서, 어떻게 쓰는 건데?

준비물 : node.js와 코드 에디터 끗.

새 프로젝트 폴더를 열고, pakage.json파일을 만들어주자.

$ npm init --y

package.json이 생성되었다면, babel을 사용하기위한 패키지들을 설치해주자.

$ npm i @babel/core 

Babel 본체 패키지이다.이다.

$ npm i @babel/preset-env

Babel 본체로는 변환이 되지 않기 때문에 preset을 이용하여 타겟에 따른 컴파일을 해주기 위한 패키지이다.

$ npm i @babel/cli

Babel을 실행하기 위한 커맨드라인 인터페이스 패키지이다.

전부 설치가 되었다면 pakage.json은 이런 상태일 것이다.

pakage.json에 script 부분에 이하의 명령을 추가해주자.

"build" : "babel src -d build"

BABEL로 컴파일 하기위한 테스트 파일을 만들자 src폴더를 만들고 src폴더 안에 index.js 파일을 생성해주자. 생성을 해주었다면 자기가 알고있는 가능한 최신문법으로 코드를 작성해보자!

뭔가 중구난방이지만 위처럼 작성해주었다면 이하의 명령으로 방금 작성한 자바스크립트 파일을 BABEL로 컴파일해주자.

$ npm run build

뭔가 바뀐것 같지만 큰 변화는 없다. babelrc파일이 없어 디폴트 셋팅으로 컴파일된것 같은데 이를 바꾸기위해 .babelrc파일을 만들어주자.

.babelrc파일을 만들어 안에 preset 설정해주었다. preset은 여러가지 plugin들이 모여있는데 .babelrc파일에 @babel/preset-env를 preset으로서 넣어주면 해당 targets 브라우저 환경에 맞게 자바스크립트를 컴파일하도록 설정할 수 있다. 위처럼 설정해주면 크롬 브라우저 40버전에 맞게 대상 자바스크립트 파일을 컴파일해줄 것이다.

다시 빌드해보자.

$ npm run build

build 폴더에 index.js를 확인해보면 아까보다는 바뀐것을 알 수 있는데, BABEL이 최신 문법을 크롬 40버전이 이해할 수 있는 구버전 문법으로 바꾸어 준 것이다.

3)마치며

BABEL은 사실 자바스크립트 개발자라면 필수로 알고있어야 한다고 생각한다. 이번 포스팅에서는 BABEL이 어떤 것인지만 알아보았지만 BABEL 속성은 더 많이 있기에 관심이 있다면 더 공부해보는것도 좋을 것 같다.

이 글은 계속해서 수정/업데이트 중에 있습니다.
관련해서 틀린 부분이 있다면 지도해 주시면 정말 감사드리겠습니다.