웹팩과 리액트

young·2022년 7월 26일
0

7/21~8/18 Section 4 TIL

목록 보기
3/22

앵귤러

프레임워크, 정형화되고 체계화된 프론트엔드 개발 경험 제공. 기본적으로 필요한 코드의 양이 많다.
-> 대체재로 리액트와 뷰가 있었다.

리액트

프레임워크가 아닌 라이브러리.
We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
-> 리액트"만" 알아서는 개발하기가 어렵다.


리액트 개발에 꼭 필요한 라이브러리

react: 리액트 컴포넌트와 Hooks, 라이프 사이클에 대한 정보가 모두 들어있다.

react-dom: 리액트 코드를 브라우저에 보여주기 위해 렌더링한다.

babel: jsx를 js로 변경해서 entry에서 불러올 수 있게 만들어준다. (로더의 일종)

css-loader : The css-loader interprets @import and url() like import/require() and will resolve them.
js에서 import문으로 css파일을 불러올 수 있게 한다.

style-loader : Inject CSS into the DOM.
Automatically injects styles into the DOM using multiple .It is default behaviour.

css-loader와 함께 사용한다. css-loader를 통해 웹팩 의존성 트리에 추가된 값을 DOM에 주입한다.


리액트 개발에 도움이 되는 라이브러리

react-hot-reloader: webpack-dev-server처럼 저장할 때마다 변경사항을 개발 환경에 적용해주는 라이브러리

eslint: js로 개발시 자주 접하는 에러를 방지하기 위한 린터

prettier: js로 개발시 통일성 있게 코드 형식을 맞출 수 있게 도와주는 툴

profile
즐겁게 공부하고 꾸준히 기록하는 나의 프론트엔드 공부일지

0개의 댓글