Javascript - 자바스크립트의 모듈 시스템

자바스크립트의 모듈 시스템 정리

1. 모듈 시스템이란?

코드를 기능별로 파일 단위로 나누고, 필요한 모듈만 import하여 사용하는 구조.
✔ 목적: 유지보수성 향상, 재사용성 증가, 의존성 명확화.

2. 주요 모듈 시스템 종류

✔ ESM (ECMAScript Module): import/export 사용, 공식 표준.
✔ CommonJS: require/module.exports, Node.js 구버전에서 사용.
✔ AMD: define/require, 비동기 로딩 지원, 브라우저 전용(require.js).
✔ UMD: ESM + CommonJS + 전역 스코프 호환, 라이브러리 배포용.

3. 예제 비교

📦 ESM
// utils.js
export const add = (a, b) => a + b;
// main.js
import { add } from './utils.js';

📦 CommonJS
// utils.js
exports.add = (a, b) => a + b;
// main.js
const { add } = require('./utils');

📦 AMD
define(['utils'], function(utils) {
const result = utils.add(1, 2);
});

4. ESM이 강력한 이유

✔ 정적 분석: 빌드 시 의존성 분석이 가능.
✔ 트리 쉐이킹: 사용되지 않는 코드 제거로 번들 크기 최소화.
✔ 비동기 로딩: import()로 lazy-loading 및 코드 스플리팅 가능.
✔ 타입스크립트, 번들러(Vite, Webpack)와 궁합 좋음.

5. ESM vs CommonJS vs AMD

✔ ESM: 브라우저 + Node.js (현대)
✔ CommonJS: Node.js 구버전 / 동기 로딩
✔ AMD: 브라우저 / require.js / Monaco 등
✔ 공통점: 모두 모듈화를 위한 시스템이나 문법과 로딩 방식이 다름.

6. 서로 혼용 가능한가?

❌ 원칙적으론 불가능. (import vs require 충돌)
✔ 가능 조건: 번들러가 내부적으로 트랜스파일하거나 래핑해줄 때만 가능 (예: Webpack, Babel).
예: React + Monaco Editor(AMD 기반) 같이 사용할 때.

7. 언제 무엇을 써야 하나?

🎯 신규 프로젝트: ESM 사용 권장 (브라우저/Node.js 모두 호환).
🔧 레거시 Node.js: CommonJS 유지 가능.
📦 외부 라이브러리: 필요 시 UMD/AMD 혼용 불가피, 번들러 설정 주의.

8. 요약

❌ ESM, CommonJS, AMD 혼용? 번들러 없이는 충돌 발생.
✔ ESM 추천 이유: 모던 생태계(타입스크립트, React, Vite 등)와의 최적 궁합.
📌 기억할 것: import/export = 표준, 미래, 정적 최적화의 핵심.