[Babel] Babel 의 역할, 기본적인 사용법

이번에 프론트엔드 프로젝트를 진행하며 BABEL 을 사용하게 되었다. 이전 프로젝트에서 리액트를 하면서 사용해보긴 했지만 별다른 설정없이 리액트에서 생성해주는 설정그대로 사용하다보니 자세하게 알아보질 못했다. 이번 기회에 바벨에 대해서 재대로 공부해보고 싶은 마음이 들어 포스팅을 하게 되었다.

자바스크립트는 매우 빠르게 발전하고있다. 하지만 그만큼 브라우저가 따라가지를 못한다.

몇해전 큰 변화를 불러왔던 ES6(ECMAScript2015) 도 2015년 6월에 발표되었다고 한다. 하지만 국내에서 많이 사용하는 IE 와 같은 구형 브라우저는 지원하지 않는다.

따라서 최신 자바스크립트 문법을 모든 브라우저에서 사용할 수 있는 형태로 변환할 수 있는 transcomplier 가 필요하게 되었다.

그중에서 가장 많이 사용되는 기술이 BABEL 이다.

BABEL의 기본적인 사용법을 살펴보면서 바벨에 대해 이해해 보도록 하자.

아래내용은 BABEL 공식문서를 참조하였다.

1. 프로젝트 폴더 생성 및 NPM 초기화

mkdir workspace/babel-demo
cd workspace/babel-demo
npm init

2. BABEL PACKAGE 설치

npm install —save-dev @babel/core @babel/cli @babel/preset-env

@babel/core : 바벨의 코어 패키지

@babel/cli :커맨드라인에서 파일을 컴파일하게 해주는 CLI 제공

@babel/preset-env : 구문변환에 대한 별도의 설정없이 최신 자바스크립트를 구형 브라우저에 사용할 수 있게 해주는 스마트 사전

3. babel.config.json 설정

프로젝트 루트폴더에 babel.config.json 을 생성하고 해당 내용을 작성한다.

{
    “preset” : [
        “@babel/env”,
        {
            “targets”: {
                “edge” : “17”,
                “firefox” : “60”,
                “chrome” : “67”,
                “safari” : “11.1”,
            },
            “useBuitIns”: “usage”,
            “corejs” : “3.6.4"
        }
    ]
}

위에 targets 를 살펴보면 edge, firefox, chrome, safari 등 브라우저 리스트가 있다. 여기에는 현재 웹어플리케이션이 지원할 브라우저목록을 작성하면 된다.

3. 샘플소스 작성

src/main.js

let count = 0;


const getCount = () => document.getElementById("count").innerText = count;


const countAdd = () => {
   count ++;
   getCount();
}


const countSubtract= () => {
   count --;
   getCount();
}

위의 main.js 에서는 애로우펑션과 let, const 와 같이 ES6 문법을 사용하여 간단한 카운트를 더하거나 빼서 화면에 보여주는 함수를 작성하였다.

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="../lib/main.js"></script>
</head>
<body>
    <div>
        <label for="count">count</label>
        <b id="count">0</b>
        <br />
        <button type="button" class="btn btn-primary" onclick="countAdd()">add</button>
        <button type="button" class="btn btn-danger" onclick="countSubtract()">substract</button>

    </div>
</body>

</html>

이제 index.html 을 실행해보면 아래와 같이 화면이 나온다.

4. 컴파일

현재 테스트 브라우저는 크롬최신버전이기때문에 딱히 문제는 없다. 그래도 바벨을 사용하여 컴파일 해보도록 하자

terminal 와 같은 커맨드 라인을 이용해서 babel 을 실행시킨다.

./node_modules/.bin/babel src --out-dir lib

./node_modules/.bin/babel : 실행 명령어

src : 컴파일하려는 소스 위치

--out-dir lib : 컴파일 완료된 소스가 위치하는 디렉토리

프로젝트내에 내가 작성하지 않은 lib/main.js 가 생성되었다.

babel 이 컴파일하여 출력한 내용이다.

lib/main.js

"use strict";

let count = 0;

const getCount = () => {
  document.getElementById("count").innerText = count;
};

const countAdd = () => {
  count++;
  getCount();
};

const countSubtract = () => {
  count--;
  getCount();
};

위에 내가 작성한 코드랑 달라진게 없어보인다. "use strict"; 가 한줄 추가됬을 뿐이다.

use strict 는 자바스크립트에 대해서 좀더 엄격하게 검사를 하겠다는 의미이다.

arrow function 은 크롬 45 부터 지원한다.

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98

화살표 함수

화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이 함수 표현은 메��

developer.mozilla.org

위에서 작성한 babel.config.json 을 살펴보면 크롬 지원 브라우저를 67 로 해놓았기에 특별한 변경없이도 브라우저에서는 해당 문법이 동작한다.

이제 지원하고자하는 크롬 버전을 낮춰서 테스트해보자.

babel.config.json

...
“chrome” : “40”,
...

다시 바벨을 사용하여 컴파일하면 아래와 같이 컴파일된 스크립트를 확인할 수 있다.

lib/main.js

var count = 0;


var getCount = function getCount() {
  document.getElementById("count").innerText = count;
};


var countAdd = function countAdd() {
  count++;
  getCount();
};


var countSubtract = function countSubtract() {
  count--;
  getCount();
};

const 와 let 은 var 로 변경되었으며 화살표 함수는 일반적인 자바스크립트 함수표현식으로 변경되었다.

위 문법은 구형 브라우저에서도 동일하게 동작될것이다.

이로써 바벨에 대한 기본적인 역할과 기능에 대해서 알아보았다. 바벨은 주로 웹팩과 함께 사용하기 때문에 앞으로 바벨에 대한 좀더 세부적인 내용과 웹팩과 함께 사용하는방법에 대한 포스팅을 하도록 하겠다.

버물리의 IT공부