[김민태] 02 JS 그리고 TS - Babel(바벨)이란?

몇 년간 진행했던 프로젝트를 보면 바벨 설정이 필수불가결하게 들어가있다. 그만큼 모든 프로젝트에 꼭 필요한 요소라는 뜻인데, 사실 사용하기는 프로젝트를 진행하는 매일 사용하지만 최초에 설정 이후에는 그 존재를 잊곤 한다.

 

바벨은 히브리어로 '혼돈'이라는 뜻을 가지고 있는데, 성경 속에서 언급되는 바벨탑도 언어의 혼돈(?) 이야기를 담고 있다. 마찬가지로 바벨도 혼돈된 스크립트 언어(?)의 이야기를 담고 있는, 마침 강의에 언급되어 확실하게 정리해보고자 한다.

---

Babel은 transpiler 중 하나인데, 트랜스파일러란 영어의 뜻에서 알 수 있듯이 변환해주는 것을 의미한다. 컴파일러는 프로그래밍 언어를 기계어로 변환해 주는 것을 의미한다면, 트랜스파일러는 프로그래밍 언어를 같은 언어이지만 다른 문법으로 변환시켜준다.

 

왜 같은 언어인데, 다른 문법으로 굳이 변환시켜줘야 하는 것일까?

 

자바스크립트의 위키백과 설명중에

자바스크립트는 ECMA스크립트 (ECMAScript)의 표준 사양을 가장 잘 구현한 언어로 인정받고 있으며 ECMAScript 5 (ES5) 까지는 대부분의 브라우저에서 기본적으로 지원되었으나 ECMAScript 6 이후부터는 브라우저 호환성을 위해 트랜스파일러로 컴파일된다.

 

라는 말이 언급되어있다.

https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

자바스크립트 - 위키백과, 우리 모두의 백과사전

 

ES는 1997년에 초판을 시작으로 2009년 말 ES5로 발전했다. 이후 ES6를 2015년에 발표하게 되는데, 이 때부터는 사실 ES6 보다는 발표된 년도. 즉, ES2015, ES2016 등등으로 불리우게 된다. 관련 역사가 궁금하면 위키백과에 자세히 설명되어있다.

https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

ECMA스크립트 - 위키백과, 우리 모두의 백과사전

 

새로운 버전이 발표될 때 마다 모든 브라우저가 해당 버전을 쫓아가며 적용을 하지는 않는다. 하단은 MDN에 있는 일부 문법의 브라우저 호환성을 캡쳐한 것이다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import

보는 것과 같이 모든 브라우저에서 해당 문법 해석을 지원하고 있지는 않다. 그러나 대부분의 브라우저가 기본적으로 적용하는 버전이 있었으니 바로 ES5이다.

 

그렇다면 우리가 서비스 할 때, ES5 버전으로만 사용해야하는 것일까? 뭐 그래도 상관은 없지만 업그레이드 된 더 효율적인 문법은 전혀 익힐 기회가 없게 될 것이다.

그렇다면 우리가 서비스 할 때, 사용하는 버전에 맞는 브라우저만 지원해야 하는 것일까? 뭐 그래도 상관은 없지만 타 브라우저를 사용하는 사용자들에게는 매우 불친절한 서비스가 되고 말 것이다.

 

이러한 딜레마를 해결해주는 것이 바로 '바벨'인데, 한 마디로 정리하자만 ES6이후 버전의 문법들을 ES5 버전 문법으로 변환 시켜주는 역할을 하는 것이 바벨이다. 덕분에 우리는 최신 문법으로 효율적으로 프로그래밍을 할 수 있게 되었고, 많은 사용자들에게 브라우저의 제약 없이 서비스를 제공할 수 있게 되었다.