[BUNDLING]Webpack Reack

리액트만 알아서는 개발하기가 어렵다

react, react-dom, react-scripts, create-react-app, react-router-dom, storybook, styled-component등 많은 부가 라이브러리

create-react-app이라는 툴 체인을 개발하여 초급 리액트 개발자가 쉽게 리액트에 접근할 수 있도록

웹팩이 사용된다는 점

create-react-app의 거대한 라이브러리 목록을 줄이고자 직접 웹팩을 설치하여 하나씩 리액트와 그에 필요한 라이브러리 설정

---

리액트 개발 필수 라이브러리

• react, react-dom
• babel
  • 브라우저에서 JavaScript는 읽을 수 있지만 JSX는 읽을 수 없음, babel이 jsx를 js로 변경해 번들링, entry에서 불러올 수 있게 만들어줬기 때문에 로더의 일종
• css-loader

---

리액트 개발 도움 라이브러리

• react-hot-reloader
  • 저장할 때 마다 변경사항 개발 환경에 적용, 리액트 상태를 유지
• eslint
  • JavaScript로 개발 시 자주 접하는 에러를 방지하기 위한 린터. 많은 config와 plugin이 있는데, 잘 조합하면 리액트에서 자주 접하는 에러를 미리 발견하는데 도움
• prettier
  • JavaScript로 개발 시 통일성 있게 코드 형식을 맞출 수 있게 도와주는 툴, eslint와 조합, 통일된 코드 형식까지 강요