https://babeljs.io/

Babel은 자바스크립트 컴파일러이다.

최신 자바스크립트 문법(ES6 이상)이나 구버전 브라우저와 호환되도록 변환해주는 역할을 주로 수행하며,

특히 React 개발 환경에서는 JSX 브라우저가 이해할 수 있는 JS 문법으로 변환해주는 컴파일러이다.

즉, React에서 JSX 문법을 사용하려면 Babel을 통해 변환해야만 한다.

바벨의 역할
1. JSX 변환: JSX코드를 JS 코드로 변환
2. ES6+ 변환: 최신 JS 문법을 구형 브라우저에서도 호환되도록 변환
3. Polyfill 제공: 최신 JS API를 지원하지 않는 환경에서 해당 API를 사용할 수 있도록 지원

1. Babel 실습 예

가령 HTML 파일내에 <script> 태그로 아래와 같은 엘리먼트로 컴포넌트를 정의하였다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">

    Btn.propTypes = {
        text: PropTypes.string,
        fontSize: PropTypes.number.isRequired
    }

    function Btn({ text, changeValue, fontSize = 16 }){
        console.log(`${text} was rendered`);
        return (
              <button 
                onClick={changeValue}
                style={{
                    backgroundColor: "tomato",
                    color: "white",
                    padding: "10px 20px",
                    border: 0,
                    borderRadius: 10,
                    fontSize
                }}
            > 
                {text}
            </button>
        );

    }

<script> 태그를 통해 cdn에서 babel 패키지를 현재 html 문서로 로드했으며,

이제 브라우저는 type="text/babel" 속성이 부여된 <script> 코드를 JS로 변환하고 실행하게된다.

2. 실무에서의 Babel

하지만 위 예제에는 아래와 같은 문제점이 있다.

• 브라우저에서 직접 babel을 실행
  • 성능 취약 : 브라우저에서 직접 해설 & 변환해야함(-> 로딩시간 증가)
  • 보안 취약 : 브라우저에 초기 소스코드가 그대로 유출됨
  • 불필요한 네트워크 요청 : babel을 CDN에서 가져올 경우 트래픽이 증가함

그러므로 실무에서는 서버에 babel을 직접 설치합니다.
대신 개발서버/운영서버 여부에 따라 아래와 같은 방식으로 babel을 다룹니다.

1) 개발 서버

• Webpack, Vite, Parcel 같은 빌드 도구가 Babel을 자동 실행
• 개발중에는 코드수정이 즉각적으로 브라우저에 반영되어야 하므로

예시 : package.json

{
  "devDependencies": {
    "@babel/core": "^7.x.x",
    "@babel/preset-react": "^7.x.x",
    "webpack": "^5.x.x",
    "babel-loader": "^9.x.x"
  }
}

예시 : .babelrc

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

2) 운영 서버

• Babel로 변환한 결과물(dist/bundle.js)만 서버에 배포
• 배포된 JS 파일은 브라우저가 바로 실행 가능한 코드(ES5, ES6) 형태
• 브라우저는 변환된 코드만 실행 (-> babel이 필요 없음)

3) 정리

개발서버와 운영서버 모두 babel로 직접 변환하지만...

• 개발서버: 빌드도구와 연동하여 자동 빌드를 수행
• 운영서버: 미리 빌드된 js 파일을 클라이언트로 제공

3. 설치

babel은 단일 패키지로 구성된게 아니라, 여러개의 패키지들이 모듈별로 분리되어있다.
그렇기에 필요한 기능만 선택해서 설치하여 가벼운 빌드 환경을 만들수 있어야한다.

babel의 주요 패키지들은 아래와 같다.

패키지명	용도
@babel/core	Babel의 핵심 기능 (코드 변환 엔진)
@babel/cli	터미널에서 Babel을 실행할 수 있게 해줌
@babel/preset-env	최신 JS 문법을 구버전 브라우저용으로 변환
@babel/preset-react	JSX → JS 코드로 변환
@babel/preset-typescript	TypeScript → JS 코드로 변환
babel-loader	Webpack에서 Babel을 사용하기 위한 연결 도구
@babel/plugin-*	특정 문법 변환 기능 (옵션형 기능들)

프로젝트마다 빌드 환경이 다를 수 있기 때문에 글로벌이 아닌 로컬 설치를 권장하며,

JS 환경에서 자주쓰이는 패키지들은 아래명령어로 일괄설치 가능하다.

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

4. 설정

babel에 대한 설정파일을 만들어야한다. (babel.config.json 또는 .babelrc)

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

5. 컴파일

이제 jsx 파일을 babel로 컴파일해보자. src/components/CustomButton.jsx 파일을 생성한다.

//src/components/Custombutton.jsx

export default function CustomButton({prop_0, prop_1}){
  return (
    <div>{`${prop_0}, ${prop_1}`}</div>
  )
}

그리고 아래 명령어를 수행하여 src 하외에 속하는 jsx 파일을 모두 js로 변환하여 dist에 저장한다.

npx babel src --out-dir dist

그러면 dist/components/Custom.js 파일이 아래와 같이 생성된것을 볼 수 있다.

export default function CustomButton({
  prop_0,
  prop_1
}) {
  return /*#__PURE__*/React.createElement("div", null, `${prop_0}, ${prop_1}`);
}

Markup과 유사한 문법으로 작성되었던 jsx 코드를 브라우저가 읽을 수 있는 형태로 변환된것을 확인할 수 있다.

6. 추가설명

• .jsx->.js 자동 변환
• .js 파일은 코드만 변환 (최신 JS 문법을 구형 브라우저에서도 호환되도록)

이외의 옵션들은 아래와 같다.

옵션	설명
--extensions ".jsx"	.jsx만 변환하게 설정 가능
--copy-files	JSX가 없는 파일도 그냥 복사 (.json, 이미지 등)
--ignore "test.js"	특정 파일/폴더 제외 가능
--source-maps	소스맵 생성