[webpack 미니 발표 1부] 모듈 번들러란?

들어가며...

두둥...!

회사에서 2주에 한번씩 돌아가면서 미니 발표를 하는데, 내 차례가 왔다.. 그 주제를 미리 정해뒀는데, 내가 선택한 주제는 'webpack'이었다. 왜 그랬니..? 과거의 나..?? 싸피에서 프로젝트하면서 리액트에서 절대 경로를 사용하고 싶을 때 웹팩 설정을 따로 해야 하는 등 많이 들어봤는데, 잘 몰라서 궁금해서 정했던 것 같다.... 

그런데 발표할 때가 올 때까지 안(? 못?) 하고 있다가 급하게 하는 중이다.. 하다 보니 webpack을 하려면 모듈 번들러에 대해서도 말해야 하고, 그러려면 모듈도, 번들러도 이야기해야 한다. 그리고 우리 회사는 요즘 vite를 더 많이 써서, webpack보다는 vite에 대해서도 이야기해야 할 것 같고... 적어도 webpack vs vite도 간단하게나마 말해야 할 것 같다. 아무튼 그래서 3부작으로 글을 써보려고 한다 ~!!

모듈 번들러(module bundler)

웹팩 ! 많이 들어보기는 했는데, 잘 모르고 있었다. 

웹팩은 한 마디로 말하면 '모듈 번들러'(module bundler)이다. 웹팩 공식 문서에서도 'At its core, webpack is a static module bundler for modern JavaScript applications. '라고 쓰여있다. '핵심적으로, 웹팩은 요즘 자바스크립트 어플리케이션을 위한 정적인 모듈 번들러이다.'

모듈 번들러라는 단어는 모듈 + 번들러이다.

모듈(Module)

모듈은 뭘까? 웹팩 공식 홈페이지에서 'In modular programming, developers break programs up into discrete chunks of functionality called a module.' 라고 한다. 모듈은 'discrete chunks of functionality' 라고 하고 있다. 즉, 기능적으로 쪼개진 덩어리, 특정한 기능을 가지는 코드 덩어리라고 할 수 있다.웹팩에서 말하는 모듈은 javascript에서 말하는 모듈 뿐 아니라, css, 아이콘, 폰트, WebAssembly 모듈 등 웹 어플리케이션을 이루는 것들도 포함된다.

번들(Bundle)

그 다음에 알아야 할 단어는 '번들러'이다. 번들러는 번들에 er을 붙여서, 번들을 해주는 것이라는 뜻이니까 번들을 알아보자.

Bundle은 이런 뜻이라고 한다.

1.꾸러미

2.~을 마구 싸 보내다

3.무리 지어 가다

출처: 네이버 영어 사전

즉 연관 있는 것끼리 묶는다는 뜻이다.

모듈 번들러(module bundler)

그러면 모듈 번들러는 모듈을 꾸러미로 만든다는 뜻이다. 웹 어플리케이션을 이루는 수많은 자원들이 있는데, 이것들을 조합하고 압축해서 하나의 결과물로 만들어준다.

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

필요성

왜 이렇게 해야 할까? (webpack 공식 홈페이지의 why webpack 부분을 읽고 제 말로 정리했습니다. )

번들러가 없을 때 웹에서 자바스크립트를 사용하기 위해서 어떻게 했을지 생각해보자. 예를 들어서 회원가입 페이지라고 생각해보자. 회원 가입 페이지에도 많은 기능이 필요하다. 아이디 중복 검사를 요청하는 코드가 있는 js 파일, 폼에 입력한 정보들을 서버로 넘기는 코드가 있는 js 파일 등등... 브라우저에서 서버로 각 파일들을 다 요청해야 하는데, 그러려면 오래 걸린다.  브라우저에서 서버로 한번에 보낼 수 있는 http 요청 수는 정해져 있다. 그래서 필요한 파일이 엄청 많다면, 요청하고 응답 받는 데 시간이 오래 걸린다. 그러면 사용자들도 온전한 페이지를 보기까지 오래 기다려야 해서, 사용성이 떨어진다.

아니면 이 js 코드를 모두 하나의 파일에 작성할 수도 있는데, 그러면 읽고 수정하기 어려워진다.

 

그럴 때, 이 자원들을 하나로 묶어주면 어떨까 ! 브라우저가 서버로 요청하는 파일이 줄어드니까 빨리 로딩될 것이다~!! 위에서 말했듯 모듈 번들러는 수많은 자원을 하나로 묶어준다!  웹팩은 모듈 번들러! 이런 장점이 있다. 

 

웹팩의 다른 필요성은 다음 편에 이어서 쓰겠다~ ~