What is Babel?

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. Here are the main things Babel can do for you.
바벨은 브라우저에서 ES6 이상의 기능들을 사용하기 위해서 이전 버전의 자바스크립트 코드로 변환해주는 도구이다. (트랜스파일러)
바벨은 총 세 단계를 거쳐서 코드를 변환한다.
1. 파싱(Parsing)
2. 변환(Transforming)
3. 출력 (Printing)
- 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계를 "파싱"이라고 한다. 이것은 빌드 작업을 처리하기에 적합한 자료구조인데 컴파일러 이론에 사용되는 개념이다. 추상 구문 트리를 변경하는 것이 "변환" 단계이다. 실제로 코드를 변경하는 작업을 한다. 변경된 결과물을 "출력" 하는 것을 마지막으로 바벨은 작업을 완료한다.
<aside> 💡 AST

컴퓨터 과학에서 추상 구문 트리(abstract syntax tree, AST), 또는 간단히 구문 트리(syntax tree)는 프로그래밍 언어로 작성된 소스 코드의 추상 구문 구조의 트리이다. 이 트리의 각 노드는 소스 코드에서 발생되는 구조를 나타낸다. 구문이 추상적이라는 의미는 실제 구문에서 나타나는 모든 세세한 정보를 나타내지는 않는다는 것을 의미한다. 예를 들어, 그룹핑을 위한 괄호는 암시적으로 트리 구조를 가지며, 분리된 노드로 표현되지는 않는다. 마찬가지로, if-condition-then 표현식과 같은 구문 구조는 3개의 가지에 1개의 노드가 달린 구조로 표기된다.
- 예시
```
function square(n) {
  return n * n
}
```
- AST </aside>
바벨은 파싱과 출력만 담당하고 변환 작업은 다른 녀석이 처리하데 이것을 "플러그인" 이라고 부른다. 바벨에는 다양한 플러그인이 있다. 하지만 각각 필요한 플러그인을 찾아서 일일이 적용하는 것은 번거롭다. 따라서 등장한 것이 프리셋이다.

    "@babel/plugin-transform-block-scoping", // 블록스코프를 함수 스코프로 변경
    "@babel/plugin-transform-arrow-functions", //화살표함수 변환
    "@babel/plugin-transform-strict-mode", //stric mode 적용

패키지/플러그인	패키지 이름	설명
Babel	@babel/cli	터미널로 바벨을 사용할 수 있게 한다.
Babel	@bable/core	바벨의 핵심적인 기능 (파싱과 출력을 담당)
Babel 프리셋	@babel/preset-env	프리셋은 다양한 플러그인을 모아둔 것이다. (변환을 담당)

Babel이 제공하는 공식 Babel 프리셋은 다음과 같다.
- @babel/preset-env
- @babel/preset-flow
- @babel/preset-react
- @babel/preset-typescript
preset-env는 ECMAScript2015+를 변환할 때 사용한다. 바벨 7 이전 버전에는 연도별로 각 프리셋을 제공했지만(babel-reset-es2015, babel-reset-es2016, babel-reset-es2017, babel-reset-latest) 지금은 env 하나로 합쳐졌다.
preset-flow, preset-react, preset-typescript는 flow, 리액트, 타입스크립트를 변환하기 위한 프리셋이다.

Polyfill

polyfill은 충전 솜을 의미한다. 부족한 솜을 채운다는 의미를 가지고 있다.

A polyfill is a piece of code(usually JavaScript on the Web) used to provides modern functionality on older browsers that do not natively support it.
즉 구현 브라우저에서 지원하지 않는 최신 기능을 가져와 사용하는 코드 뭉치이다.
ES6이상 에서 새롭게 추가된 Promise, Map, Set 같은 전역 객체들이나 String.padStart등 ES5에서 변환할 수 있는 대상이 없는 경우 에러가 발생한다. 전역 객체에 추가된 메서드 등 컴파일-타임의 코드 변환으로는 해결하기 어렵기 때문에 폴리필(polyfill) 이 필요하다. 즉, 구 브라우저에서 최신 자바스크립트 코드를 사용하기 위해 Babel을 이용했지만, 일부 기능들은 polyfill로 추가해줘야 한다.
바벨에서 Preset, Plugin을 통해 코드 변환을 할 때, Promise 와 같은 최신 기능을 변환해주지 않을 수 있다. 따라서 Polyfill은 빌트 인 환경에서 최신 메서드가 포함되어 있지 않는다면, 이를 추가해서 바벨이 변환을 할 수 있게 만들어준다.
그래서 @babel/polyfill을 사용했지만, 7.4 이후부터 사용하지 않는다. 이후부터는 core-js를 사용한다. 즉 어느 환경에서 든 사용 가능할 수 있도록 만든다.
이를 위해서 babel.config.json에 useBuiltIns option이 생겼다
하지만 **core-js**만을 단독으로 사용하면 전역 스코프 오염이 발생할 수 있다. 따라서 @babel/plugin-transform-runtime을 함께 사용해준다. 하지만 axios 같은 경우 Promise에 의존한다. 즉 해당 패키지들을 포함해서 트렌스파일링을 진행해야 한다.