모듈
자바스크립트의 기능이 많아질수록, 코드는 늘어나고 복잡해졌습니다.
때문에, 코드를 기능이나 페이지 단위로 분리하게됩니다. 이러한 단위를 모듈이라 부릅니다.
하지만, 이런 모듈들은 의존 관계를 가지게 되었습니다.
모듈 시스템의 필요성
단순히 js파일을 여러 파일로 나눈다고 모듈화가 되는 것은 아닙니다. (모듈은 개별 스코프를 가집니다)
자바스크립트는 파일이 나뉘어도 같은 전역 스코프를 사용하며, 다른 파일에 영향을 줍니다.
또한, 각 파일은 순서대로 로드되어야 하므로 파일간 의존성이 관리되어야합니다.
자바스크립트 모듈 시스템을 활요하여, 다른 파일에 주는 영향을 막고, 의존성을 관리할 수 있습니다.
모듈 시스템, 라이브러리
ES6 모듈 이전에는 CommonJS와, AMD 등에서 제안하는 모듈 정의 방법이 있었습니다.
- CommonJS
module.export, require 구문을 활용합니다.
Node.js 모듈 Node는 CommonJS가 기본이지만, ES 모듈도 지원합니다. - ES6 Module
export, import 구문을 사용합니다.
번들러(bundler)
- 번들이란 여러 파일이나 구성을 합치는 것을 말합니다. 즉, 번들러란 합쳐주는 것입니다.
- 모듈번들러란 모듈간의 여러 의존성을 고려하여 하나의 파일로 만듭니다.
- 번들러는 webpack외에도 RequireJS, Rollup, Parcel등이 있습니다.
서로 종속 관계에 있는 여러 파일들을 웹팩을 통해 하나로 모아줍니다.
번들러가 필요한 이유
모듈(파일)을 정리하는 번들러가 왜 필요할까요?
복잡한 JS파일을 효율적으로 관리하기 위해서 모듈 단위 개발이 필요합니다.
모듈 단위 개발 문제점
-
한 페이지에 자바스크립트 파일이 여러 개가 됩니다.
파일 하나하나 HTTP 통신으로 서버에 요청하고, js 파일이 올 때까지 기다리기 때문에 화면 로딩 시간이 오래걸립니다.
유지보수를 위해 모듈화를 시켰지만, 결국 렌더링 퍼포먼스가 안 좋아집니다.
따라서, 개발은 파일 별로, 실제 브라우저에서는 하나의 파일만 있는 것이 좋습니다. -
나눈 모듈들이 서로 종속 관계라면?
종속 관계의 파일을 여러개로 나누면, 로드 순서가 중요합니다.
A 모듈(파일)에서 만든 기능을 B 모듈에서 사용한다면 A모듈이 B모듈보다 먼저 로드되어야 할 것 입니다.
모듈 번들러를 사용하면,
- 모듈의 종속 관계를 파악하고, 이를 하나의 파일로 만들어줍니다.
- js 파일 뿐 아니라 css, img, mp4등 다양한 리소스를 모두 모듈로 관리하여, 서로의 의존성을 관리합니다.
