webpack

: 모듈 번들러

모듈→ 모듈(한 가지 이상의 기능을 하는 분리된 코드의 집합, 덩어리)

번들러 → 묶어주는것

너저분하게 분리되어 있는 모듈들을 포함한 페이지의 리소스(html,css,js,img …) 확장명 혹은 특정 기준의 분류로 묶습니다.

예)

1. 외출을 위한 옷을 입고자 할 때 너저분하게 흩어져 있는 옷들 중 내가 원하는 옷을 찾아서 입는게 빠를지,
2. 분류별로 잘 정돈된 옷들 중에서 내가 원하는 옷을 가지고 오는 것이 빠를지 ⇒ 당연히 2번이 빠르기 때문에 모듈 번들러인 웹팩을 사용하면, 네트워크 연산비용이 획기적으로 줄어들게 됨

리액트는 컴포넌트 단위(모듈)로 쪼개져 있음

웹팩은 컴포넌트(모듈)들을 차곡차곡 정리해서 빌드해줌

모듈 번들러가 있기 때문에…

1. 모듈 단위의 개발이 가능 (왜? 리액트는 컴포넌트로 쪼개져 있으니까)
2. 네트워크 연산 비용이 줄어듬 (왜? 여러군데 확인하면서 찾는것보다 한번에 찾을수 있으니까)
3. loader라는 기능을 통해 js가 변환할 수 있는 상태로 컴파일(변환) ⇒ 대표적인 css loader를 통해 js에 css파일을 참조하여 사용 가능

babel

: 트랜스파일러 (번역기)

최신 문법들을 이해하지 못하는 웹 브라우저 로더들이 해당 언어를 이해할 수 있도록

저레벨의 문법으로 트랜스파일하여 이해할 수 있도록 변환

특히 jsx 문법을 사용하는 react의 경우는 바벨이 필수적으로 사용된다. (react 안에 숨겨져 있음)

react에서는 babel 중 4가지의 모듈을 사용

1. @babel/core: 핵심 요소들이 들어가 있는 모듈