이 책을 쓰는 시점에서 가장 널리 쓰이는 트랜스컴파일러는 바벨과 트레이서입니다.
필자는 두 트랜스컴파일러를 모두 사용해 봤는데, 둘 다 기능이 충실하고 사용하기 쉬웠습니다.
이 책에서는 트랜스컴파일러로 바벨을 사용합니다.
이제 시작합시다.

바벨은 ES5를 ES6로 바꾸는 트랜스컴파일러로 시작했고, 프로젝트가 성장하면서 ES6와 리액트(React), ES7 등 여러 가지를 지원하는 범용 트랜스컴파일러가 됐습니다.
바벨 버전 6부터는 ES5를 ES6로 변환하려면 ES6 변환 프리셋을 설치하고 바벨이 해당 프리셋을 사용하게끔 설정해야 합니다.
어떤 프로젝트에서는 ES6를, 어떤 프로젝트에서는 리액트를 쓰게 될 수도 있으므로 이번 설정은 이 프로젝트에만 적용되게 만들 겁니다.
먼저 ES6 프리셋, 코어, 레지스터를 설치합니다.

npm i -D @babel/register @babel/core @babel/preset-env

프로젝트 루트에 .babelrc 파일을 만듭니다.(파일 이름 없이 확장자만 쓰면 숨긴 파일이 됩니다.)

touch .babelrc

이 파일의 내용은 다음과 같습니다.

{
    "presets": [ "@babel/preset-env" ]
}

이 파일이 있으면 프로젝트에서 바벨을 사용할 때 ES6를 사용한다는 것을 인식하게 됩니다.
(babel-preset-env는 babel-preset-latest (또는 babel-preset-es2015, babel-preset-es2016 및 babel-preset-es2017과 동일)와 정확히 동일하게 작동합니다.)