Babel

ES6+ 자바스크립트 코드를 ES5 이하로 변환해주는것을 트랜스파일이라고 한다. Source-to-source compile을 transfile이라고 부른다. 그렇기 때문에 트랜스파일을 컴파일이라고 부르기도 한다. 트랜스파일을 가능하게 해주는 자바스크립트 라이브러리가 Babel이다.

Babel 공식 홈페이지에서도 "Babel is a JavaScript compiler" 라고 설명이 되어있다.

따라서 Babel은 JavaScript코드를 변환하는 컴파일러이다.

# 왜 Babel을 사용하는가?

프론트엔드의 발전이 너무 빠르기 때문에 브라우저에서 지원하지 않는 기술이 존재한다. Babel은 이를 해결하기위해서 최신 버전의 자바스크립트 코드를 이전 버전(주로 ES5)으로 변환한다. 이를 통해 새로운 문법과 기능을 사용하면서도 구버전 브라우저에서의 호환성을 유지할 수 있다.

# Babel의 작동방식

Babel의 작동방식은 다음 세 단계로 구분된다.

파싱(Parsing), 변환(Transformation), 생성(Generation)

파싱(Parsing) : Babel은 먼저 최신 JavaScript 코드르 ㄹ읽어 추상 구문 트리(AST)로 변환한다. 이 과정은 babel-parser(또는 babylon)라는 플러그인을 통해 수행된다.

변환(Transformation) : AST를 받아 각 브라우저 환경에 맞게 코드를 변환한다. 이 단계에서 ES6+문법을 ES5문법으로 변환하거나, JSX를 JavaScript로 변환하는 등의 작업이 이루어진다.

생성(Generation) : 변환된 AST를 바탕으로 @babel/generator를 통해 새로운 코드를 생성한다. 이 코드는 구버전의 브라우저에서도 실행 가능한 JavaScript 코드이다.

추가로 Babel은 폴리필(Polufill)을 통해 새로운 JavaScript기능을 구현한다. 예를 들어 Promise와 같은 새로운 기능을 ES5 방식으로 구현하여 구 버전 브라우저에서도 사용할 수 있게 한다.

# Polyfill 이란?

Polyfill은 이전 브라우저에서 기본적으로 지원하지 않는 최신 기능을 제공하는데 필요한 코드이다.

Babel에서 특정 기능이 지원되지 않는 브라우저를 위해 Polyfill을 제공한다. 이는 프로그램 시작 시 현재 브라우저에서 지원하지 않는 함수를 검사하고 필요한 기능을 추가한다.

Babel과 Polyfill의 차이점

• Babel과 Polyfill의 차이점은 바벨은 최신 ES6+문법을 ES5이하 문법으로 변환해주는것이고, Polyfill은 브라우저가 이해할 수 없는 코드에 대하여 이해할 수 있는 코드 소스를 제공하는것이다.
• Babel은 컴파일시에 실행이되지만, Polyfill은 런타임에 실행이 된다.