쿠키런 소식 페이지 만들기 - [3] 바벨 적용하기

Babel

자바스크립트는 현재도 계속해서 새로운 문법과 함께 꾸준히 발전하고 있는 언어입니다. 이렇게 빠르게 발전하는 자바스크립트를 지원하기 위해 크롬, 엣지, 파이어폭스 같은 모던 브라우저들도 ECMAScript 명세를 열심히 반영하고 있습니다. 하지만 인터넷 익스플로러(IE)와 같은 구형 브라우저들은 지원이 끊겼기에 더 이상 업데이트되지 않습니다. 그럼에도 아직까지 사용하고 있는 사용자층이 있기에 구형 브라우저에서도 최신 문법이 지원될 수 있도록 해야 합니다. 이를 위해 우리는 바벨(Babel)이라는 트랜스파일러의 도움을 받을 계획입니다.

트랜스파일러(Transpiler)란 어떤 언어로 작성된 코드를 비슷한 수준의 코드로 바꿔주는 도구입니다. 최신 문법의 코드가 어떤 식으로 변경되는지 확인해 보고 싶은 분들은 바벨 공식 홈페이지의 REPL을 이용해 보시기 바랍니다. REPL은 사용자의 입력을 실행하고 결과를 반환하는 상호작용의 환경입니다.

브라우저 버전별 문법 지원 현황은 ECMAScript Compact Table에서 확인 가능합니다 😎

Installation

설치

트랜스파일은 개발 환경에서만 진행하기 때문에 -D 옵션을 지정해 바벨 패키지를 설치합니다.

# 설치할 패키지를 한 줄로 작성해도 됩니다.
$ npm install -D @babel/cli
$ npm install -D @babel/core
$ npm install -D @babel/preset-env

설치한 3개의 패키지는 각각 다음 용도로 사용됩니다.

• cli: 트랜스파일을 위한 바벨 명령어가 담겨 있습니다.
• core: 코드를 분석하고 변환하기 위한 파싱 코드가 담겨 있습니다.
• preset-env: 바벨의 공식 프리셋이며, 프로젝트 환경에 맞게 필요한 플러그인을 결정합니다.

설정

바벨도 웹팩처럼 루트에 위치한 설정 파일을 기반으로 트랜스파일을 진행하며, 이름 역시 비슷하게 babel.config.js입니다. 루트 디렉토리에 설정 파일을 생성하고, 다음과 같이 작성해 주세요.

{
  "presets": [
    ["@babel/preset-env", { "useBuiltIns": "usage", "corejs": 3 }],
    // [프리셋], [프리셋], [프리셋], ...
  ]
}

바벨을 통한 트랜스파일을 하기 위해서는 설정 파일 안에 presets 또는 plugins 프로퍼티가 필수입니다. 본문에서 plugins 옵션에 대해 설명하지는 않지만, 이 프로퍼티는 트랜스파일 시 적용할 플러그인을 의미합니다. 만약 클래스 문법을 변환하고 싶다면 이와 관련된 플러그인을, 만약 옵셔널 체이닝 문법을 변환하고 싶다면 이에 관련된 플러그인을 작성하는 것처럼 말이죠.

presets은 트랜스파일을 위해 여러 플러그인을 작성할 필요를 덜어주는 프로퍼티이며, 설정한 프리셋에 따라 자동으로 필요한 플러그인을 묶어서 반영합니다. 적용하고자 하는 프리셋은 위의 코드처럼 배열 형태로 나열하고, 필요한 세부 옵션을 프리셋 이름 옆에 객체 형태로 작성하면 됩니다. useBuiltIns와 corejs 옵션에 대해서는 바로 이어지는 폴리필에서 설명합니다.

Transpile

폴리필이란?

폴리필(Polyfill)은 프로미스(Promise)처럼 트랜스파일만으로는 해결할 수 없는 명세를 구현한 것입니다. 폴리필 코드를 주입한다면 구형 브라우저에서도 사용 불가능했던 문법들이 구현된 것처럼 사용할 수 있습니다. 바벨은 폴리필 관련 패키지 설치만으로 간단하게 사용할 수 있으며, 설정 파일에서 어떤 폴리필을 주입할지 결정하면 됩니다. 본 시리즈에서는 구형 브라우저에서는 지원하지 않는 프로미스와 fetch API 폴리필을 적용해 진행합니다.

다음의 두 폴리필을 설치해 주세요.

# 설치할 패키지를 한 줄로 작성해도 됩니다.
$ npm install core-js
$ npm install whatwg-fetch

폴리필은 트랜스파일과 달리 런타임 중에 주입하는 것이기에 -D 옵션으로 설치하지 않습니다. core-js는 폴리필 라이브러리이며, 이를 사용하기 위해서는 설정 파일의 presets에 useBuiltIns와 corejs 옵션을 추가해야 합니다. useBuiltIns 옵션의 값을 usage로 설정하면 파일에서 필요한 폴리필을 자동으로 주입하며, 주입하는 폴리필인 core-js의 버전을 corejs 옵션의 값으로 설정합니다.

그리고 whatwg-fetch라는 폴리필을 별도로 설치한 이유는 fetch가 ECMAScript가 아닌 브라우저에서만 사용되는 명세이기 때문입니다. fetch API 폴리필을 사용하기 위해 이전에 작성했던 main.js 상단에 다음 코드를 추가해 주세요.

// main.js

import { fetch } from 'whatwg-fetch';	// <-- 추가
import { createSpinner, hideSpinner } from './loading.js';
import '../css/style.css';

...

트랜스파일

사전 작업이 끝났으니 package.json에 트랜스파일 명령을 추가해서 변환해 봅시다.

...
"scripts": {
  "build": "webpack",
  "transpile": "babel asset/js -d transpile"
},
...

이제 아래 명령을 터미널에 입력하면 transpile 디렉토리 하위에 변환된 코드가 생성될 것입니다.

$ npm run transpile

transpile/main.js

"use strict";

require("core-js/modules/es.array.is-array.js");

require("core-js/modules/es.symbol.js");

require("core-js/modules/es.symbol.description.js");

require("core-js/modules/es.object.to-string.js");

require("core-js/modules/es.symbol.iterator.js");

...

Bundling

웹팩과 함께 사용하기

트랜스파일의 결과를 보면 코드 안에서 require 키워드를 이용해 모듈을 불러오고 있습니다. 하지만 이는 Node.js 환경에서만 사용할 수 있기에, 웹팩과 결합하여 브라우저에서도 사용할 수 있도록 번들링 할 필요가 있습니다. 대부분의 프론트엔드 프로젝트에서도 트랜스파일과 번들링을 나눠 진행하는 것이 아닌, 번들링 과정에서 함께 진행될 수 있도록 구성합니다.

우선 바벨 로더를 설치해 주세요.

$ npm install -D babel-loader

그리고 웹팩 설정에서 로더 부분에 다음 내용을 추가해 주세요.

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [path.resolve(__dirname, 'asset/js')],
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }]],
          },
        },
      },
      ...
    ],
  },
  ...
};

바벨 로더의 options 객체에는 옵션을 지정할 수 있는데, 만약 루트에 바벨 성정 파일이 있다면 이 부분을 생략할 수 있습니다. include와 exclude 프로퍼티도 추가되었는데, 이들은 그냥 번들링 시 로더를 적용할 범위를 결정하는 친구들입니다.

최종 결과

마지막으로 웹팩 빌드를 진행하면서 마무리합시다 😆

$ npm run build

빌드 중 오류가 발생하지 않았다면, 번들링 된 결과물이 정상적으로 dist 디렉토리 안에 생겼을 겁니다. 그리고 만들어진 스크립트 파일을 열어보면 알아보기 힘든 이상한 코드들이 잔뜩 쓰여있는 것도 확인할 수 있습니다.

이렇게 번들링 된 결과는 이제 구형 브라우저에서도 아무 문제없이 사용할 수 있습니다.

여기까지 웹팩과 바벨이라는 프론트엔드 프로젝트를 진행할 때 많이 사용하는 개발 도구를 적용해 봤습니다. 시리즈의 마지막까지 이제 하나 남았는데요. 마지막에는 CSS의 문법을 확장하여 프로그래밍 언어처럼 사용하면서 요소에 스타일을 입힐 수 있는 방법에 대해 알아보려 합니다. 오늘도 부족한 글 읽어주셔서 감사합니다!

바벨이 적용된 쿠키 뉴스 프로젝트는 Git 저장소에서 확인 가능합니다 ❤️

Series

• 쿠키런 소식 페이지 만들기 - [1] 화면 만들기
• 쿠키런 소식 페이지 만들기 - [2] 웹팩 적용하기
• 쿠키런 소식 페이지 만들기 - [3] 바벨 적용하기
• 쿠키런 소식 페이지 만들기 - [4] Scss 적용하기