트랜스파일러(Transpiler)와 바벨(Babel)

 

 

자바스크립트를 공부하다 보면 쉽게 들을 수 있는 폴리필과 바벨에 대해서 다시 공부해보며 기록해봅니다.

 

자바스크립트는 현재까지 계속 업데이트되고 있고 인기있는 언어인데요. 그리고 브라우저마다 자바스크립트를 실행하는 엔진이 다르기 때문에 하나의 코드가 서로 다른 브라우저에서 작동이 안 될 수 있습니다.

 

간단하게 브라우저별 JS 엔진 종류 눈에 익히고 넘어가봅니다.

 

• Chrome : V8
• Safari : JavaScriptCore
• Firefox : 스파이더 몽키(Spidermonkey)
• Edge : 차크라(Chakra)

 

이제 트랜스파일러와 바벨, 폴리필이 무엇인지 알아보자

 

 

트랜스파일러(Transpiler)

---

컴파일러는 들어봤어도 트랜스파일러를 잘 모르는 사람이 많은데요. 컴파일러는 사람이 이해할 수 있는 고수준 언어에서 컴퓨터가 실행할 수 있고, 이해할 수 있는 저수준 언어(기계어)로 변환해주는 것을 말합니다. 그렇다면 트랜스파일러는 무엇일까요?

 

트랜스파일러는 컴파일러 처럼 다른 언어로 변환되는 것이 아닌, 같은 언어로 변환되지만 바뀌는 것은 문법적인 부분입니다. 들어본 트랜스파일러는 Babel과 TypeScript, SASS 등이 있었네요.

 

그렇다면 자바스크립트 언어로 개발부터 실행까지의 순서는 아래와 같지 않을까요?

 

 

개발자 > 고수준 언어 > 트랜스파일 > 컴파일 > 컴퓨터

 

 

 

바벨(Babel)

---

ECMAScript 명세서에 최신 문법을 사용하면 브라우저에서 지원하는 않는 경우가 있습니다. 단적인 예로 제가 경험한 것 중 하나인 replaceAll() 함수가 IE에서 작동하지 않는 것처럼 말입니다. 그래서 이럴 때 사용하는 것이 트랜스파일러 인 바벨(Babel)입니다.(IE라면 폴리필)

 

바벨은 브라우저가 이해할 수 있도록 ES6이상의 코드를 ES5 코드로 변환해주는데요. 이 작업은 개발자 컴퓨터에서 만 이루어집니다. 그래서 바벨이란 프리셋을 설치할 때 '-D'나 '--save-dev' 옵션을 붙여서 설치합니다. 그리고 이후 사용자는 변경된 상태의 코드를 웹사이트 형태로 이용하게 됩니다.

 

바벨은 프로젝트 빌드 시 웹팩(Webpack)과 같은 빌드 시스템과 함께 동작시키는게 보편적인 사용법인데요. 웹팩에서는 babel-loader 모듈로 babel preset 들을 지정해줄 수 있습니다. 프리셋은 목적에 맞게 코드를 모아놓은 하나의 세트로 이해하면 되고 아래는 자주 사용하는 바벨의 preset들 입니다.

 

자주 사용되는 Babel Preset

• preset-env : ES6 -> ES5 변환
• preset-react : react 변환
• preset-typescript : typescript 변환
• preset-flow : flow 변환

 

예시로 @babel/preset-env에 포함된 @babel/plugin-transform-arrow-functions 이라는 preset도 존재한다. 이름 그대로 화살표 함수 문법을 ES5 형태로 변환시켜준다. 이렇게 필요한 기능들의 프리셋만 설치해서 사용할 수 있는 장점이 있습니다.

 

그리고 babel/core가 따로 있는데, 이는 코드의 파싱이나 출력만을 담당하고 문법적인 변환은 위 프리셋들이 담당하게 됩니다. babel/cli는 말해 뭐해요..

 

요약

이렇게 바벨은 일관적인 방식의 코드를 작성하면서 원하는 방식으로 자바스크립트의 문법적인 변환을 도와주어 여러 브라우저에서 원활히 작동할 수 있도록 해주는 트랜스파일러이다.

 

 

폴리필

---

폴리필(Pollyfill)은 IE와 같은 구형 브라우저에서 지원하지 않는 기능을 제공하는 코드 모음을 말합니다. ES6 버전에만 존재하는 Promise와 같이 ES5 에는 존재하지 않으므로 IE와 같은 구형 브라우저에서 관련한 코드를 사용했다면 폴리필을 추가해야 합니다.

 

그렇지 않으면 Babel로 변환을 해도 익스플로러는 알아먹질 못한답니다..

 

자주 사용하는 폴리필 두 가지

• core js : 다양한 폴리필을 제공, 특정 기능의 폴리필만 사용하는 것도 가능
• polyfill.io : 기능이나 사용자 브라우저에 따라 폴리필 스크립트를 제공해주는 서비스

 

 

TMI로 폴리필은 충전 솜이라는 뜻이고 비어있는 부분을 채워준다는 의미로 불리는 것 같다. 👍

 

 

출처

---

폴리필

Babel · The compiler for next generation JavaScript

FE개발자의 성장 스토리 02 : Babel7과 corejs3 설정으로 전역 오염 없는 폴리필 사용하기