Babel 이해하기

4 min readFeb 1, 2017

react로 개발을 하고 있다면 거의 대부분 babel도 함께 사용하고 있을 것이다. create-react-app에도 기본으로 들어있고 기타 react 관련된 튜토리얼을 따라 하다 보면 자연스럽게 babel을 설치하게 된다. 굳이 react가 아니더라도 자바스크립트를 많이 사용한다면 babel을 함께 사용할 것을 추천한다.

babel은 자바스크립트 컴파일러다. 입력은 자바스크립트 코드고 출력도 자바스크립트 코드다. 최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. ES6, ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다.

ES6 문법

특히 ES6에는 상당히 유용한 문법이 많다. 간단히 몇 가지만 살펴보자

arrow function

arrow function을 사용하면 함수 선언이 간단해진다. arrow function의 this는 자신을 포함하는 가장 근접한 일반 함수의 this를 참조한다. 따라서 arrow function의 this는 arrow function이 호출되는 시점과는 무관하게 선언되는 시점에 결정된다. 개인적으로 이 점이 상당히 편리해서 잘 쓰고 있다.

dataList.forEach(item => console.log(item.value))

classes

생성자, 상속 등의 클래스 기능을 사용할 수 있다.

enhanced object literals

object 생성이 편리해졌다.

// 예전 방식
const obj = {
  foo: foo,
  bar: 42
}
// es6
const obj = {
  foo,
  bar: 42
}

template strings

여러 개의 문자열을 +로 붙이는 작업은 상당히 성가시다. 아래의 방식으로 자연스럽게 표현이 가능해졌다.

const msg = `Hello ${name}, current time is ${time}`

destructuring

object에서 필요한 부분만 뽑아낼 때 편리하다. 특히 함수에서 매개변수의 일부만 입력으로 받고 싶을때 유용하다.

const {foo} = obj;
function savePerson({name, age, onSuccess, onFail}) {...}savePerson({name: "berry", onSuccess: () => alert("person saved")})

let & const

수정 가능한 변수는 let, 수정 불가능한 변수는 const를 사용한다. let은 var와 유사하지만 block-scope라는 차이점이 있다. var는 block-scope가 아니라서 실수하기가 쉽다. 또한 let과 const를 사용하면 코드가 좀 더 읽기 쉬워진다.

babel-polyfill

babel을 사용한다고 자바스크립트 최신 함수를 사용할 수 있는 건 아니다. 초기에 babel만 믿고 최신 함수를 사용했다가 브라우저에서 동작하지 않는 것을 보고 당황했었다. babel은 문법을 변환해주는 역할만 할 뿐이다. polyfill은 프로그램이 처음에 시작될 때 현재 브라우저에서 지원하지 않는 함수를 검사해서 각 object의 prototype에 붙여주는 역할을 한다. 즉, babel은 컴파일-타임에 실행되고 babel-polyfill은 런-타임에 실행된다.

babel-polyfill을 사용하고 싶다면 별도로 설정해줘야 한다.

.babelrc

.babelrc 파일을 프로젝트 root 폴더에 생성하자. plugins와 presets 속성이 중요하다. 위에서 설명했던 각 문법이 하나의 plugin이라고 생각하면 된다. 그리고 preset은 plugin 여러 개가 묶여있는 개념이다. 대표적으로 ES6 문법을 모아놓은 es2015 preset과 react 문법을 모아놓은 react preset이 있다. 사용할 preset을 presets에 추가하고 presets에 속해있는 plugin 외에 추가로 사용하고 싶은 plugin은 plugins에 넣자.

babel-cli

보통은 webpack을 사용해서 빌드하겠지만 직접 cli로 빌드할 수도 있다. 자세한 사용법은 여기를 참고하자.

여기에서 babel의 출력을 테스트해볼 수 있다. 아래의 코드를 입력해보자.

const test1 = (a, b) => a + b