[Babel] 모르고 사용하던 Babel. 이젠 두려워 마세요. - Babel 알아보기

 

 

Table of Contents

1. 바벨(Babel)?
2. 바벨을 사용하는 이유
3. 바벨 직접 사용하기
4. babel-ployfill
5. 마무리
6. Front-end 개발자라면 꼭 보았을 Babel 관련 설정 파일들이 있으실거에요. 이번 아티클에서는 Babel이 무엇이고 왜 사용되며 어떻게 사용하는지 알아보겠습니다.

 

 

 

 

 

바벨(Babel)?

  Babel(이하 바벨)의 주 역할은 ES6+ 버전 이상의 JavaScript, JSX, TypeScript 코드를 하위 버전의 JavaScript 문법으로 변환시켜주는 역할을 합니다. 이를 통해서 다른 플랫폼 브라우저에서도 원활한 동작을 할 수 있도록 하는 것이죠. Babel은 공식 페이지에서 '컴파일러(Compiler)다!'라고 하지만 실제로는 언어를 해석하는 것이 아닌 사전 변화해주는 것과 같기 때문에 실제로는 트랜스 파일러(Transpiler)에 가깝다고 할 수 있겠습니다.

What is Babel? · Babel

Babel · The compiler for next generation JavaScript

 

 

 

바벨을 사용하는 이유

  바벨을 사용하는 이유를 이해하기 위해서는 먼저 크로스 브라우징(cross-browsing에 대한 이해가 필요합니다. 크로스 브라우징은 각 브라우저 마다 지닌 JavaScript 엔진의 차이로 발생하는 것인데 최신의 모던 브라우저에서는 최신 JavaScript 문법이 동작하지만 이를 지원하지 않는 브라우저에서는 앱이 제대로 동작하지 않는 문제를 말합니다. 이를 해결하기 위해서 옛날에는 단순히 옛날 문법을 통해 앱을 지원하는 방식이였지만 이제 우리는 바벨을 통해서 이 문제를 쉽게 풀어갈 수 있게 되었습니다.

 

 

 

바벨 직접 사용하기

1. 프로젝트 생성

$ mkdir babel-pratice
$ cd babel-practice
$ yarn init -y

 

2. 코드 작성(프로젝트 내에 test.js 생성)

// test.js
[1, 2, 3].map(n => n + 1);

위 test.js에 작성된 JavaScript 문법은 ES6 이상에서 지원됩니다.

 

3. Transpilling

• 준비 : 바벨 설치하기

$ yarn add -D @babel/core @babel/cli

-D는 dev-dependency로 추가해 줌으로서 프로덕트 환경에서는 사용하지 않겠다라는 것을 의미합니다. 왜냐하면 바벨은 빌드할 때만 사용할 것이기 때문에~

• 바벨을 통한 코드(파일/디렉토리) 실행하기

# npx babel <파일명 or 디렉토리명>
$ npx babel test.js

 

 

결과

[1, 2, 3].map(n => { n + 1 });

 

  실행 결과를 살펴보면 크게 달라진 것이 없는 것 같네요? transpilling이 실행되었지만 아직 Plugin/Preset 설정을 해주지 않았기 때문입니다!

 

1. Plugin : 규칙 하나하나를 세밀하게 적용할 때 사용
2. Preset : 이 규칙을 모아 놓은 세트로서, 세트들을 적용할 때 사용
3. 예시로 @babel/preset-env를 사용해 볼까요?

 

$ yarn add -D @babel/preset-env
$ npx babel test.js --preset=@babel/env

 

 

결과

"use strict";

[1, 2, 3].map(function(n) {
    n + 1;
});

 

위와 같은 방식으로 매번 실행하는 것은 비효율적 입니다. 그래서 보통 .babelrc, babel.config.js, babel.config.json을 이용합니다.

 

• .babelrc : 하위 디렉토리나 파일에서 특정 플러그인이나 변환(규칙)을 실행할 때 사용
• babel.config.js : 여러 패키지 디렉토리를 가진 프로젝트에 설정할 때 사용
• babel.config.json : babel.config.js 사용에 의한 API 노출로 인해 이에 대한 노출 방지와 복잡도를 줄이기 위해 정적 구성 형태로 설정하는 방법
• 우리는 .babelrc를 통해 설정해볼게요. babel.config.js와 babel.config.json 역시 각 포멧에 맞게 설정하시면 됩니다.

Config Files · Babel

Babel · The compiler for next generation JavaScript

// .babelrc
{
    "preset": ["@babel/env"]
}

 

  이러한 설정 세팅은 한번 하고난 뒤 바벨 옵션을 빌드 시 마다 주지 않아도 규칙과 함께 실행 시킬 수 있습니다.

$ npx babel test.js

 

 

 

결과

"use strict";

[1, 2, 3].map(function(n) {
    n + 1;
};

 

 

 

babel-polyfill

  바벨을 사용한다고 해서 JavaScript의 최신 함수를 모두 사용할 수 있는 것은 아닙니다. 바벨만 믿고 최신 함수를 사용했다가 브라우저에서 동작하지 않는 것을 보고 당황한 적이 있으셨나요? 바벨은 문법을 변환해주는 역할만 할 뿐입니다. polyfill은 프로그램이 처음에 시작될 때 현재 브라우저에서 지원하지 않는 함수를 검사해서 각 object의 prototype에 붙여주는 역할을 합니다. 즉, 바벨은 compile-time에 실행되고 babel-polyfill은 run-time에 실행됨을 알 수 있습니다.

@babel/polyfill · Babel

Babel · The compiler for next generation JavaScript

 

 

 

 

마치며

  지금까지 바벨이 무엇이고 왜 사용되며, 어떻게 사용할 수 있었는지 알아 보았습니다. 이제 프로젝트에 존재하는 바벨 설정 파일을 보고 두려워하지 않아도 될 것 같네요~!

[서울숲 Farmer's Cafe에서]