Babel 완벽 가이드 | JavaScript 트랜스파일러·Presets·Plugins·실전 활용

2026년 4월 7일 · 13분 읽기 · 수정 2026년 4월 7일 중급

이 글의 핵심

Babel로 JavaScript를 트랜스파일하는 완벽 가이드입니다. Presets, Plugins, Polyfills, Webpack/Vite 통합까지 실전 예제로 정리했습니다.

실무 경험 공유: Babel로 최신 JavaScript를 구형 브라우저에서 실행하면서, 브라우저 호환성 문제가 100% 해결된 경험을 공유합니다.

들어가며: “구형 브라우저를 지원해야 해요”

실무 문제 시나리오

시나리오 1: 최신 JavaScript를 사용하고 싶어요
구형 브라우저는 지원하지 않습니다. Babel로 변환합니다.

시나리오 2: Polyfill이 필요해요
Promise, Array.from 등이 없습니다. Babel이 자동으로 추가합니다.

시나리오 3: JSX를 사용하고 싶어요
브라우저는 JSX를 이해하지 못합니다. Babel로 변환합니다.

1. Babel이란?

핵심 특징

Babel은 JavaScript 트랜스파일러입니다.

주요 장점:

최신 JavaScript: ES2024 → ES5
JSX: React 지원
TypeScript: 타입 제거
Polyfills: 자동 추가
Plugins: 확장 가능

2. 설치 및 기본 설정

설치

npm install -D @babel/core @babel/cli @babel/preset-env

.babelrc

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

실행

npx babel src --out-dir dist

3. Presets

@babel/preset-env

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not dead"]
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

@babel/preset-react

npm install -D @babel/preset-react

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

@babel/preset-typescript

npm install -D @babel/preset-typescript

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

4. Plugins

@babel/plugin-transform-runtime

npm install -D @babel/plugin-transform-runtime
npm install @babel/runtime

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3
      }
    ]
  ]
}

@babel/plugin-proposal-decorators

npm install -D @babel/plugin-proposal-decorators

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "2023-05" }]
  ]
}

5. Polyfills

core-js

npm install core-js

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

수동 Import

import 'core-js/stable';
import 'regenerator-runtime/runtime';

6. Webpack 통합

npm install -D babel-loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

7. Vite 통합

Vite는 기본적으로 esbuild를 사용하지만, Babel을 추가할 수 있습니다.

npm install -D @vitejs/plugin-react

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['@babel/plugin-proposal-decorators'],
      },
    }),
  ],
});

8. 실전 예제: React 라이브러리

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          browsers: ['> 1%', 'last 2 versions', 'not dead'],
        },
        modules: false,
        useBuiltIns: 'usage',
        corejs: 3,
      },
    ],
    [
      '@babel/preset-react',
      {
        runtime: 'automatic',
      },
    ],
    '@babel/preset-typescript',
  ],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        corejs: 3,
      },
    ],
  ],
  env: {
    test: {
      presets: [
        [
          '@babel/preset-env',
          {
            targets: {
              node: 'current',
            },
          },
        ],
      ],
    },
  },
};

9. 브라우저 타겟

.browserslistrc

> 1%
last 2 versions
not dead

package.json

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

정리 및 체크리스트

핵심 요약

Babel: JavaScript 트랜스파일러
Presets: 설정 묶음
Plugins: 변환 규칙
Polyfills: 자동 추가
Webpack/Vite: 통합 가능
브라우저 타겟: 유연한 설정

구현 체크리스트

같이 보면 좋은 글

Webpack 완벽 가이드
TypeScript 완벽 가이드
Vite 완벽 가이드

이 글에서 다루는 키워드

Babel, Transpiler, JavaScript, TypeScript, Polyfill, Build Tools, Frontend

자주 묻는 질문 (FAQ)

Q. TypeScript와 함께 사용해야 하나요?

A. TypeScript는 타입 체크를 하고, Babel은 변환을 합니다. 함께 사용하면 좋습니다.

Q. esbuild와 비교하면 어떤가요?

A. esbuild가 훨씬 빠릅니다. Babel은 더 많은 변환 옵션을 제공합니다.

Q. 번들 크기가 커지나요?

A. Polyfill을 추가하면 커질 수 있습니다. useBuiltIns: ‘usage’로 최소화할 수 있습니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, 거의 모든 프론트엔드 프로젝트에서 사용하고 있습니다.