Babel 최종 수정일 2026-06-20 20:14 조회수 48
홈 대시보드

Babel

#it#babel#javascript#typescript#프론트엔드#es6#webpack

기본 정보

  • 이름: Babel
  • 분류: JavaScript 트랜스파일러(Transpiler)
  • 개발사: Babel Team
  • 최초 공개: 2014년
  • 주요 용도: 최신 JavaScript 코드를 구형 환경에서도 실행 가능하도록 변환
  • 관련 주제: #Babel #JavaScript #ES6 #TypeScript #Webpack

개요

Babel은 최신 JavaScript(ES6+) 및 일부 TypeScript, JSX 코드를 이전 버전의 JavaScript(ES5 등)로 변환(Transpile)하는 도구이다.

브라우저마다 지원하는 JavaScript 기능이 다르기 때문에, Babel을 사용하면 최신 문법을 작성하면서도 오래된 브라우저에서도 실행될 수 있도록 코드를 변환할 수 있다.

React, Next.js, Vue.js 등 대부분의 프론트엔드 프로젝트에서 빌드 도구와 함께 사용된다.

Babel 구조

ES2024

TypeScript

JSX

↓

Babel

↓

ES5 JavaScript

↓

Browser

동작 과정

개발자가 최신 문법 작성

↓

Babel

↓

구형 문법으로 변환

↓

Webpack / Vite

↓

브라우저 실행

주요 특징

  • 최신 JavaScript 지원
  • ES5 변환
  • JSX 변환
  • TypeScript 지원(문법 변환)
  • 플러그인 시스템
  • Preset 지원
  • 브라우저 호환성 향상

Transpile이란?

Transpile은 한 고급 언어를 같은 수준의 다른 코드로 변환하는 과정이다.

ES6 JavaScript

↓

Babel

↓

ES5 JavaScript

컴파일(Compile)과 달리 같은 언어 계열 내에서 변환이 이루어진다.

예제

ES6 코드

const add = (a, b) => a + b;

Babel 변환 후

var add = function(a, b) {
  return a + b;
};

화살표 함수가 일반 함수로 변환된다.

let / const 변환

변환 전

let name = "구름";

변환 후

var name = "구름";

클래스 변환

변환 전

class User {

  hello(){

    console.log("Hello");

  }

}

Babel은 이를 ES5 함수 기반 코드로 변환한다.

JSX 변환

React 코드

function App(){

  return <h1>Hello</h1>;

}

↓

React.createElement(

"h1",

null,

"Hello"

);

JSX는 브라우저가 직접 이해하지 못하기 때문에 Babel이 변환한다.

설치

npm install --save-dev

@babel/core

@babel/cli

Preset

Preset은 여러 플러그인을 묶은 패키지이다.

대표 Preset

  • @babel/preset-env
  • @babel/preset-react
  • @babel/preset-typescript

preset-env

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

브라우저 지원 범위에 맞게 필요한 문법만 변환한다.

TypeScript 지원

let age: number = 30;

Babel은 타입 정보를 제거하여 JavaScript 코드로 변환한다.

단, 타입 검사(Type Checking)는 수행하지 않는다.

Babel과 TypeScript 관계

TypeScript

↓

Babel

↓

JavaScript

↓

Browser

타입 오류 검사는 tsc가 담당하며, Babel은 코드 변환을 담당한다.

Polyfill

새로운 JavaScript 기능을 오래된 브라우저에서도 사용할 수 있도록 구현한 코드이다.

예시

Array.from()

Promise

Map

Set

Babel은 필요에 따라 Polyfill과 함께 사용된다.

Babel과 Webpack

JavaScript

↓

Babel

↓

Webpack

↓

Bundle

↓

Browser

Webpack은 파일을 묶고(Bundle), Babel은 문법을 변환한다.

Babel과 Vite

Source Code

↓

Vite

↓

esbuild

↓

Browser

Vite는 기본적으로 esbuild를 사용하며, 필요 시 Babel 플러그인을 함께 사용할 수 있다.

Babel과 SWC 비교

BabelSWC
JavaScript 기반Rust 기반
플러그인 생태계 풍부매우 빠른 속도
오래된 표준최신 빌드 환경 채택 증가
설정 다양성능 중심

Next.js는 최근 기본적으로 SWC를 사용한다.

대표 활용 분야

  • React 프로젝트
  • Next.js 프로젝트
  • Vue 프로젝트
  • TypeScript 프로젝트
  • 레거시 브라우저 지원
  • 라이브러리 개발
  • 웹 애플리케이션

장점

  • 최신 문법 사용 가능
  • 브라우저 호환성 향상
  • JSX 지원
  • TypeScript 문법 지원
  • 풍부한 플러그인
  • 다양한 빌드 도구와 연동 가능

단점

  • 빌드 시간이 증가할 수 있음
  • 설정이 복잡할 수 있음
  • 타입 검사는 수행하지 않음
  • 최신 환경에서는 SWC, esbuild보다 느릴 수 있음

실무 메모

실무에서는 다음과 같은 방식이 권장된다.

  • @babel/preset-env 사용
  • browserslist 설정으로 지원 브라우저 명시
  • React 프로젝트는 @babel/preset-react 적용
  • TypeScript는 tsc와 함께 사용하거나 SWC 활용 검토
  • Polyfill은 필요한 기능만 포함
  • Babel 설정은 .babelrc 또는 babel.config.json으로 관리
  • Webpack, Vite 등 빌드 도구와 함께 구성
  • 불필요한 플러그인 사용 최소화
  • 최신 프로젝트에서는 SWC 성능도 비교 검토
  • 빌드 결과를 브라우저에서 테스트

Babel과 함께 사용하는 기술

대표 개발 도구

  • Babel CLI
  • Webpack
  • Vite
  • Parcel
  • Rollup
  • Visual Studio Code

관련 문서

출처

  • Babel 공식 홈페이지
  • Babel 공식 문서
  • ECMAScript 관련 기술 문서

백링크

JSX