[React] webpack & babel 이 뭔가?

webpack

 

여러 assets(img, HTML, CSS 등)을 하나의 번들로 묶어주는 도구

하나로 묶어 더 작은 파일로 배포하면 네트워크 요청 수가 줄기 때문에 성능면에서 좋아짐

 

 

babel

 

ES6+ 문법(백틱 사용하는 템플릿리터럴, 화살표 함수 등)을 안전하게 사용 가능하게 함

구형 브라우저에서도 호환되도록 변환

 

✚ @babel/preset-react
  - JSX 및 리액트 관련 문법을 변환해주는 프리셋
  - 리액트 사용 시 필요한 babel 플러그인을 모아놓은 것

 

 

react-app-rewired 사용하면 CRA의 기본설정(babel 플러그인, webpack 설정)을 수정할 수 있음

package.json