[Vue.js][Single-File Components] 4. 모듈과 번들러

▶ Module 

프로그램을 구성하는 독립적인 코드 블록 (*.js 파일)

▷ Module의 필요성 개발하는 어플의 크기가 커지고 복잡해지면서 파일 하나에 모든 기능을 담기가 어려워졌다.  따라서 자연스럽게 파일을 여러 개로 분리하여 관리하게 되었고 이 때 분릴 된 각 파일이 바로 모듈(module)이다. *.js 파일 하나가 하나의 모듈이다.

▷ Module의 한계 하지만 어플이 점점 발전함에 따라, 처리해야 하는 JavaScript 모듈의 개수도 증가했다. 이러한 상황에서, 성능 병목 현상이 발생했고  모듈 같의 의존성(연결성)이 깊어지면서,  특정한 곳에서 발생한 문제가 어떤 모듈 간의 문제인지 파악하기 어려워졌다.  따라서, 복잡하고 깊은 모듈 간의 의존성 문제를 해결하기 위한 도구가 필요해졌다.  그게 바로 번들러이다.

파이썬에서는 모듈이 .py  그거랑 비슷하다 자바스크립트에서는 .js 라고 되어 있는 것

 

▶ node_modules의 의존성 깊이 

 

▶ Bundler

여러 모듈과 파일을 하나 (또는 여러 개)의 번들로 묶어 최적화하여  어플에서 사용할 수 있게 만들어주는 도구

- Bundler의 역할 의존성 관리, 코드 최적화, 리소스 관리 등 Bundler가 하는 작업을 Bundling이라고 한다.  참고, Vite는 Rollup 이라는 Bundler를 사용하며 개발자가 별도로 기타 환경설정에 신경 쓰지 않도록 모두 설정해두고 있다.