우리는 Webpack이 왜 필요할까?

본 글은 2020년에 작성된 글입니다.

 

프론트엔드 개발 중이라면 Webpack이라는 기술에 대해 필수적으로 마주치게 된다. 이번 포스팅은 Webpack이 무엇인지, 왜 필요한지에 대해 찬찬히 알아보려한다.

 

---

Webpack, 어떤 일을 하는 도구인가?

우선 웹팩의 공식 문서를 살펴보자. 다음 링크로 들어가면 된다. (https://webpack.js.org/)

웹팩에 대해 한 번이라도 찾아본 적이 있다면 다음 이미지가 꽤 익숙할 것이다. 공식 페이지의 메인 이미지이기도 하다.

 

이 이미지가 말하고자 하는 것이 무엇일까? 뭔가 의존 관계로 얽힌 다양한 파일들, 모듈들을 훨씬 간단하게 만들어주고 있다. 중간에서 그 역할을 하고 있는 저 파란색 정육면체 모양의 도구가 바로 Webpack이다.

 

Webpack은 간단히 말해서 모듈 번들러라고 할 수 있다. 모듈 번들러라는 것은 여러 개로 나뉘어져 있는 파일들을 하나의 파일로 만들어준다는 개념이다. 그런데 왜? 왜 여러 파일들을 하나로 합치는 과정이 필요한걸까? 그 이유는 http 요청 방식과 관련이 있다.

 

우리가 지금 보고 있는 웹 페이지가 어떤 파일들로 구성이 되는지 먼저 생각해보자. 기본적으로 html, css, js 파일, 여기에 덧붙여 이미지, 웹 폰트, json 데이터 등 정말 많은 파일들이 모여 하나의 웹 페이지가 구성이 되고, 그만큼 필요한 많은 파일들을 요청하게 된다. http/2에서는 하나의 커넥션에 동시에 여러 파일들을 요청할 수 있지만, 우리가 주로 사용하는 http/1.1에서는 하나의 커넥션에서 하나씩 요청을 보내야 한다. 즉 하나의 요청이 끝나야 다음 요청을 보낼 수 있다는 것이다. 그렇기에 요청하는 파일들이 많을수록 비효율적이다. 그럼 해결 방법은 무엇일까? 요청 수를 줄여야한다. 이 요청 수를 줄이기 위한 방법이 바로 번들러이다.

 

번들러를 사용해서 js 파일이나 css 파일 등을 하나로 합칠 수 있게 되었다. 그럼 모듈은 무엇을 말하는 것일까? 자바스크립트가 발전하면서 ES2015 모듈, RequireJS, CommonJS, UMD 같은 JS 모듈 시스템들이 나오게 되고, JS 파일도 다른 프로그래밍 언어들처럼 모듈이라는 개념이 생겼다. import, require로 js 끼리의 의존 관계도 생겼다. 이러한 모듈들을 하나의 JS로 합쳐주는 역할을 해주는 것이 바로 웹팩이 하는 일이라고 할 수 있다.

 

그래서 웹팩을 왜 쓰는가?

그래서 웹팩을 왜 쓰는지, 그 이유를 알기 위해서 우리가 이러한 모듈 번들러를 사용하기 전엔 자바스크립트를 어떻게 사용해왔는지 떠올려보자. 브라우저에서 자바스크립트를 작동시키는 법엔 두 가지가 있었다.

 

1. 각 기능에 대하여 script를 포함시키는 것
   이 방법에 대한 문제점은, 너무 많은 script를 로드할 시에 네트워크 병목 현상이 발생할 수 있다는 것이다. 그래서 이 방법은 확장하기가 어렵다고 말한다.
2. 모든 프로젝트 코드가 포함된 큰 .js 파일을 사용하는 것
   말만 들어도 벌써부터 머리가 아프다. ㅎㅎ 스코프(scope), 크기(size), 가독성(readability), 유지관리성(maintainability) 등에 있어서 다양한 문제를 불러올 수 있다.

여기서 IIFE(Immediately Invoked Function Expressions - 즉시 실행 함수 표현) 개념이 등장한다. IIFE의 핵심은 스코프 문제를 해결했다는 점이다.

IIFE를 그대로 번역하면 '정의되자마자 즉시 실행되는 함수 표현'이라고 할 수 있다. 즉 window.onload에 함수를 선언하는 것과 비슷하다고 볼 수 있는데, 다음과 같은 형태로 선언된다.

(function(){
  /* code here */
})();

IIFE 내부에서 정의된 변수는 함수 범위의 스코프를 가지고(자바스크립트 클로져의 개념), 외부에서는 접근이 불가능하다. 또한 IIFE를 변수에 할당하면, IIFE 자체가 저장되는 것이 아니라 함수가 실행된 결과만 저장된다.

 

이러한 IIFE의 특징은 대규모 프로젝트의 스코프 문제를 해결한다. 스크립트 파일들을 IIFE로 감싸주면, 스코프 충돌에 대한 걱정 없이 안전하게 스크립트 파일들을 연결하거나 결합시킬 수 있다는 것이다. 즉, 안전한 번들링이 가능하다는 것 !!

 

웹팩은 IIFE를 사용하여 번들링하며, IIFE를 사용하는 다른 번들러 도구들(Make, Gulp, Grund, Brocooli, Brunch ...)과 달리 dependency graph를 생성하여 빌드시켜준다는 특징이 있다. 따라서 규모나 복잡도가 있는 프로젝트에서는 웹팩을 사용하는 것이 좋다.

 

이 외에도 우리가 웹팩을 사용하는 이유는 다음과 같이 정리할 수 있다.

• 자바스크립트 어플리케이션 및 이미지, 폰트, 스타일 시트 등을 번들해주는 도구 - ESM과 CommonJS를 모두 지원
• 번들링의 성능 개선을 고려한다.
• 코드 스플리팅을 이용하여 필요한 모듈만 로드하여 요청 지연을 줄인다.

 

😋

 

---

참고 자료

Webpack 공식 document 
웹팩4(Webpack)  설정하기
How to build modern applications with WEBPACK
Webpack의 핵심