모듈(Module)

애플리케이션의 기능이 많아질 수록 작성해야 하는 코드가 길어지는데, 이를 기능(또는 개발자의 의도)에 따라 분리한 파일

• 다른 모듈에서 접근할 수 있도록 export 키워드 사용
• 분리된 모듈을 불러오기 위해 import 키워드 사용

**모듈 번들러(**Module Bundler)의 등장 배경

• 웹 어플리케이션의 성능과 속도, 기능을 만족하기 위해 다양한 JavaScript 프레임워크 또는 라이브러리가 등장하였으며, 웹사이트를 구축하기 위해 필요한 파일들이 점점 많아지게 됨
• 이에 따라 변수 또는 함수 이름이 중복되거나 모듈간 종속성이 발생하는 경우, 문제가 발생했을 때 어떤 모듈에서 발생된 오류인지 추적하는 것이 쉽지 않음
• 모듈간 종속성 문제가 해결된다 해도 모든 파일을 하나씩 요청하고 가져와 로딩 속도가 늦어짐
• 이를 위해 하나의 파일로 병합이 필요한데, 이 과정에서도 수많은 오류에 직면할 수 있고, 이를 해결하는데 많은 시간을 소모하게 되어 비효율적
• 이러한 작업을 자동으로 해주는 도구의 필요성이 대두

<aside> 📌 모듈간 종속성? A.js 파일이 B.js를 import하는 경우, A.js는 B.js에 종속됨. 즉, A.js를 실행하기 위해서는 B.js가 필요

</aside>

모듈 번들러(Module Bundler)

웹 애플리케이션을 구성하는 여러 자원(HTML, CSS, Script, Image 등)들을 병합하여 하나의 단일 파일로 만드는 도구

• image, css 등 에셋을 종속성 순서대로 불러옴
• Module + Bundler ⇒ 분리된 조각을 묶는 도구