모듈 시스템

코드가 커지면 파일을 나누어 관리해야 합니다. 모듈 시스템은 파일끼리 기능을 주고받는 표준 방법입니다. 이번 레슨에서는 ESM(ES Modules) 을 중심으로 모듈을 다룹니다.

학습 목표

• named export 와 default export 를 구분해 사용할 수 있다
• 다양한 형태의 import 문법을 작성할 수 있다
• 모듈 스코프의 특성을 이해한다
• 동적 import() 로 필요할 때 모듈을 불러올 수 있다
• CommonJS 와 ESM 의 차이를 설명할 수 있다

named export / import

이름을 붙여 여러 개를 내보낼 수 있습니다.

// math.js
export const PI = 3.14159;
export function add(a, b) {
  return a + b;
}

// 또는 한꺼번에
const sub = (a, b) => a - b;
export { sub };

// app.js
import { PI, add } from './math.js';
console.log(add(2, 3)); // → 5

// 이름 바꾸기
import { add as plus } from './math.js';

// 전부 가져오기
import * as math from './math.js';
console.log(math.PI); // → 3.14159

default export / import

파일당 하나만 가능한 "대표" 내보내기입니다.

// User.js
export default class User {
  constructor(name) {
    this.name = name;
  }
}

// app.js — 중괄호 없이, 이름은 자유롭게
import User from './User.js';
import Whatever from './User.js'; // 같은 것을 다른 이름으로

named 와 default 를 함께 가져올 수도 있습니다.

import User, { PI } from './module.js';

모듈 스코프

각 모듈은 독립된 스코프를 가집니다. 명시적으로 export 하지 않으면 다른 파일에서 접근할 수 없습니다.

// counter.js
let count = 0; // 이 파일 안에서만 보임 (전역 오염 없음)
export function inc() {
  return ++count;
}

💡 TIP — 모듈은 처음 import 될 때 한 번만 평가되고 결과가 캐시됩니다. 여러 파일에서 같은 모듈을 import 해도 상태를 공유합니다.

또한 ESM 은 기본적으로 strict mode 로 동작합니다.

동적 import()

조건이 맞을 때만, 또는 사용자 동작 시점에 모듈을 불러올 수 있습니다. import() 는 Promise 를 반환합니다.

button.addEventListener('click', async () => {
  const { renderChart } = await import('./chart.js'); // 필요할 때 로드
  renderChart();
});

💡 TIP — 무거운 라이브러리를 동적 import 로 미루면 초기 로딩 속도를 높일 수 있습니다(코드 분할).

CommonJS vs ESM

Node.js 에는 오래된 CommonJS 방식도 있습니다.

// CommonJS (Node.js 전통 방식)
const fs = require('fs');
module.exports = { add };

// ESM (표준)
import fs from 'fs';
export { add };

⚠️ 주의 — 브라우저에서 ESM 을 쓰려면 <script type="module" src="app.js"> 처럼 type="module" 을 지정해야 합니다.

요약

• named export 는 여러 개, default export 는 파일당 하나다
• import 시 as 로 이름을 바꾸고 * as 로 전부 가져올 수 있다
• 모듈은 독립 스코프를 가지며 한 번만 평가·캐시된다
• 동적 import() 는 Promise 를 반환하며 코드 분할에 쓰인다
• CommonJS(require)는 Node 전통 방식, ESM(import)이 현대 표준이다

연습문제

1. math.js 에 add·multiply 를 named export 하고 app.js 에서 가져와 사용하세요.
2. 클래스 하나를 default export 하고, 다른 파일에서 원하는 이름으로 import 하세요.
3. 모듈 스코프 변수가 외부에서 직접 보이지 않음을 확인하는 예제를 작성하세요.

   힌트 — export 하지 않은 변수를 import 하려 하면 어떻게 되나요?

4. 버튼 클릭 시에만 동적 import() 로 모듈을 불러오는 코드를 작성하세요.