React로 시작하는 프론트 개발은 필자(seolim)의 경험을 기반으로 작성되며 절대 정답이 아닙니다! 이점을 유념하며 읽기 바랍니다.
Babel
js를 공부해본 사람이라면 commonJs나 ES3, ES5, ES6라는 말을 한번 쯤은 들어봤을 것이다. js는 ES버전에 따라 문법과 기능을 확장해왔다. 그런데 브라우저의 js해석기 그 속도에 맞추어 발전되지 못했고, 현대에 와서 구 브라우저를 사용하는 경우는 드물지 않다.
즉, 최신문법으로 작성하였을 때, 동작하지 않는 경우가 발생하는 것이다. 이로인해 도입된 것이 babel이다.
babel은 js 컴파일러로써 인풋으로 받은 js를 설정한 버전대의 js로 변환하여 반환한다. 이러한 기능은 최신문법으로 작성된 어플리케이션을 구 브라우저에서도 동작할 수 있도록 하는 시발점이 된다.
그럼 React에선 왜 필요하냐. 아직 React에 대한 설명을 한번도 한 적이 없지만 React를 써본 사람은 아래 문법을 사용했을 것이다.
function comp() {
return <jsxComponent />
}
JavaScript
복사
위의 <jsxComponent/>는 jsx라는 문법으로 작성된 것이고 실제 javascript에 존재하는 문법이 아니다. 실제로 위 코드를 js로 변경하면 아래와 같다.
function comp() {
return React.createElement("jsxComponent", null);
}
JavaScript
복사
그렇다. babel은 설정에 따라 js가 아닌 것들도 js로 변경해주는 역할을 포함한다. 백문이 불여일견이라고 위 과정을 실제로 한번 진행해보자.
npm i -D @babel/core @babel/cli @babel/preset-react
Bash
복사
위 3개 package를 설치하자. @babel/core는 babel 코어이고 @babel/cli는 command환경에서 babel을 사용하게 하는 패키지이다. @babel/preset-react는 react와 관련된 문법을 변환하기 위한 설정파일이다.
변경되기 전 코드를 input.js로 저장하고 아래 명령을 실행해보자
npx babel input.js --presets=@babel/preset-react -o out.js
WebAssembly
복사
결과를 확인해보면 코드가 변환된 것을 알 수 있을것이다. 위 명령어에서 --presets=~~는 babel의 환경을 설정하는 과정인데, 이 과정을 조금 자세히 알아보자.
configuration of babel
앞서 말했듯이 babel은 설정에 따라 작업을 수행한다. 설정사항은 크게 2개로 나뉘는데 plugin과 preset이다.
plugin은 babel을 통해 변경할 문법을 설정하는 단위로 예를 들면 arrow function을 일반 함수로 바꾸거나 template를 string으로 변경하는 단위를 설정한다.
const func = () => {
return 0;
}
/* npx babel --plugins=@babel/plugin-transform-arrow-functions test.js */
const func = function () {
return 0;
};
JavaScript
복사
preset은 이러한 plugin을 하나로 묶어둔 세트이다. 보통 특정환경을 기준으로 여러 플러그인을 묶어서 제공한다.
매번 위와같은 설정을 하기 어려우므로 통상 configuration파일을 통해 compile을 진행한다. babel이 ver7.0 이후로 기존의 babel.config.js/json 외에 .babelrc.json라는 configuration file을 지역 configuration으로 설정하길 권장한다.
/* babel configuration file structure */
{
"presets": [...],
"plugins": [...]
}
/* Directory Structure */
root
└-babel.config.json // 전체설정파일
└-package.json
└-src
└-Home
│ └-.babelrc.json // 지역설정파일
│ └-Home.js
└-Main
└-.babelrc.json // 지역설정파일
└-Main.js
JSON
복사
위와 같이 설정해두면 해당 설정을 적용하여 babel compiling을 진행한다. 지역과 전역에 같은 속성이 있다면 지역속성으로 덮어씌워져서 동작한다.
결국 babel은 작성된 코드를 브라우저가 알 수 있는 방식으로 변환시켜주는 것이다. 앞으로는 매번 babel을 동작시켜 파일단위로 컴파일을 진행하여 새로운 파일로 만들어주면 된다!... 당연히 아니고 webpack을 통해 해당과정을 자동화 한다. 그 과정은 다음에 알아보자.
