-
FE 개발에 도전합니다 (6)개발에 도전합니다 2022. 5. 24. 22:22
Babel에 도전합니다.
네 PO 다마고치는 크런치에 당해 FE 개발에 한동안 도전하지 못했습니다.
어려운 문서(DOM)에 이어 BABEL에 크런치 당하고, 피니쉬로 깃허브가 의지를 박살냈죠...
하지만 다시 level 1부터 시작해봅니다. 처음부터 그렇게 레벨이 높지 않았거든요.
리액트로 통일되기 전 프론트엔드는 춘추전국시대를 겪었습니다. 그래서 Hello, world!를 html로 쓰면 모든 언어는 오류를 뱉어내곤 했죠.
그래서 위대한 Babel이 등장했습니다
https://babeljs.io/ Try out을 하면 Babel의 세계가 열립니다. Javascript로 다 바꿔주죠.
바벨의 도움을 받기 위해서는
공식문서 https://babeljs.io/docs/en/와
https://jeonghwan-kim.github.io/series/2019/12/22/frontend-dev-env-babel.html 해설서가 필요합니다.
npm i -D babel-loader
npm i -D @babel/core
npm i -D @babel/preset-env @babel/preset-react마법의 주문을 외우고 Webpack Config를 설정하고, Babel Config도 만들어서 설정해줍니다. 뜻은 어 babel써 입니다.
그럼 to be continue...
Webpack config 설정
module.exports = { module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader', }, ], }, };
Babel config 설정
module.exports = { presets: [ [ '@babel/preset-env', { targets: { node: 'current', }, }, ], '@babel/preset-react', ], };
'개발에 도전합니다' 카테고리의 다른 글
FE 개발에 도전합니다 (번외 REDIS) (0) 2022.07.03 FE 개발에 도전합니다 (5) (0) 2022.05.09 FE 개발에 도전합니다 (4) npm start (0) 2022.05.09 FE 개발에 도전합니다 (3) 1주차 회고 "백문이불여일코" (0) 2022.05.08 FE 개발에 도전합니다 (2) DOM (0) 2022.05.06