[JavaScript] 자바스크립트 기초 복습 part10

자바스크립트 모듈 정리

---

📌 모듈이란?

재사용 가능한 코드 조각으로, 함수, 변수, 클래스, 파일 등을 포함합니다.

✅ 각 모듈은 독립성을 가짐
✅ 다른 코드 내부에서 재사용 가능
✅ 네임스페이스 관리가 가능하여 충돌 방지
✅ 스코프가 격리되어 외부 접근 제한 가능

---

📌 ES6 모듈

ES2015(ES6) 이후부터 JavaScript에서는 공식적으로 모듈 시스템을 도입했습니다. 이를 통해 import와 export 문을 사용하여 모듈을 관리할 수 있습니다.

🔹 Node.js 환경에서 모듈 사용

Node.js에서는 ES6 모듈 시스템을 사용하려면 package.json 파일에 다음을 추가해야 합니다.

{
  "type": "module"
}

🔹 프로젝트 루트 디렉토리에 package.json 파일 추가

npm init -y

---

📌 모듈 가져오기 (import)

🔹 1) 이름 붙여 가져오기 (Named Import)

여러 개의 export가 가능하며, 중괄호 {} 안에서 ,(콤마)로 구분하여 필요한 항목을 가져올 수 있습니다.

import { PI as PIE, multiply as mp } from './module02.js';

console.log(PIE); // 3.14159
console.log(mp(2, 3)); // 6

🔹 2) 전체 모듈 가져오기 (Namespace Import)

모든 기능을 하나의 객체로 가져와서 사용할 수 있습니다.

import * as module2 from './module02.js';

console.log(module2.PI);
console.log(module2.multiply(4, 6));

🔹 3) 기본 가져오기 (Default Import)

기본으로 export default 된 항목을 가져올 때는 중괄호 {} 없이 사용할 수 있으며, 가져온 모듈명을 변경하여 사용할 수도 있습니다.

import sum from './module02.js';

console.log(sum(4, 6)); // 10

---

📌 모듈 내보내기 (export)

🔹 1) 이름 붙여 내보내기 (Named Export)

하나의 모듈에서 여러 항목을 내보낼 수 있으며, 각 항목이 고유한 이름으로 참조됩니다.

export const PI = 3.14159;

export function multiply(x, y) {
  return x * y;
}

사용하는 모듈에서:

import { PI, multiply } from './module02.js';
console.log(PI);
console.log(multiply(2, 3));

🔹 2) 기본 내보내기 (Default Export)

모듈 당 하나의 항목만 기본 내보내기로 설정할 수 있으며, 보통 주요 기능이 있는 경우 사용됩니다.

export default function add(x, y) {
  return x + y;
}

사용하는 모듈에서:

import sum from './module02.js';
console.log(sum(4, 6));

---

🚀 모듈을 사용하면 코드의 재사용성 증가!