이전 포스트 ECMAScript란? 까지는 Javascript의 탄생과 Javascript 표준화를 위한 ECMAScript 그리고 각 Version에 대해 알아봤습니다. 현재까지 ES10(ECMAScript 2019) 까지 발표되었으며 Javascript에서 할 수 있는 작업들이 늘어나고 있음을 느낄 수 있었다. 그러나 이를 구동시키기 위한 런타임 환경인 브라우저가 모든 버전을 해석(인터프리트) 할 수 없으며 그에 따라 개발자는 브라우저가 이해하고 해석할 수 있는 버전 으로 Javascript의 수준을 낮춰야만 한다. 그렇다면… 기능을 포기해야 할까? 아니라면 복잡한 기능을 직접 개발하는 우회적 방법을 써야할까? 그래서 나온것이 BABEL 이라는 Javascript compiler 다.
본 포스트에서는 Babel에 대한 구조적 설명보다는 브라우저에서 ECMASCript 2015+ 의 코드를 실행시키기 위한 Tool로써의 의미와 ECMASCript 2015에 대해 다루도록 하겠습니다.
Babel, Complier? Transpiler?
블로그를 쓰기 위해 먼저 짚고 넘어갈 부분이 생겼다. Babel은 Complier인가 Transpiler인가? 공식 사이트에 가보면 분명 Babel is Javascript Compiler 라고 써있지만… 여기저기 개발자 블로그를 들어가보면 트랜스파일러라고 하는 분들이 많았다. 왜일까….?
Is Babel a compiler or transpiler? 에 따르면, 먼저 Compiler와 Transpiler에 대해 알아보자.
Compiler 란
고수준의 프로그래밍 언어로 작성된 코드를 object code, bytecode, machine code와 같은 저수준의 언어를 변환하는 도구라고 한다.
Transpiler 란
source-to-source compiler 또는 transcompiler라고도 불려지고, 고수준의 언어들 사이에서 소스코드를 변환하는 도구이며 결과 코드는 여전히 인간이 읽을 수 있다.
위 정의만 봤을때는 Babel은 Compiler보단 Transpiler에 가깝다. 정확히는 source-to-source compiler 에 가깝다. 좀더 번역해보자.
바벨은 현재와 이전의 브라우저 환경에서 ECMAScript 2015 이상의 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환하는데에 사용하는 주요한 JavaScript 툴체인(toolchain) 이며, 브라우저 지원을 기다리지 않고 지금 당장 새로운 문법을 사용할 수 있도록 문법 변환기(syntax transformers)를 통해 JavaScript의 최신 버전을 지원하고, JSX 문법을 변환할 수 있다.
즉, Babel 은 위에서 정리했던 Compiler의 기능보다는 Transpiler 의 기능에 가까우며 최신 문법으로 작성된 Javascript 코드를 ES5 또는 그 이하의 문법으로 변환시켜주며 실행에 있어서도 문제없이 작동하도록 도와주는 역할을 한다고 정의할 수 있다.
ECMAScript 2015+
그렇다면 ECMAScript 2015 에는 무엇이 추가되었으며 ES 6, 7, 9 에는 무엇이 추가되었을까? 이 주제는 작지 않으므로 따로 포스팅하겠습니다.
참고
용어 설명
저수준(low-level language) 언어
추상화에 대한 프로그래밍 컨셉이 거의 없거나 전혀 제공하지 않고, 실제 머신 지도에 가까운 언어이다. 예를 들어, assembly, machine code, and bytecode가 있다.
고수준(high-level language) 언어
지금까지 활동중인 고 수준의 언어에는 Python, Visual Basic, Delphi, Perl, PHP, ECMAScript, Ruby, C#, Java 그리고 그 밖의 많은 언어들이 포함된다.