[React] Webpack, Babel, Create React App

https://webpack.js.org/

웹팩이란 - Module bundler 라이브러리

*Module bundler : 여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 라이브러리


웹페이지에서는 페이지를 보여주기 위한 수 많은 자바스크립트 파일을 서버에 요청 - 서버와 여러번 통신 - 비효율
=> 여러개의 파일들을 Module bundler로 한번에 처리해서 위의 문제를 해결

 

https://babeljs.io/docs/en/

Babel이란 - 최신 문법을 특정 이전 버전의 js로 변환하는 도구

 

 

https://create-react-app.dev/

Create React App이란 - Facebook의 공식 React 웹 개발을위한 보일러 플레이트

* 보일러 플레이트 : 변형이 거의 또는 전혀없이 여러 위치에서 반복되는 코드 섹션

- 모든 개발환경을 설정하지 않아도 되고 페이스북에서 지속적으로 업데이트를 해주기에 많은 사람들이 사용
- 리액트 앱 실행을 하기 위해선 webpack(번들화), babel(최신 자바스크립트 문법 지원) 설정 시간을 줄여줌

Create React App에 포함
- Webpack : minify, uglify 등을 포함한 모듈 번들링 도구
- Babel : ES6, React 등의 문법을 ES5 코드로 변환시켜주는 트랜스파일러
- Autoprefixer : 다양한 벤더(브라우저)들에게 적절한 CSS 가 적용될 수 있도록 prefix 를 붙여준다.
- ESLint : 자바스크립트 lint, 코드 컨벤션과 오류 등을 잡아준다.
- Jest : 자바스크립트 테스트 도구
- 이외에 여러개