JavaScript 모듈 시스템 설명 (예시 포함)

Source: Dev.to

Topics Covered

• import and export
  • Named exports & imports
  • Default exports & imports
  • Aliasing
  • Namespace imports
  • Combined imports
  • Dynamic imports
• Multiple dynamic imports using Promise.all

What Is a JavaScript Module?

JavaScript 모듈은 단순히 다음과 같은 파일을 의미합니다:

• 자체 스코프를 가짐
• 변수, 함수, 혹은 클래스를 export 할 수 있음
• 다른 모듈로부터 값을 import 할 수 있음

브라우저에서 모듈을 사용하려면:

Named Export

Named export는 하나의 파일에서 여러 값을 내보낼 수 있게 해줍니다.

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Named Import

Named export를 가져올 때는 이름이 정확히 일치해야 합니다.

// main.js
import { add, subtract } from "./math.js";

console.log(add(5, 3));      // 8
console.log(subtract(5, 3)); // 2

Default Export

모듈은 하나의 default export만 가질 수 있습니다. 파일이 하나의 주요 기능을 제공할 때 유용합니다.

// logger.js
export default function log(message) {
  console.log("Log:", message);
}

Default Import

Default export는 어떤 변수 이름으로든 가져올 수 있습니다.

// main.js
import logger from "./logger.js";

logger("Hello Dev.to!");

Aliasing (Renaming Imports)

Aliasing은 이름 충돌을 피하거나 가독성을 높이는 데 도움이 됩니다.

// math.js
export const multiply = (a, b) => a * b;

// main.js
import { multiply as mul } from "./math.js";

console.log(mul(4, 5)); // 20

Namespace Import (* as)

모듈이 많은 값을 내보낼 경우, 모든 것을 객체 형태로 가져올 수 있습니다.

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import * as MathUtils from "./math.js";

console.log(MathUtils.add(10, 5));      // 15
console.log(MathUtils.subtract(10, 5)); // 5

Combined Import (Default + Named)

default와 named import를 하나의 문장에 결합할 수 있습니다.

// user.js
export default function getUser() {
  return { name: "Rayan", role: "Developer" };
}

export const isAdmin = false;

// main.js
import getUser, { isAdmin } from "./user.js";

console.log(getUser());
console.log(isAdmin);

Dynamic Import (import())

Dynamic import는 페이지 로드 시점이 아니라 런타임에 모듈을 로드합니다. 흔히 코드 스플리팅, 레이지 로딩, 성능 최적화 등에 사용됩니다.

// math.js
export const add = (a, b) => a + b;

// main.js
async function loadMath() {
  const math = await import("./math.js");
  console.log(math.add(2, 3)); // 5
}

loadMath();

⚠️ import()는 항상 Promise를 반환합니다.

Multiple Dynamic Imports Using Promise.all

여러 모듈을 병렬로 로드하려면 Promise.all을 사용합니다.

// math.js
export const add = (a, b) => a + b;

// string.js
export const upper = (text) => text.toUpperCase();

// main.js
async function loadModules() {
  const [math, string] = await Promise.all([
    import("./math.js"),
    import("./string.js")
  ]);

  console.log(math.add(3, 4));         // 7
  console.log(string.upper("hello")); // HELLO
}

loadModules();

Key Rules to Remember

• 하나의 파일에 여러 named export를 가질 수 있습니다.
• 하나의 파일에 오직 하나의 default export만 가질 수 있습니다.
• Named import는 export 이름과 정확히 일치해야 합니다.
• Default import는 자유롭게 이름을 바꿀 수 있습니다.
• Dynamic import는 항상 Promise를 반환합니다.

Final Thoughts

JavaScript 모듈 시스템은 현대 개발의 기반입니다. React, Vue, Node.js와 같은 프레임워크가 크게 의존하고 있습니다. import와 export를 마스터하면 코드는:

• 유지보수가 쉬워지고
• 확장성이 높아지며
• 구조가 더 체계적이 됩니다

Happy coding 🚀