Babel

이전에 올렸던 웹팩 포스팅에 이어서 이번엔 바벨에 대해서 알아보자

Babel이란?

공식사이트에 한번 들어가 소개 문서를 읽어보자.
Babel은 자바스크립트 컴파일러이다. ECMAScript 2015+ 코드를 현재 및 이전 브라우저 또는 환경에서 이전버전과 호환되는 Javascript 버전으로 변환하는데 주로 사용회든 툴체인입니다.

이 문장을 하나하나 살펴보도록 하자.

먼저 ECMAScript라는 말이 나왔는데 이게 무슨 의미의 단어일까

ECMAScript

자바스크립트는 넷스케이프라는 회사에서 개발된 언어이다. 이후, Micro Soft가 Jscript언어를 개발하여 익스플로러에 탑재하였는데 이 두 언어가 서로 호환되지 않아 다른 브라우저를 사용하는 경우 기능이 동일하게 동작하지 않는 문제가 발생하였다.

이 문제를 해결하기 위해 ECMA라는 비영리 표준기구가 모든 브라우저에서 동일한 동작을 하게끔 자바스크립트를 표준화 시킨것이 바로 ECMAScript이다.
우리가 많이 들어본 단어인 ES5, ES6 모두 ECMAScript의 다른 버전을 가리키는 단어인 것이다.

헷갈릴수 있지만, 자바스크립트는 언어 그 자체이고, ECMAScript는 규격, 표준을 의미한다.

그럼 여기서 조금만 더 생각해보자.
모든 브라우저에서 동일하게 동작하게끔 ECMAScipt라는 표준을 만들었는데 그럼 버전이 업그레이드 될때마다 구 버전을 쓰는 브라우저는 어떻게 되는것일까?

실제로 현재도 모든 브라우저가 최신 ECMAScript 버전을 지원하고 있지 않다.
따라서 최신 자바스크립트 문법을 구형 브라우저에서 작동할수 있도록 변경해주는 작업이 필요할 것이다.
이 역할을 수행해 주는것이 바로 Babel이다.

위에서 언급한 Babel의 정의를 다시 한번 보자
Babel은 자바스크립트 컴파일러이다. ECMAScript 2015+ 코드를 현재 및 이전 브라우저 또는 환경에서 이전버전과 호환되는 Javascript 버전으로 변환하는데 주로 사용되는 툴체인입니다.

매우 정확한 설명이다. ECMAScript 2015 이후에 업데이트된 최신 코드를 구버전의 브라우저와 Node 환경에서 호환되도록 코드를 다른 코드로바꿔주는 컴파일러 라는 뜻으로 이해할 수 있다.
최신 자바스크립트 코드를 이전 자바스크립트 코드로 바꿔주기에 TransFiler라고도 한다.

그러나 이렇게 이전코드로 바꿔주는 것에도 한계가 존재한다.
예를 들어

const test = () => {
	return;
}

var test = function Test(){
	return;
}

이런식으로 화살표 함수는 일반 함수로 변환이 가능하지만 ES6이상 버전에서 추가된 Promise, map, set등의 메서드들은 적용할수 없다.

따라서 Babel은 polyfill을 사용해 이러한 문제점을 해결한다.
Babel은 최신 문법을 이전 문법으로 변환시켜 주는 역할이라면, polyfill은 이전 문법에 정의되어 있지 않은 메서드/객체들을 정의해주는 역할을 수행한다.