Webpack 설정

자바스크립트 개발자의 딜레마

자바스크립트 언어의 문법은 빠르게 진화하고 있지만 정작 자바스크립트 코드를 실행해주는 환경은 이를 받쳐주지 못하는 경우가 많습니다. 예를 들어 브라우저의 경우 종류가 워낙 다양해서 어떤 브라우저가 어떤 문법을 지원하는지 일일이 파악하기 힘들 정도이고, 노드 (NodeJS)의 경우에도 버전별로 지원하는 언어 문법이 다르기 때문에 브라우저 만큼은 아니지만 비슷한 문제를 겪게 됩니다.

 

Babel: JavaScript transpiler/Compiler

컴파일(compile)은 인간이 작성한 소스 코드를 컴퓨터가 이해할 수 있도록 머신 코드로 바꿔주는 과정을 의미하지만, 트랜스파일(transpile)은 다른 실행 환경에서도 돌아갈 수 있도록 같은 언어를 유지한체 소스 코드의 형태만 바꾸는 과정을 의미합니다. 

 

예를 들어 아래 코드는 ES6에 도입된 arrow function의 문법을 사용하여 작성되었습니다. 하지만 아래 코드가 돌아가는 브라우저에서 아직 arrow function 문법을 지원하지 않는다면

[1, 2, 3].map((n) => n + 1);

다음과 가은 문법 오류가 발생하여 코드가 정상적으로 실행되지 않을 것입니다.

SyntaxError: Unexpected token =>