[ webpack ] React(리액트)와 webpack(웹팩)

 

출처 - https://webpack.js.org/

 

React.js를 사용하거나, 다른 라이브러리 혹은 프레임워크를 사용하다보면 항상 webpack과 같은 모듈 번들러 툴을 사용하게 된다. 웹팩 공식 사이트에서 소개하는 컨셉은 현대 자바스크립트 응용 프로그램을 위한 정적 모듈 번들러라고 말한다. 

모듈 번들러는 여러 다른 파일들(JavaScript, LESS, CSS, JSX, ESNext 등)을 받아서 하나의 파일로 묶어준다. 

 

이렇게 여러 다른 파일들을 받아 하나의 파일로 묶어주어 생기는 이점은 크게 모듈성과 네트워크 성능이 있는데, 모듈성은 소스 코드를 작업하기 쉽게 여러 부분이나 모듈로 나눠서 다룰수 있게 해주어 팀 작업등의 협업에 유리하다.

 

또 네트워크 성능의 측면에서는 의존 관계가 있는 여러 파일을 묶은 번들을 브라우저가 1번만 읽기 때문에 네트워크의 성능이 좋아진다. 각 script 태그가 http 요청을 만들어내므로 http 요청마다 약간의 시간 지연이 발생하게 되는데 모든 의존 관계를 한 파일에 넣으면 모든 파일을 1회의 http 요청으로 가져올 수 있어, 추가 시간지연을 방지할 수 있다.

 

웹팩은 컴파일 이외에도 코드를 여러 덩어리로 나눠서 필요할 때 각각을 로딩할 수 있으며, 공백, 줄바꿈, 긴 변수 이름, 불필요한 코드 등을 없애서 파일 크기를 줄여준다. 코드의 기능을 테스트해야 하는 경우 코드를 각각의 환경에 맞춰 보내줄 수 있으며 소스 코드가 바뀌는지 감지해서 변경된 모듈만 즉시 갱신해주는 기능도 있다.

 

 

 

 

웹팩의 핵심 개념

1. Entry
2. Output
3. Loaders
4. Plugins
5. Mode
6. Browser Compatibility(브라우저 호환성)

 

 

 

 

웹팩의 장점

- 모듈성 : 모듈 패턴을 사용하여 모듈을 외부에 export 하고 나중에 그 모듈을 필요한 곳에 import 하여 사용함으로써 애플리케이션 소스 코드를 보다 관리하기 쉬운 규모로 나눌 수 있다.

 

- 조합 : 모듈을 사용하여 애플리케이션을 효과적으로 구축할 수 있는 작고 단순한, 재사용하기 쉬운 리액트 컴포넌트를 구축할 수 있다. 컴포넌트가 작아지므로 더 이해하기 쉽고 테스트 하기 쉬워진다.

 

- 속도 : 모든 애플리케이션 모듈과 의존 관계를 하나의 클라이언트 번들로 묶음으로써 여러 파일을 http 로 요청하지 않고, 1회의 http 요청을 통해 시간 지연을 줄여 애플리케이션 로딩 속도가 빨라진다.

 

- 일관성 : JSX나 자바스크립트를 컴파일해주어 프로젝트에서 아직 표준화되지 않은 최신 문법을 사용할 수 있다. 바벨은 다양한 ESNext 문법을 지원하므로 웹팩과 바벨을 이용하여 개발에 계속 최신 자바스크립트 문법을 사용할 수 있다.

 

 

 

 

 

++ React에서 CRA를 사용하여 프로젝트를 셋팅했다면, webpack이 포함되어 있으며, 직접 프로젝트에 웹팩 기능을 셋팅하는 것도 가능하다.

 

 

 

 

 

---

 

🌸 출처 🌸

 

webpack.org
Learning React