바벨이란? - 예제로 이해하기

웹 개발에서 최신 자바스크립트 문법과 기능을 사용하는 것은 생산성을 높이고 코드의 가독성을 향상시키는 중요한 요소입니다. 그러나 모든 브라우저가 최신 기능을 지원하지 않기 때문에, 이를 해결하기 위해 바벨(Babel)이라는 도구가 필요합니다. 이번 글에서는 바벨의 개념과 설치 방법, 그리고 실제 사용 예제를 통해 바벨의 활용법을 알아보겠습니다.

바벨이란 무엇인가?

바벨(Babel)은 최신 버전의 자바스크립트 기능을 모든 브라우저에서 실행 가능하도록 코드의 버전을 낮추는 자바스크립트 컴파일러입니다. 즉, 최신 자바스크립트 문법으로 작성된 코드를 구형 브라우저에서도 동작할 수 있도록 변환해 줍니다. 이를 통해 개발자는 최신 문법과 기능을 활용하여 코드를 작성할 수 있으며, 바벨을 통해 변환된 코드는 모든 브라우저에서 정상적으로 동작하게 됩니다.

바벨 설치 및 설정

1. 프로젝트 폴더 생성 및 이동

먼저, 새로운 프로젝트 폴더를 생성하고 해당 폴더로 이동합니다.

$ mkdir my-first-babel
$ cd my-first-babel

2. 바벨 설치

다음으로, 바벨 코어와 CLI를 설치합니다. --save-dev 옵션을 사용하여 개발 환경에서만 사용하는 패키지로 설치합니다.

$ npm install @babel/core @babel/cli --save-dev

3. 자바스크립트 파일 생성

이제 최신 문법을 사용한 자바스크립트 파일을 하나 생성해 봅시다. 예를 들어, test.js 파일에 다음과 같은 코드를 작성합니다.

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

이 코드에서는 화살표 함수라는 최신 자바스크립트 문법을 사용하고 있습니다.

4. 바벨 프리셋 설치

바벨은 최신 문법을 구형 문법으로 변환하기 위해 프리셋(preset)을 사용합니다. 가장 많이 사용되는 @babel/preset-env 프리셋을 설치합니다.

$ npm install @babel/preset-env --save-dev

프리셋은 변환 규칙을 정의한 라이브러리로, @babel/preset-env는 최신 자바스크립트 문법을 다양한 환경에 맞춰 변환해 줍니다.

5. 바벨 설정 파일 작성

프로젝트 루트에 babel.config.json 파일을 생성하고 다음과 같이 설정합니다.

{
  "presets": ["@babel/preset-env"]
}

이 설정 파일을 통해 바벨이 어떤 프리셋을 사용할 것인지 지정합니다.

6. 바벨을 사용한 코드 변환

이제 바벨을 실행하여 test.js 파일의 최신 문법을 구형 문법으로 변환해 봅시다.

$ npx babel test.js --out-file compiled.js

이 명령을 실행하면, compiled.js 파일에 변환된 코드가 출력됩니다. 변환된 코드는 다음과 같습니다.

"use strict";

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

화살표 함수가 일반 함수로 변환된 것을 확인할 수 있습니다.

결론

바벨은 최신 자바스크립트 문법을 사용하면서도 모든 브라우저에서 호환되는 코드를 작성할 수 있게 해주는 강력한 도구입니다. 이번 글에서는 바벨의 기본 개념과 설치, 설정 및 사용 방법에 대해 살펴보았습니다. 바벨을 통해 최신 자바스크립트 기능을 자유롭게 활용하여 더 나은 웹 애플리케이션을 개발해 보시기 바랍니다.