Babel - Babel 이란?

크로스 브라우징

고대 히브리 신화를 보면 하늘에 닿기 위해서 바벨탑을 쌓는 이야기가 있는데, 하늘높이 탑을 쌓고 있는 사람들을 본 신이 사람들이 사용하는 말을 다 바꿔버려서 사람들이 더이상 소통할 수 없게 되었고, 결국 바벨탑을 쌓는데 실패하고 말았다는 이야기가 있습니다.

 

그 이야기와 비슷하게, 브라우저 마다 사용하는 언어가 달라서 Frontend 코드는 일관적이지 못할 때가 많습니다. 스펙과 브라우저가 개선되고 있지만, 여전히 인터넷 익스플로러는 'Promise'를 이해하지 못합니다. 작년까지만 해도 사파리 최신 브라우저는 'Promise.protorype.finally' 메소드를 사용할 수 없었습니다. Frontend 개발에서 크로스 브라우징 이슈는 코드의 일관성을 해치고 초심자를 불안하게 만듭니다. 히브리어로 바벨이 '혼돈'이란 뜻인 것처럼 말이죠.

 

크로스 브라우징의 혼란을 해결해 줄 수 있는 것이 바로 바벨입니다. 'ECMAScript2015+(ES6)'로 작성한 코드를 모든 브라우저에서 동작하도록 호환성을 지켜줍니다. 'Typescript', 'JSX'처럼 다른 언어로 분류되는 것도 포함합니다.

 

트랜스파일과 빌드

이렇게 변환하는 것을 '트랜스파일' 한다라고 표현합니다. 변환 전후의 추상화 수준이 다른 빌드와는 달리 트랜스파일은 추상화 수준을 유지한 상태로 코드를 변환합니다.

 

'Typescript → Javascript', 'JSX → Javascript' 처럼 트랜스파일 후에도 여전히 코드를 읽을 수 있습니다.

 

요즘에는 이 둘을 구분하지 않고 사용하는 것 같습니다.

 

 

기본 동작

Babel은 'ECMAScript2015+(ES6)'이상의 코드를 적당한 하위 버전으로 바꾸는 것이 주된 역할입니다.

 

이렇게 바뀐 코드는 인터넷 익스플로러나 구버전 브라우저처럼 최신 Javascript 코드를 이해하지 못하는 환경에서도 잘 동작합니다.

 

Babel을 이용해서 아래 코드를 인터넷 익스플로러가 이해할 수 있는 코드로 바꿔 보겠습니다.

// src/app.js
// ES6 문법인 const와 에로우함수를 사용해서 코드를 작성했습니다.
// ES6로 작성된 코드는 인터넷 익스플로러가 이해하지 못합니다.
const alert = msg => window.alert(msg);

 

 

먼저 Babel 최신 버전을 install 합니다.(터미널 도구를 사용하기 위해 커맨드라인 도구도 함께 설치합니다.)

# 저는 -D 옵션을 사용해서 개발환경으로 설치했습니다.
npm install -D @babel/core @babel/cli

 

 

설치를 완료한 후에 'node_modules/.bin' 폴더에 추가된 Babel 명령어를 사용할 수 있습니다.

# npx를 사용한 방법
npx babel app.js

# 경로를 지정해서 직접 실행시키는 방법
node_modules/.bin/babel

 

 

이렇게 Babel을 실행시키면 잘 동작하는 것을 확인할 수 있습니다.

 

Babel은 3단계로 빌드를 진행합니다.

1. Parsing(파싱): 코드를 토큰(const, alert, = 등)별로 하나하나 분해하는 단계
2. Transforming(변환): ES6를 ES5로 변환하는 단계
3. Printing(출력): 변환된 결과를 출력하는 단계

 

코드를 읽고 추상 구문 트리(AST)로 변환하는 단계를 'Parsing'이라고 합니다. 이것은 빌드 작업을 처리하기에 적합한 자료구조인데 컴파일러 이론에 사용되는 개념입니다.

 

추상 구문 트리를 변경하는 것이 'Transforming' 단계입니다. 실제로 코드를 변경하는 작업을 합니다.

 

변경된 결과물을 'Printing'하는 것을 마지막으로 Babel은 작업을 완료합니다.

 

⁉️그런데 위에서 Babel을 실행한 결과를 보면 빌드 이전과 변한게 없다는 것을 혹시 느끼셨나요?

 

위의 결과를 보면 'Parsing'단계는 진행했고, 'Transforming'은 진행하지 않고 바로 'Printing'을 했다는 것을 알 수 있습니다. 왜 'Transforming'이 진행되지 않았는가 하면 그것은 'Transforming'을 담당하는 'Plugin'이라는 녀석이 따로 존재하기 때문입니다.

 

'Plugin'에 대해서는 Plugin(플러그인)편에서 알아보도록 하겠습니다.