자바스크립트 모듈과 ES 모듈 시스템(ESM) 완벽 정리

---

📦 자바스크립트 모듈과 ES 모듈 시스템(ESM) 완벽 정리

현대 자바스크립트 개발에서 모듈화는 필수입니다. 이 글에서는 자바스크립트의 모듈 개념과 함께, 최신 표준인 **ES 모듈 시스템(ESM)**의 동작 방식, import / export 사용법, 그리고 CommonJS와의 차이점까지 한 번에 정리해드립니다.

---

🔸 모듈과 모듈 시스템이란?

모듈이란 독립적이고 재사용 가능한 프로그램의 단위를 의미합니다.
예: 로그인, 장바구니, 결제 모듈 등

자바스크립트에서는 독립된 파일 하나가 하나의 모듈입니다. 이 모듈은 변수, 함수, 객체 등을 내보내고 불러올 수 있으며, 이를 가능하게 해주는 구조가 바로 모듈 시스템입니다.

---

🔸 ES 모듈 시스템 (ESM)

✅ 정의

ESM은 ECMAScript의 표준 모듈 시스템으로, React, Vue, Svelte 등 대부분의 최신 프론트엔드 프레임워크에서 사용됩니다.

🛠️ Node.js에서 ESM 사용 방법

기본적으로 Node.js는 CommonJS(CJS)를 사용합니다. ESM을 사용하려면 package.json에 다음과 같이 설정하세요:

{
  "type": "module"
}

⚠️ 주의: JSON 파일에서는 마지막 항목을 제외하고 **모든 항목 뒤에 쉼표(,)**를 붙여야 합니다.

---

🔸 모듈 내보내기 (Export)

다른 파일에서 사용할 수 있도록 값을 외부로 노출합니다.

📍 개별 내보내기

export const PI = 3.141592;
export function getArea(r) {
  return PI * r * r;
}

📍 한 번에 묶어서 내보내기

const PI = 3.141592;
function getArea(r) {
  return PI * r * r;
}
export { PI, getArea };

---

🔸 모듈 불러오기 (Import)

다른 파일에서 내보낸 값을 불러오는 방식입니다.

📍 필요한 것만 불러오기

import { PI, getArea } from "./circle.js";

📍 모두 불러오기

import * as circle from "./circle.js";
console.log(circle.PI, circle.getArea(1));

---

🔸 기본값 내보내기 (Default Export)

모듈에서 하나의 값을 기본으로 지정해 내보낼 수 있습니다.

📍 내보내기

const PI = 3.14;
function getArea(r) { return PI * r * r; }

export default {
  PI,
  getArea
};

📍 불러오기

import circle from "./circle.js";
console.log(circle.getArea(1));

✅ 기본값은 중괄호 없이 자유로운 이름으로 불러올 수 있습니다.

⚠️ 기본값 없이 불러오면 오류

// export { PI, getArea };
// import circle from "./circle.js"; // ❌ 오류 발생

---

📌 요약 정리

항목 설명

모듈 내보내기	export, export default 사용
모듈 불러오기	import { name } 또는 import * as name
설정	Node.js에서는 "type": "module" 필요
기본값	export default → import name으로 불러오기

 

---

🔄 CommonJS vs ESM 비교

특징 CommonJS (CJS) ES 모듈 (ESM)

키워드	require, module.exports	import, export
로드 방식	동기적(Synchronous)	비동기적(Asynchronous)
사용 환경	Node.js 전용	Node.js + 브라우저
내보내기	단일 객체 또는 값	개별, 기본값 모두 가능
호환성	오래된 시스템과 호환성 높음	최신 시스템과 호환성 높음

🧠 Tip: 브라우저에서 모듈을 사용할 경우 <script type="module"> 속성을 추가해야 합니다.

---