더북(TheBook)

3.3 Babel을 이용한 JSX 트랜스파일러 설정하기

 

앞에서 이야기했듯이 JSX를 실행하려면 일반적인 자바스크립트 코드로 변환해야 한다. 이 과정을 컴파일(compilation)변환(transformation)을 거친다는 의미에서 트랜스파일레이션(transpilation)이라고 하는데, 이를 위해 사용할 수 있는 도구가 여러 가지 있다. 다음은 추천하는 방법이다.

Babel 명령줄 인터페이스 도구: babel-cli 패키지가 제공하는 트랜스파일레이션 명령을 사용한다. 이 방식은 설정이 적고 시작이 간편하다.

Node.js 또는 브라우저 자바스크립트로 작성한 스크립트(API 방식): babel-core 패키지를 이용해서 스크립트를 작성하여 JSX를 변환하는 방식이다(babel.transform). 이 방식을 이용하면 저수준의 제어가 가능하고, 빌드 도구와 빌드 도구의 플러그인 상의 추상화나 의존성을 제거할 수 있다.

빌드 도구: Grunt, Gulp, Webpack 같은 도구에서 Babel을 플러그인으로 사용할 수 있다. 이 방법이 가장 인기가 좋다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.