JavaScript 모듈이란? (export, import)

JavaScript 모듈이란?

자바스크립트 모듈은 코드의 재사용성과 유지보수성을 높이기 위해 코드의 일부를 별도의 파일로 분리한 것을 의미합니다. 이 모듈을 통해 특정 코드 블록을 독립적으로 작성하고 관리할 수 있습니다. 모듈은 export와 import를 통해 서로 연결되며, 이를 통해 필요한 기능을 다른 파일에서 가져와 사용할 수 있습니다.

모듈의 필요성

• 코드 재사용성: 한 번 작성된 코드를 여러 곳에서 재사용 가능.
• 가독성: 코드를 기능별로 분리해 복잡도를 줄임.
• 유지보수성: 특정 기능의 코드만 수정하거나 교체 가능.
• 스코프 관리: 글로벌 스코프를 오염시키지 않음.

---

export와 import의 기본 사용법

export - 모듈에서 코드 내보내기

export 키워드를 사용해 함수, 변수, 클래스 등을 다른 파일에서 사용할 수 있도록 내보냅니다.

예제: 단일 내보내기 (named export)

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

예제: 기본 내보내기 (default export)

// greet.js
const greet = (name) => `안녕하세요, ${name}!`;
export default greet;

import - 모듈에서 코드 가져오기

import 키워드를 사용해 다른 파일에서 export된 코드를 가져옵니다.

예제: 단일 가져오기 (named import)

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

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

예제: 기본 가져오기 (default import)

// main.js
import greet from './greet.js';

console.log(greet('홍길동')); // 안녕하세요, 홍길동!

---

export와 import의 다양한 형태

별칭 사용하기 (as 키워드)

이름 충돌을 방지하거나 더 이해하기 쉬운 이름으로 사용할 때 유용합니다.

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

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

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

전체 모듈 가져오기

모든 named export를 하나의 객체로 가져옵니다.

// math.js
export const divide = (a, b) => a / b;
export const modulo = (a, b) => a % b;

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

console.log(MathUtils.divide(10, 2)); // 5
console.log(MathUtils.modulo(10, 3)); // 1

---

모듈의 실제 활용

예제: 쇼핑몰 주문 관리 시스템

상품 데이터 관리 (product.js)

// product.js
export const products = [
  { id: 1, name: '컴퓨터', price: 1000000 },
  { id: 2, name: '키보드', price: 50000 },
];

export const findProductById = (id) =>
  products.find((product) => product.id === id);

주문 처리 (order.js)

// order.js
import { findProductById } from './product.js';

export const createOrder = (productId, quantity) => {
  const product = findProductById(productId);
  if (!product) {
    throw new Error('상품을 찾을 수 없습니다.');
  }
  return {
    product,
    quantity,
    total: product.price * quantity,
  };
};

메인 실행 파일 (main.js)

// main.js
import { createOrder } from './order.js';

const order = createOrder(1, 2);
console.log(order);
// 출력: { product: { id: 1, name: '컴퓨터', price: 1000000 }, quantity: 2, total: 2000000 }

---

주의사항

1. 파일 확장자: import할 때 파일 확장자를 포함해야 합니다 (.js).

   import { add } from './math.js'; // O
   import { add } from './math'; // X

2. 순환 참조: 두 모듈이 서로를 import하면 의존성 문제가 발생할 수 있으므로 주의해야 합니다.
3. 상대 경로와 절대 경로: ./ 또는 ../로 상대 경로를 사용하는 것이 일반적이지만, 절대 경로를 설정하면 편리합니다.

---

결론

자바스크립트의 export와 import는 코드 모듈화를 지원하여 대규모 애플리케이션에서 유지보수성과 재사용성을 극대화할 수 있는 중요한 기능입니다. 실제 프로젝트에서 이러한 기능을 효율적으로 사용하려면 파일 구조를 명확히 하고, 모듈 간 의존성을 최소화하는 것이 중요합니다.