웹팩이란
웹팩 공식 홈페이지에서 웹팩을 다음과 같이 소개한다.
핵심적으로 webpack 은 최신 JavaScript 응용 프로그램을위한 정적 모듈 번들러 입니다. 웹팩은 애플리케이션을 처리할 때 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성 하는 종속성 그래프를 내부적으로 빌드합니다.
일단 말이 어렵다. 하나하나씩 분해해서 무슨 뜻인지 알아보자.
모듈 번들러
하나하나 살펴보자.
-
모듈은 코드의 유지보수가 쉽도록 나누어진 것 혹은 그 분류 자체를 말한다. 흔히 말하는모듈화는 기능별로 나누어서 분류해서 묶으라는 말이다. -
번들러는 하나로 묶는다는 동사bundle에서 왔다. 동사를 행하는 사람이나 물건을 뜻하는 접미사-er이 붙었다. 즉 여러개를 묶어준다는 말이다.
정리해보자.
모듈 번들러: 유지보수가 쉽도록 기능별로 나눈 것을 묶어주는 것
요즘 웹개발을 하는 기업에서 웹팩의 사용이력을 묻곤 한다. 왤까? 어떤 이점이 있기에 사용하는 것일까?
모듈 번들러의 등장 이야기
모듈화의 도입
모듈화는 쪼개는 것이라도 말했다. 예를 들어보자
나는 어제 밥을 고민하다 치킨이 생각이 나서 유튜브를 켰는데 거기서 유명한 스트리머가 방송을 했던 것을 보고 나도 먹고싶어서 통장잔고를 확인했는데 돈이 모자라서 동생과 함께 시키려고 보니 배달앱 쿠폰이 있어서 그걸 사용하고 배달주소를 등록하고 배달을 시키고 40분 후에 배달이 와서 치킨을 맛있게 먹고 이를 닦고 잤다.
뭔가 한 일이 많은데 줄글이라 보기 힘들다. 이걸 나눠보자.
- 밥을 고민하다 치킨이 생각이 났다.
- 유튜브를 켰는데 유명한 스트리머의 영상을 봤다.
- 영상을 보고 먹고싶어져서 돈을 확인해봤다.
- 잔고가 모자라 동생과 함께 시키려고 마음먹었다.
- 배달앱 쿠폰이 있어서 사용했다.
- 배달 주소를 등록하고 주문했다.
- 40분 뒤에 배달이 와서 치킨을 먹었다.
- 먹고 난 뒤에 양치하고 잤다.
보기 더 깔끔하다고 생각한다. 만약 여기서 내용을 추가하거나 삭제하려고 한다면 1번 예제와 2번 예제 중 무엇이 더 편할까? 2번이 더 편하다고 생각한다. 앞 글은 글을 모두 읽어 내용을 파악한 후 찾아서 수정해야 한다면 2번째는 짧아 내용을 파악하기 더 쉽다.
만약 저것들이 파일형식으로 내용을 유추할 수 있는 파일 이름으로 저장되었다면 더 빨리 찾아서 수정할 수 있을것이다.
정리하자면 용량이 큰 파일을 기능이나 함수별로 나누어서 처리하는 방식을 모듈화라 한다. 이는 한 파일에 모두 적는것보다 가독성이 증가하고 의존성을 파악하기가 쉬워 유지보수가 쉽다는 장점이 있다.
번들러의 도입
회사에서 물건을 담당한다고 생각해보자. 사장님이 시켜서 100개의 물건을 다른 방으로 옮기는 작업을 하게되었다. 그렇다면 옮기는 방법은 2가지, 즉
- 1개씩 왔다갔다 하면서 옮긴다
- 상자에 다 넣어서 상자채로 옮긴다
어짜피 100개를 다 옮겨야한다. 그런데 이왕 할 거, 적게 왔다갔다 할 수 있다면 그 방법을 택하는 것이 좋다. 그리고 나중에 찾기 위해서 상자 하나에 다 쏟아넣는게 아니라 브랜드나 색깔별로 나누어서 분류하면 더 찾기 좋다.
자바스크립트 파일을 모듈별로 나누고, 이를 묶어서 네트워크로 전송하면 더 빠르게 전송할 수 있으면서 유지보수도 좋게 할 수 있다.
다시, 모듈 번들러
총정리를 해보자.
웹 어플리케이션이 동작하기 위해서는 여러가지 요소들이 필요하다. 그 중 핵심 기술인 동적 페이지를 구성하기 위해 javascript를 사용하는데, 규모가 큰 사이트에서 유지보수를 하다보니 복잡성이 증가한 것이다.
그래서 큰 자바스크립트 파일을 기능별로 쪼개서 배포하기 시작한다. 이 때 파일 수가 많아짐에 따라 네트워크 요청의 수도 많아진다. 즉, 네트워크 병목현상이 생기게된다.
이를 해결하기 위해 모듈 단위로 묶어서 1개의 파일로 보낸다. 즉, 파일의 수가 획기적으로 줄어 네트워크 병목현상을 줄일 수 있게 되었다.
3줄요약 해보자
- 예전에는 자바스크립트의 수가 많지 않았으나 기능이 많고 복잡해지면서 유지보수를 위해 코드를 모듈화함.
- 모듈화의 결과로 파일의 수가 많아짐. 파일의 수가 많아지는 것은 더 많은 요청을 해야한다는 말과 같고 이는 네트워크 병목현상으로 이어지게 됨
- 그래서 그 파일들을 번들러로 묶어 배포하면 네트워크 병목을 줄이면서 유지보수를 쉽게 할 수 있음.
그럼 왜 웹팩인가?
모듈 번들러도 웹팩만 존재하는 것이 아니다. Parcel, Gulp 등 다른 번들러도 존재한다. 하지만 웹팩 사용자들이 말하는 웹팩의 장점을 다음과 같다.
- 파일 분할 기능
- 다양한 로더
- 전세계적 많은 유저와 좋은 생태계 조성
- 많은 기업에서 사용 및 요구
- 무엇보다 문서화가 잘 되어있음 공식홈페이지
자신감이 넘치는 웹팩
결론
웹팩을 사용해야할 이유와 특성에 대해 알아봤다. 구현은 다루지 않았으나 기반지식을 바탕으로 어떤것이고 어떨때 사용하는지 알고 있다 적재적소에 사용하는 것이 좋겠다.
참고자료
https://webpack.js.org/concepts/
https://d2.naver.com/helloworld/0239818
