📦 ESM (ECMAScript Modules) 정리

ESM(ECMAScript Modules)은 JavaScript의 공식 모듈 시스템입니다.

import something from "module";
export default something;

기존 CommonJS(require, module.exports)를 대체하기 위해 등장했습니다.

1️⃣ ESM 필요성

❗️ 기존 CommonJS의 문제

• 브라우저 표준이 아님
• 동기 방식 → 성능 한계
• 정적 분석 불가능 → tree-shaking 어려움

👉 ESM은 이를 해결하기 위해 등장

💡 tree-shaking
JavaScript 애플리케이션 빌드 과정에서 사용되지 않는 코드(Dead Code)를 자동으로 제거하여 번들 파일 크기를 줄이고 웹 성능을 최적화하는 기술

2️⃣ ESM vs CommonJS

3️⃣ ESM 사용하는 방법

1. package.json 설정

"type": "module"

👉 이 설정이 있으면 .js 파일이 ESM으로 동작

2. 파일 확장자

4️⃣ 기본 문법

🔹 export

export const a = 1;
export default function () {}

🔹 import

import a from "./a.js";
import { b } from "./b.js";

5️⃣ ESM에서 달라지는 점

1. require 사용 불가

const fs = require("fs"); // ❌
import fs from "fs"; // ✅

2. __dirname 없음

import { dirname } from "path"; 
import { fileURLToPath } from "url"; 
const __filename = fileURLToPath(import.meta.url); 
const __dirname = dirname(__filename);

3. 확장자 명시 필수

import a from "./a"; // ❌ 
import a from "./a.js"; // ✅

4. import는 최상단에서만 가능

// ❌ 
if (true) { 
	import a from "a"; 
}

✍️ 한 줄 정리

ESM = JavaScript의 공식 모듈 시스템 (import/export)