webpack

최근 프로젝트를 생성할때 vite를 많이 사용한다. vite 공식문서를 살펴보면 기존에 사용하던 웹팩보다 10100배 정도 빠르다 라는 설명이 있다. 처음에는 별 생각없이 "아그렇구나"정도로 읽고 넘어갔었는데 곰곰히 생각해보니 웹팩이란 단어를 엄청 많이 들어봤지만 정작 제대로 무엇인가에 대해서 알아본 적이 없었다. 이번 기회에 한번 알아보도록 하자.

웹팩의 정확한 의미는 오픈소스 자바스크립트 모듈 번들러라고 한다. 번들러가 무엇인지는 잘 모르지만 이게 무엇인지 알아야 웹팩을 온전히 이해 할 수 있을 것 같다.

1️⃣ 번들러란?

우리가 웹 어플리케이션을 제작하게 된다면 1가지 파일에 모든 소스코드를 담을 순 없다. 가독성이 매우 떨어질 뿐더러 이후 유지보수가 매우 어렵기 때문이다. (물론 파일 1개로 제작된 프로젝트가 있을 수도 있다...) 따라서 자연스레 여러가지의 파일로 구성되어 있을것이고, 기능별로 또는 페이지 별로 각각의 파일이 존재 할 것이다.

그런데 만약 프로그램에 문제가 발생했다고 생각해보자. 우리는 수많은 파일 중 문제가 있는 파일과 의존성을 가지고 있는 파일들을 모두 찾아서 수정해야 하는데 이 작업은 결코 수월하지 않을 것이다.. 이것은 추후 프로젝트를 유지보수하는데 매우 큰 문제점이다.

또한 여러 파일들로 분리되어있다보니 브라우저의 HTTP 요청수가 증가하여 브라우저의 성능이 저하되는 문제점도 있다.

따라서, 파일들의 의존성 관계를 파악하여 모아주는 기능이 있다면 추후 유지보수에도 편하고, 파일 하나에 모든 소스코드를 작성하지 않아도 되기 때문에 기능별로 나누어 코드를 작성할수 있다는 아주 큰 장점이 생긴다.

이 기능을 바로 번들링이라고하고, 번들링을 하는 도구를 번들러 라고 한다.

실제로, 웹 어플리케이션에서는 자바스크립트 파일 뿐만 아니라 HTML, CSS 등 여러 파일의 내용이 포함되기 때문에, 서로간의 의존성 관계가 복잡해지고 파일의 전체적인 양 또한 매우 많아졌다. 이 파일들을 번들링하는 과정을 거쳐 하나의 파일로 만들어 요청/응답을 받는 것이다.

2️⃣ 웹팩이란?

번들러/번들링에 대해서 알아보았으니 다시 한번 웹팩의 의미를 살펴보자 오픈소스 자바스크립트 모듈 번들러

오픈소스로 배포된 자바스크립트를 번들링 해주는 도구 라는 뜻이다.

웹팩은 여러개로 나누어져있는 파일을 하나의 자바스크립트 코드로 합치고 최적화하는 라이브러리이다. 이 라이브러리를 사용했을때 우리가 얻을 수 있는 장점은 아래와 같다.

• 여러 파일을 하나의 파일로 합쳐 최적화한다 ➡️ 로딩 비용 감소

• 모듈 단위의 개발 가능 ➡️ 가독성 및 유지보수 수월

• 최신 자바스크립트를 지원하지 않는 브라우저에서 사용할 수 있도록 변환시켜준다. (이 장점의 경우 Barbel에 대하여 포스팅할때 자세히 다뤄보도록 하겠다.)

여기서 말하는 모듈이란 자바스크립트, HTML, CSS, Image 등 웹 어플리케이션을 구성하는 모든 자원을 통틀어 일컫는다.