React with webpack (1) — webpack이란?
React를 webpack으로 build하면서 경험했던 것을 글로 남깁니다.
CRA로 개발을 해보셨지만 CRA나 다른 보일러플레이트 없이 개발하고자 하는 분들께 추천합니다!
webpack이란 ?
webpack은 자바스크립트 애플리케이션을 위한 모듈 번들러입니다.
webpack이 애플리케이션을 처리 할 때 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성 하는 종속성 그래프 를 내부적으로 build합니다 .
종속성 그래프란?
하나의 파일이 다른 파일에 의존 할 때마다 webpack은 이것을 의존성 으로 취급합니다 . 이를 통해 webpack은 이미지 또는 웹 글꼴과 같은 비 코드 자산을 가져와 애플리케이션에 대한 종속성으로 제공 할 수 있습니다 .
webpack은 애플리케이션을 처리 할 때 명령 줄 또는 구성 파일에 정의 된 모듈 목록에서 시작합니다. 이러한 진입 점 에서 시작하여 webpack은 애플리케이션에 필요한 모든 모듈을 포함 하는 종속성 그래프 를 재귀 적으로 build한 다음 이러한 모든 모듈을 브라우저에서로드 할 소수의 번들 ( 종종 하나만) 로 번들링 합니다.
위의 글을 쉽게 설명하면 진입점에 있는 파일에서 의존하고 있는 모든 파일들을 번들링 해준다고 생각하면 됩니다.
예를들어 React에서 index.js 가 진입점이라고 하면 index.js가 부르는 app.js 그리고 app.js 가 부르는 routes.js의 파일 routes.js가 부르는 component들 component가 부르는 수많은 파일들을 하나(또는 소수)의 파일로 번들링 해주는 것 입니다.
번들링을 하는 이유
- 첫 번째로는 파일별로 변수를 관리하기 위해서 입니다.
여러개의 자바스크립트 파일이 있다고 가정하면
- index.html
<!-- index.html -->
<html>
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
<script src="./app.js"></script>
<script src="./main.js"></script>
</body>
</html>- app.js
// app.js
var num = 10;
function getNum() {
console.log(num);
}- main.js
// main.js
var num = 20;
function getNum() {
console.log(num);
}index.html에서 getNum 함수를 실행할 경우 선언 순서에 따라 다른 값이 나옵니다.
이러한 문제점은 실제로 복잡한 애플리케이션을 개발할 때 발생합니다.
변수의 이름을 모두 기억하지 않은 이상 변수를 중복 선언하거나 의도치 않은 값을 할당할 수 있죠.
- 두 번째는 웹 애플리케이션의 빠른 로딩속도 입니다.
파일이 수백, 수천, 수만 개라면 로딩하는 속도는 견디기 힘든 수준으로 길어집니다.
일반적으로 특정 웹 사이트를 접근할 때 5초 이내로 웹 사이트가 표시되지 않으면 대부분의 사용자들은 해당 사이트를 벗어나거나 집중력을 잃게 됩니다.
그래서 웹 사이트의 로딩 속도를 높이기 위해 많은 노력들이 있었습니다. 그 중 대표적인 노력이 브라우저에서 서버로 요청하는 파일 숫자를 줄이는 것입니다.
이를 위해 웹 task 매니저를 이용해 파일들을 압축하고 병합하는 작업들을 진행했습니다.
뿐만 아니라 초기 페이지 로딩 속도를 높이기 위해 나중에 필요한 자원들은 나중에 요청하는 레이지 로딩(Lazy Loading)이 등장했죠.
webpack은 기본적으로 필요한 자원은 미리 로딩하는게 아니라 그 때 그 때 요청하자는 철학을 갖고 있습니다.
CRA와 비교
React로 개발할 때 CRA를 사용하게 되면 webpack과 babel등의 설정을 제공합니다. 복잡한 webpack설정을 할 필요가 없어집니다.
정말 편리하고 강력한 보일러플레이트 입니다. 하지만 내가 진행할 프로젝트에서 필요로 하지 않는 더 많고 복잡한 설정을 모두 가지고 있습니다.
그리고 webpack의 설정을 바꾸고 싶을 때 eject하여 그 모든 의존성들을 관리하는 것은 최초에 webpack으로 build하는 것보다 더 어려운 일입니다.
이런 이유들로 규모가 큰 프로젝트에서는 CRA를 사용하지 않고 직접 webpack으로 build하는 경우를 종종 볼 수 있습니다.
CRA의 간편함을 살리면서도 쉽게 확장과 유지보수가 가능하도록 하는 라이브러리도 있으니 한번 살펴 보시는 것도 좋을 것 같습니다.
CRA로 개발을 하시는 경우에도 webpack의 개념과 사용법을 알고 계시면 더 깊게 프로그래밍을 이해하는데 도움이 될 것 같습니다.
다음 글에서는 React와 webpack으로 번들링하여 build하는 과정을 알아보겠습니다!
