Babel 설정

개념 설명

최신 JavaScript 문법을 구형 브라우저에서 실행 가능한 코드로 변환하는 Babel 트랜스파일러 설정.

핵심 포인트

Presets: @babel/preset-env (브라우저 타격), @babel/preset-react (JSX 변환)
Plugins: 기능별 세밀한 변환 제어 (plugin-proposal-class-properties)
Targets 설정: browserslist로 지원 브라우저 범위 지정
Polyfill 전략: core-js + regenerator-runtime 사용
성능 최적화: cacheDirectory, envName 환경별 설정

예시 코드

// .babelrc 설정
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "last 2 versions, not dead",
        "useBuiltIns": "usage",
        "corejs": 3,
        "modules": false
      }
    ],
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-optional-chaining"
  ],
  "env": {
    "development": {
      "plugins": ["react-refresh/babel"]
    },
    "production": {
      "plugins": ["babel-plugin-transform-remove-console"]
    }
  }
}

더 많은 내용을 확인하세요! 📚

“Babel 설정”의 전체 내용을 보시려면 프리미엄 플랜이 필요합니다.

✨ 모든 기술 문서 무제한 액세스

📝 실습 예제와 상세한 코드 설명

🎯 면접 예상 질문과 답변 가이드

플랜 비교하기