Babel
자바스크립트 버전 중 ES6(ECMAScript 2015) 이상의 버전으로 작성된 자바스크립트 코드를 하위 버전의 자바스크립트 코드로 바꿔주는 혹은 트랜스파일(transpile) 해주는 자바스크립트 컴파일러라고 공식 홈페이지에서 정의하고 있다.
webpack
react 프로젝트를 세팅하려면 웹팩도 붙어야하는데 webpack은 프로젝트 디렉토리 내에 있는 여러 파일들을 하나의 파일로 묶어 브라우저가 여러 파일들을 각각 로드후 실행하는 절차를 없애고 한 파일만 로드 후 그 파일만 처리하면 되도록해서 빠르게 코드를 실행할 수 있도록 도와주는 번들러다.
- 웹팩은 자바스크립트 파일들만 하나의 파일로 만드는게 아니라 css 같은 다른 종류의 파일들도 하나로 묶어주는 기능을 가지고 있다.
웹팩과 바벨
웹팩이 여러 개의 자바스크립트 파일들을 하나의 자바스크립트 파일로 묶을 때, 바벨이 관여하여 ES6 (ECMAScript 2015) 미만의 버전으로 코드들을 변환하도록 설정되면 그 하나의 자바스크립트 파일은 ES6 미만의 버전 코드가 된다.
여기서 리액트 프로젝트는 파일들이 주로 TSX, JSX로 이루어져 있음을 볼 때, JSX파일들이 JS파일들로 변환되어야 함을 알 수 있는데 바벨의 프리셋과 플러그인을 이용하여 jsx파일을 js파일로 변환할 수 있다.
아래는 바벨 설정에 관련된 .babelrc라는 파일에 존재하는 코드인데 jsx 파일들을 js로 변환하기 위한 툴들을 설정해놓았다.
@babel/preset-react, @babel/plugin-transform-react-jsx 를 보면 이것들이 구체적으로는 무슨 역할을 하는지 몰라도 jsx파일 변환에 어떤 역할을 할 것이라는 생각을 해볼 수 있다.
// .babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
[
"@babel/plugin-transform-react-jsx",
{
"runtime": "automatic"
}
]
]
}.babelrc의 rc 에 대해서
.babelrc 의 파일명을 보면 rc가 뭔지 의문스러웠다. .eslintrc 도 있고 말이다.
찾아보니 UNIX 계열 시스템에서 run commands를 줄여 rc라고 사용했는데 그게 유래라는 말이 있다.
In the context of Unix-like systems, the term rc stands for the phrase "run commands". It is used for any file that contains startup information for a command.
바벨과 웹팩 설치
먼저 알아두면 좋을 것..
npm i 와 npm i -D의 차이점
npm i는npm install의 약자다.
npm install react나npm i react나 같은 기능을 한다.
package.json 파일에dependencies에 패키지명과 버전이 할당되며 실제 리액트 프로젝트가 돌아갈때 사용하는 패키지들을 설치할 때 사용하는 명령어다.
npm i -D는npm install --save-dev의 약자다.
devDependencies에 패키지 정보들을 등록하는 명령어이며devDependencies에 등록된 패키지들은 실제 리액트 앱의 로직에는 포함되지 않고 오로지 프로젝트를 빌드할때 사용된다.
웹팩이나 바벨 관련 패키지들도devDependencies에 등록해두는게 실제 웹 서비스의 사이즈를 줄일 수 있게 해준다.
웹팩
npm i -D webpack webpack-cli webpack-dev-serverwebpack은 웹팩의 코어 프로그램을 설치하는 것이다.
webpack-cli는 webpack의 기능을 터미널에서 커맨드를 입력하는 방식으로 조종을 지원하는 모듈이다.
webpack-dev-server는 리액트 프로젝트를 로컬호스트를 이용하여 웹브라우저에서 실행하는 기능을 하는 모듈이다.
바벨
npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/runtime차근차근 각 패키지들에 대해 알아보자..
babel-loader 는 웹팩과 바벨을 사용하여 자바스크립트 파일들을 변환 가능하도록 해주는 패키지다. 웹팩을 사용할때 바벨이 필요하면 바벨 쓰는걸 가능하게 해준다.
@babel/core는 말 그대로 바벨의 핵심 기능을 담당하는 로직들을 담고있는 패키지로 보인다.
@babel/core 패키지명을 보면 @로 시작하는 것을 알 수 있는데 이 부분은 아래의 링크를 참조하면 왜 @로 시작하는지 알 수 있다고 생각한다.
https://stackoverflow.com/a/53395718
@babel/preset-env는 브라우저들의 버전마다 어떤 자바스크립트 문법으로 변환되어야 하는지 세밀한 조정을 일일이 해야하는 걸 자동으로 해주는 걸로 보인다.
@babel/preset-react 는 아래의 3가지 플러그인들을 가지고 있다.
@babel/plugin-syntax-jsx@babel/plugin-transform-react-jsx@babel/plugin-transform-react-display-name
바벨이 리액트의 JSX 문법을 JS로 바꿀 수 있도록 플러그인들을 지원 해주는 걸로 보인다.
@babel/runtime은 여러 헬퍼 함수들을 가지고 있는 패키지로 보이며 바벨로 인해 컴파일된 여러 자바스크립트 파일에서 중복으로 나타나는 함수들을 한 개의 함수를 참조하는 식으로 코드를 개선해주는 것으로 보인다.
