Babel

Babel

 

React를 다시 공부하다가, Babel에 대해 먼저 알아야겠다고 생각해 글을 쓰게 되었습니다.

공식 홈페이지에서는 바벨을 자바스크립트 컴파일러라고 정의하고 있습니다.

바벨은 자바스크립트 컴파일러.

컴파일러의 사전적 정의는 다음과 같습니다.

사람들이 사용하는 언어를 컴퓨터가 이해할 수 있는 코드로 변환하는 컴퓨터 프로그램.

"지금 차세대 JavaScript를 사용해 보세요."

해당 문구 아래에는 다음과 같이 JavaScript를 직접 입력해 볼 수 있는 공간이 있습니다.

차세대 자바스크립트를 입력할 경우, 브라우저와 호환되는 자바스크립트로 컴파일되는 것을 보여줍니다.

말 그대로 자바스크립트를 브라우저가 알 수 있도록 컴파일하는 것입니다.

좀 더 구체적으로 문서를 살펴보면 다음과 같이 정의하고 있습니다.

"Babel은 ECMAScript 2015+ 코드를 현재 및 이전 브라우저 또는 환경에서 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 툴체인입니다."

---

바벨이 가능하게 하는 것을 정리하면 다음과 같습니다.

- Transform syntax
- Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)
- Source code transformations (codemods)
- And more! (check out these videos for inspiration)

 

이해를 돕기 위해 제시하고 있는 예시

Babel은 구문 변환기를 통해 최신 버전의 JavaScript를 지원합니다.

"이러한 플러그인을 사용하면 브라우저 지원을 기다리지 않고도 지금 바로 새로운 구문을 사용할 수 있습니다."

이 부분이 핵심인 것 같습니다.

---

Babel은 JSX 구문도 변환할 수 있습니다.

바로 @babel/plugin-transform-react-jsx 이 플러그인을 사용해서 변환합니다.

이 플러그인은 @babel/preset-react에 포함되어 있습니다.

@babel/plugin-transform-react-jsx · Babel

이상으로 바벨이 무엇인지 알아보았습니다. 다음에는 더 자세히 알아보도록 하겠습니다.