[JS] 자바스크립트 트랜스파일러 바벨(Babel)

개발자들이 실행 환경에 구애받지 않고 최신 문법의 자바스크립트로 코딩할 수 있도록 도와주는 도구인 바벨(Babel)에 대해 알아보겠습니다.
 

 
 

1. 트랜스파일러(Transpiler)

바벨은 자바스크립트의 트랜스파일러로 현재, 이전의 브라우저 또는 환경에서 ES6코드를 이전 버전의 자바스크립트로 변환하는 데 주로 사용되는 도구입니다. 트랜스파일러란 한 언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 의미합니다. 컴파일은 한 언어로 작성된 코드를 다른 언어로 변환하는 것인데, 이 점에서 트랜스파일러와 컴파일이 다릅니다.
 
예를 들어 컴파일러는 Java에서 bytecode로, C에서 assembly로 변환합니다. 트랜스파일러는 es6 코드를 es5 코드로, C++에서 C로 변환합니다.
 

2. 바벨(Babel)

바벨의 사용 목적은 ES6이상의 문법을 ES5문법으로 변환해주거나 현재 브라우저에는 없는 새로운 문법을 추가해주는 (es5 기준) 트랜스파일러이며, 브라우저 환경에서 안전하게 자바스크립트를 사용하기 위함입니다. 최신 문법을 사용하면 브라우저에서 지원하지 않는 경우가 있습니다. 예시로 replaceAll() 함수가 IE에서 작동되지 않는 것처럼요. 이럴 때 사용하는 것이 바로 트랜스파일러입니다.
 
프리셋은 목적에 맞게 코드를 모아놓은 하나의 세트로 자주 사용되는 Babel Preset이 존재합니다.

• preset-env : ES6에서 ES5로 변환
• preset-react : react 변환
• preset-typescript : typescript 변환
• preset-flow : flow 변환

예시로 @babel/preset-env에 포함된 @babel/plugin-transform-arrow-functions 이라는 preset도 존재합니다. 이름 그대로 화살표 함수 문법을 ES5 형태로 변환시켜줍니다. 이렇게 필요한 기능들의 프리셋만 설치해서 사용할 수 있다는 장점이 있습니다.