🔍 React 개발과 Webpack

사용자에게 최적의 번들을 제공하기 위해서 create-react-app의 거대한 라이브러리 목록을 줄이기 위해 사용하며, 개발자가 필요한 라이브러리를 골라서 번들링할 수 있다.

👀 Essential Library

✔ react, react-dom

리액트 컴포넌트, Hooks, 라이프 사이클에 대한 정보가 모두 들어있는 리액트와 이 리액트 코드를 브라우저에 보여줄 수 있는 react-dom은 꼭 필요하다.

✔ babel

create-react-app에 포함되어 있는 babel이 jsx를 js로 변경해주어 번들링 해줌으로써, 브라우저가 읽을 수 있게 해준다.

JSX를 JavaScript로 변경하여 entry에서 불러올 수 있게 만들어줬기 때문에 로더의 일종으로 볼 수 있다.

✔ css-loader

👀 Optional Library

✔ react-hot-reloader

webpack-dev-server처럼 저장할 때 마다 변경사항을 개발 환경에 적용해주는 라이브러리로, 리액트 상태를 유지시켜준다.

✔ eslint

JavaScript로 개발 시 자주 접하는 에러를 방지하기 위한 린터로, 많은 config와 plugin이 있어 이를 잘 조합하면 리액트에서 자주 접하는 에러를 미리 발견할 수 있다.

✔ prettier

JavaScript로 개발 시 통일성 있게 코드 형식을 맞출 수 있게 도와주는 툴로, eslint와 조합해서 통일된 코드 형식까지 강요할 수도 있다.

Reference: 코드스테이츠