기타

모듈 번들러(module bundler)란?

DevStory 2022. 7. 7.

JavaScript 프레임워크인 React, Vue, Svelte, Angular 등을 사용하다 보면 모듈 번들러(module bundler)는 필수적으로 언급되는 내용입니다. 모듈 번들러는 개념적으로 생각보다 쉬운 내용이지만 웹팩, 롤업, 파셀, 모듈, 번들러, 종속성, 로더 등 해당 용어는 무엇이고 어떻게 동작하는지 잘 모르기 때문에 대부분 이해하지 않고 넘어가게 됩니다.

하지만, FrontEnd 개발자라면 모듈 번들러의 개념과 필요성을 꼭 알아야 한다고 생각하고 개인적으로 헷갈리는 부분이 있어서 이번 포스팅에서 모듈 번들러에 대해 정리하고자 합니다.

모듈(Module)

모듈 번들러는 Module + Bundling이 혼합된 단어인데, 모듈은 '분리된 코드 조각'을 의미하고 번들링은 '묶는다'는 의미입니다. 즉, 모듈 번들러는 분리된 코드 조각을 묶는다는 의미입니다. '분리된 코드 조각'이라는 의미를 가지는 모듈에 대해 알아봅시다.

애플리케이션의 기능이 많아질수록 작성해야하는 코드가 길어질 수 있습니다. 모든 코드를 한 개의 파일에 작성하는 대신 기능(변수, 객체, 배열, 함수, 클래스 등)에 따라 별도의 파일에 코드를 분리할 수 있습니다. 코드를 분리하는 기준에 따라 파일이 상당히 많아질 수 있지만, 한 개의 파일에 코드를 작성하는 것보다 체계적이고 유지보수가 쉬워집니다.

결국 모듈은 분리된 파일을 의미합니다. JavaScript에서 현재 모듈을 다른 모듈에서 접근할 수 있도록 export 키워드를 사용하며, 분리된 모듈을 불러오기 위해 import 키워드를 사용합니다.

모듈 번들러(Module Bundler)의 필요성

React, Angular, Vue와 같은 JavaScript 프레임워크가 등장하기 전에는 웹 사이트를 구축하기 위해 HTML, CSS, JavaScript 뿐이었기 때문에 파일 관리가 복잡하지 않았습니다. 하지만, 시간이 지나면서 조금 더 나은 성능, 속도를 만족하기 위해 다양한 JavaScript 프레임워크가 등장하였으며, 웹 사이트를 구축하기 위해 필요한 파일들이 점점 많아집니다.

스벨트의 node_modules 폴더만 봐도 상당히 많은 모듈이 존재합니다. 참고로 스벨트는 다른 프레임워크에 비해 모듈이 적은 편입니다.

이렇게 많은 모듈을 하나로 묶는 과정은 쉽지 않으며, 변수 또는 함수 이름이 중복되는 경우 그리고 모듈간 종속성 때문에 배포하기 전부터 수많은 문제가 발생합니다.

모듈간 종속성이란 예를 들어 설명하자면, A.js 파일은 B.js를 import 하고 B.js 파일은 C.js 파일을 import 하고.. 이렇게 모듈끼리 서로 종속되는 것을 의미하며, 모듈 간 종속성이 복잡한 경우 어떤 모듈에서 문제가 발생했는지 추적하는 것도 쉽지 않습니다.

하나의 파일로 병합하더라도 병합하는 과정에서 발생하는 문제를 해결하는데 상당히 많은 시간을 소모하게 되므로 상당히 비효율적입니다.