주요 내용으로 건너뛰기

(번역)(Fullstack React) What are babel "plugins" and "presets"? (And how to use them)

한 달전쯤에 Fullstack React 커뮤니티에 번역 가능여부를 물어봤는데, 어제 답장이 와서 부랴부랴 작업을 했습니다.

아래에서 소개하는 내용은 약간 시간이 경과되어 잘 맞지 않는 내용도 있습니다.

ex) babel-presets-es2015는 babel-presets-env로 교체되었습니다.

이런 점 감안하고 봐주시면 감사하겠습니다.



바벨 plugin 과 preset 에 대하여(원제: What are babel "plugins" and "presets"? (And how to use them)


원저자: Anthoy Accomazzo


React 를 사용하다보면, 다양한 바벨 설정들과 마주치게 된다.


package.json 의 babel 설정이나



.babelrc 의 형태로 말이다.



이번 포스트에서는 stage-x 가 무엇을 의미하는지 그리고 일반적인 바벨 세팅에 대해 알아보겠습니다.

또 여러 plugin 과 preset 에 대해서도 알아보겠습니다.


먼저 바벨에 대해서 익숙하지 않은 분들을 위해 바벨이 무엇인지 간단하게 설명도록 하겠습니다.


바벨이란?


바벨을 이해하려면 먼저 자바스크립트의 역사를 살펴봐야합니다.


ES5, ES6, ES7, 그리고 자바스크립트의 미래


자바스크립트의 웹을 위한 언어입니다.

구글 크롬, 파이어폭스, 사파리, 마이크로소프트 에지 그리고 인터넷 등 수많은 브라우저 위에서 작동하죠.

그리고 각 브라우저는 서로 다른 자바스크립트 인터프리터(역자주: 소스 코드를 바로 실행하는 컴퓨터 프로그램 또는 환경)를 사용합니다.


인터넷의 주류 언어로서인 자바스크립트는 그 위상 덕에 자체적인 표준에 가지고 그에 따라 관리하게 되었습니다.

우리는 그 표준을 ECMAScript 혹은 줄여서 ES 라고 부릅니다.

그 중 5 번째로 제정된 표준을 우리는 ES5 라고 부릅니다.

ES5 는 쉽게 말해 자바스크립트의 5 번째 "버전"입니다.

2009 년에 표준이 확립되어 이후 몇 년내로 모든 주요 브라우저가 지원하게 되었죠.

자바스크립트의 6 번째 버전은 ES6 입니다.

최신 버전의 주요 브라우저는 2017 년 현재(역자주: 2017 년 글) ES6 지원을 위한 작업을 계속해서 진행하고 있습니다.


한 가지 기억할 것은 ES6 는 포괄적인 업데이트를 포함하고 있으며,

새롭게 추가되는 기능의 숫자만 해도 무려 24 개 가까이 됩니다.

그러므로 ES6 문법이 사용된 자바스크립트와 ES5 문법이 사용된 자바스크립트 코드 간에는 확연한 차이가 있습니다.

ES7 은 ES6 에 대한 약간의 수정본을 포함하며, 2016 년 6 월에 제정되었습니다.


많은 개발자가 ES6/ES7 의 새로운 문법을 지금 당장 쓰고 싶어합니다.

동시에 코드가 오래된 브라우저 환경에서도 문제없이 작동하기를 바랍니다.

이제 바벨의 차례입니다.

바벨은 자바스크립트 트랜스파일러(역자주: 서로 다른 언어 간의 변환을 담당. 이 경우에는 ES6+의 자바스크립트를 ES5 의 자바스크립트로 변환함을 의미)입니다.

바벨을 사용하면 모던 자바스크립트 구문을 널리 지원되는 ES5 문법의 자바스크립트로 변환할 수 있습니다.


바벨 사용하기


바벨을 사용하는 방법은 한 가지가 아닙니다.

그리고 그 중에서 가장 간단한 방법은 babel-standalone 패키지를 사용하는 방법입니다.

사용법은 무척 간단합니다.

아래와 같은 script 태그만 삽입해주면 됩니다.



이제 바벨은 type 이 text/babel 이거나 text/jsx 인 스크립트를 자동으로 변환해줍니다.



만약 React 를 사용하고 있다면, create-react-app 을 사용할 수 있습니다.

create-react-app 은 기본적인 바벨 세팅이 되어있어 별도의 설정 없이도 손쉽게 사용할 수 있는 장점이 있습니다.


바벨 plugin 과 preset


바벨에서 preset 은 특정 기능을 지원하는 여러 plugin 의 모음입니다.


바벨의 기본적인 preset 은 다음의 두 가지 입니다.

es2015 / react

(역자주: 현재는 env 와 react 그리고 flow 로 바뀌었습니다.)


주의: ES2015 는 ES6 의 다른 이름일 뿐입니다. 이 프로젝트에서는 ES7 의 새로운 두 가지 기능이 필요하지 않으므로 기본적인 세팅으로 진행하도록 하겠습니다.


ES7 이외에도, 자바스크립트의 여러 기능에 대한 제안(proposal)은 다양한 stage 의 형태로 존재합니다.

어떤 기능은 커뮤니티가 세부적인 사항을 만들어가는, 실험적인 단계일 수도 있습니다. (stage1)

이런 실험적인 제안은 언제든 수정되거나 폐기될 위험이 있습니다.

반대로 어떤 기능은 이미 그 구성이 확정되어 다음 버전의 자바스크립트에 포함될 예정인 경우가 있습니다.(stage4)


바벨의 공식문서에 의하면

TC39는 다음과 같이 단계를 구분합니다.

stage-0 - Strawman: 구체적이지 않은 구상안, 바벨 plugin 이 될 수 있음.

stage-1 - Proposal: 받아들일 가치가 있는 제안

stage-2 - Draft: 초기 표준

stage-3 - Candidate: 표준의 정의를 마쳤으며 초기 형태의 브라우저 구현이 존재

stage-4 - Finished: 다음 표준에 포함될 예정

이런 preset 이나 plugin 을 추가함으로써 미래에 추가될 기능이나 실험적인 기능을 사용할 수 있습니다.


React 와 사용하기 안전한 plugin 이나 preset 에는 어떤 게 있습니까?


바벨은 stage-3 이전 단계의 preset 을 사용할 때는 세심한 주의가 필요하다고 합니다.

저희 책(역자주: fullstack React 책)에서는 보통 실험적인 기능의 사용을 피합니다.

그 이유는 수정되거나 폐기될 기능을 독자에게 알리고 싶지 않기 때문입니다.


물론 당신이나 당신이 속한 팀이 몇몇 실험적인 기능을 선호하게 될 수도 있습니다.

실제로 몇몇 실험적인 기능은 React community 사이에서 인기가 높습니다.

"property initializers"와 같은 기능(역자주: class 의 state 를 선언할 때 constructor 에 대한 선언없이 바로 state = {}의 형태로 선언하는 것)은 ES6 class component 구문을 더 깔끔하게 만들기 때문에 널리 사용되고 있습니다.

만약 몇 가지 불안정한 최신 기술(bleeding-edge)을 프로젝트에서 사용하고 싶다면 react-codemon 같은 패키지를 사용할 수도 있습니다.

react-codemon 은 property initializers 와 같은 제안이 폐기되거나 수정되면, 코드베이스의 component 가 새로운 스펙에 부합되게끔 자동으로 코드를 전환시켜줍니다.

따라서 몇몇 실험적인 기능을 사용하더라도 코드베이스가 outdated 되는 위험을 피할 수 있습니다.

더 중요한 사실은 팀원 모두가 같은 모습과 기능의 자바스크립트를 사용하므로 이로 인해 새로운 개발자가 빠르게 이해하고 따라갈 수 있다는 점입니다.


바벨 plugin 과 preset 을 사용하는 방법


바벨설정은 크게 두 가지 방식이 있습니다.

첫 번째 방식은 package.json 을 이용하는 방식입니다. 

package.json 안에 아래와 같이 plugin 과 preset 을 명시할 수 있습니다.



두 번째 방식은 .babelrc 를 사용하는 방법입니다.



우리는 .babelrc 를 사용할 것을 추천합니다.


주의: es2015 와 react 는 기본적인 바벨 설정에 포함됩니다.

만약 바벨 plugin 을 사용하는 live example 을 보고 싶다면 property initializers 에 대한 이 글을 확인해주세요.

만약 custom Babel plugin 을 사용하는 모습을 보고 싶다면 책(역자주: fullstack React)의 Relay 챕터를 확인해주시기 바랍니다.


더 자세한 정보는 바벨 공식 문서에서 확인하실 수 있습니다.


다음에는 새로운 웹팩, webpack4 버전을 이용해서 node.js 프로젝트를 한 번 구성해보도록 하겠습니다.

감사합니다.

이준형 님의 창작활동을 응원하고 싶으세요?

댓글