[React] Github page로 포트폴리오 웹페이지 만들기 #2 - 개발환경 세팅 - babel 설치
Github page로 포트폴리오 웹페이지 만들기
개발환경 구성을 위해 babel이 필요합니다.
babel은 ES5+ 이상의 Javascript 코드를 이전 버전으로 변환 시켜줍니다.
또한 React 에서 사용되는 JSX 문법의 코드를 변환시켜 줍니다.
https://babeljs.io/docs/en/
webpack 의 config.js 파일과 같이 json 구성파일로 babel의 구성 설정을 할수 있거, presets, plugins 등을 설치 사용할 수 있습니다.
1. babel 설치 / 테스트
먼저 babel을 설치해 보겠습니다.
https://babeljs.io/docs/en/usage
@babel/core @babel/cli
npm install --save-dev @babel/core @babel/clibabel 사용시 기본이 되는 @babel/core와 command 라인에서 babel을 실행 시켜줄수 있는 @babel/cli를 설치해 줍니다.
설치가 완료되면 package.json→devDependencies에 추가가 됩니다.
이제 test.js에 이전에 쓴 코드를 지우고 예제에 나와있는 코드를 입력해 줍니다.
//test.js
[1, 2, 3].map(n => n + 1);터미널에서 npx를 이용해 babel을 실행시켜 봅니다.
npx babel test.js
명령어를 실행했지만, 아무변화도 일어나지않았습니다.
변환은 babel plugins 에서 담당하고 있습니다.
이러한 plugins은 직접 만들것들고 사용할 수 있지만, 이미 만들어져 있는 것들을 사용하면 편리합니다. 또한, babel plugins 의 조합인 presets을 사용할 수도 있습니다.
https://babeljs.io/docs/en/usage#plugins--presets
여기서는 @babel/preset-env을 설치하여 사용해 보겠습니다.
@babel/preset-env
https://babeljs.io/docs/en/babel-preset-env
@babel/preset-env 환경에 상관없이 최신 Javascript 코드를 변환해 줍니다.
npm install --save-dev @babel/preset-env
정상적으로 설치 후에 아래의 명령어를 입력해 봅니다.
npx babel --presets @babel/preset-env test.js
변환이 잘 이루어진것 을 볼 수 있습니다.
이제 babel에 필요한 구성을 설정하는 파일을 만들어 사용하면 됩니다.
2. babel.config.json
https://babeljs.io/docs/en/config-files
babel의 config파일은 json 또는 js 확장자를 사용할수 있습니다.
저는 babel.config.json으로 만들어 사용하겠습니다.
파일을 만들어 줍니다.
{
"presets": ["@babel/preset-env"]
}json 파일 형식으로 presets에 @babel/preset-env 를 등록해 줍니다.
이제 이전에 썼던 명령어에서 presets 부분을 빼고 실행시켜 봅니다.
npx babel test.js
잘 수행 되었네요.
babel의 기초적인 설치와 테스트를 진행해 보았습니다.
이제 React 사용을 위한 babel preset을 설치합니다.
3. @babel/preset-react
https://babeljs.io/docs/en/babel-preset-react#babelrcjs
@babel/preset-react 는 react jsx문법을 변환시키는데 필요한 plugins들이 들어있습니다.
설치해 줍니다.
npm install --save-dev @babel/preset-react
설치 후 babel.config.json 파일에 등록해 줍니다.
{
"presets": ["@babel/preset-env","@babel/preset-react"]
}
전체 실행 코드
// babel 설치
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react babel-loader// babel.config.json
{
"presets": ["@babel/preset-env","@babel/preset-react"]
}
What is Next?
babel 설치 후 구성 파일까지 만들어 봤습니다.
이제 추가적으로 필요한 것은 webpack 실행시에 babel 이 적용할 수 있도록 하는 것입니다.
babel-loader를 사용하여 이 부분을 처리 하고 있습니다.
다음에는 babel-loader 설치와 함께 자주 쓰이는 plugins 그리고 모듈을 설치해 보겠습니다.
끝!