22.07.26_TIL

📌 웹팩은 JavaSrcipt, JSON 문법만을 번들링할 수 있지만 loader를 사용하여 각종 css, jsx 등의 언어와 png, jpb 등의 멀티미디어 파일 또한 번들링을 할 수 있습니다. 오늘은 이러한 사실을 알고 있으므로 리액트를 웹팩을 사용하여 번들링하는 방법에 대해 알아보아야한다.

📗 오늘 학습한 내용

react, react-dom

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

babel

• create-react-app에 포함되어 있는 babel이 jsx를 js로 변경해주어 번들링을 해주었기 때문에 babel은 jsx를 JavaScript로 변경하여 entry에서 불러올 수 잇게 만들어주는 로더이다.

css-loader

• css 파일을 번들링할 때 사용하는 로더이다.

react-hot-reloader

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

eslint

• JavaScript로 개발 시 자주 접하는 에러를 방지하기 위한 린터이다.

prettier

• JavaScript로 개발 시 통일성 있게 코드 형식을 맞출 수 있게 도와주는 툴이다.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

• 회원가입 폼 구현

📝 중요한 내용

• 바벨

🍀 참고자료

• react webpack