먼저 크로스 브라우징(Cross Browsing)에 대해서 설명해야 할 것 같다. 크로스 브라우징은 브라우저나 플랫폼마다 보여지는 모습이 다른 경우가 많은데, 이러한 차이를 최소화 하여 브라우저, 환경에 영향을 최소한으로 받고 해당 웹 서비스를 사용할 수 있게 최적화를 하는 작업을 말한다. 일부 최신 브라우저에서만 동작하는 기능을 그렇지 않은 브라우저에서 구현해야 할 경우, 기능을 단순화 하거나 생략해야 하는 경우가 발생하기도 한다. 프론트엔드 개발자들에게 크로스 브라우징 이슈는 코드의 일관성도 망가트리고 혼란스럽게 만드는 요소 중 하나이다.
이러한 크로스 브라우징 이슈를 해결하기 위해 생겨난 툴이 바벨이다. ES6+ 버전의 자바스크립트나 타입스크립트, JSX 등 다른 언어로 분류되는 언어들에 대해서도 모든 브라우저에서 동작할 수 있도록 호환성을 지켜준다. 바벨은 이렇게 추상화 수준을 유지한 채로 코드를 변화시키는 트랜스파일러의 역할을 한다.
바벨을 통해 ES6+의 자바스크립트 코드는 하위 버전으로 변환되고, 그로 인해 IE나 다른 브라우저에서 동작할 수 있게 만든다.
바벨 공식 웹사이트에서는 바벨을 다음과 같이 정의한다.
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. 바벨은 주로 ECMAScript 2015+ 코드를 현재 및 과거의 브라우저와 같은 환경에서 호환되는 버전으로 변환하는데 주로 사용되는 도구입니다.
바벨은 세 단계로 빌드를 진행한다.
- 파싱(Parsing) : 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계
- 변환(Transforming) : 추상 구문 트리를 변경
- 출력(Printing) : 변경된 결과물을 출력
여기서 바벨은 파싱과 출력을 담당하고 변환은 다른 녀석이 진행을 하는데, 그 녀석이 바로 플러그인이다. 바벨 플러그인(plugin)은 바벨이 어떤 코드를 어떻게 변환할 지에 대한 규칙을 나타낸다.
플러그인은 직접 만들어서 커스텀 플러그인을 사용해도 되고, 이미 잘 만들어진 플러그인을 가져다가 써도 된다.
polyfill 이란?
- 우리는 웹개발을 하면서 polyfill 이란 용어를 들어봤을거다 무슨뜻일까?
- polyfill : 충전솜이라는 의미를 가지고 있다.
- 솜이 꺼졌을때 충전솜을 채워 메꾸는 역할을 한다. -> 무엇을 메꾸는가?
- 폴리필이란 브라우저가 지원하지 않는 자바스크립트 코드를 지원 가능하도록 변환한 코드를 뜻한다. 하위 브라우저가 지원하는 자바스크립트 코드를 사용해 자바스크립트의 최신 기능을 똑같이 구현하는 방식이다.
babel 만 있으면 장땡 아닙니까?
- 바벨은 ESNext 에서 지원하는 문법을 ES5 문법으로 번역해주지만, ES5에 존재하지 않는 ES6의 Map, Promise, Set, Object.assigin() 이런애들은 존재하지 않으니 번역을 해줄수가 없다.
- 그래서 저걸 매꾸기 위해 polyfill 을 사용한다. (Map, Promise, Set 등을 사용가능한 객체로 만들어준다)
- babel 은 babel-polyfill 모듈을 사용하면 되지만, 현재 deprecated 되었기 때문에 core-js와 regenerator-runtime을 직접 사용하는 방식을 제안하고 있다.
