ESM(ES Modules)

ES Modules는 JavaScript의 공식 표준 모듈 시스템이다. import/export 문법을 사용하여 코드를 독립적인 파일로 분리하고, 필요한 기능만 가져와 사용할 수 있게 한다.

해당 개념이 필요한 이유

• JavaScript는 원래 모듈 시스템이 없었다 → 모든 코드가 전역 스코프를 공유
• 앱이 커지면서 코드 관리, 의존성 관리, 네임스페이스 충돌 문제 발생
• CommonJS(Node.js), AMD(RequireJS) 등 비표준 모듈 시스템이 등장했지만 브라우저 네이티브 지원 부재
• ES2015에서 import/export 표준화 → 현대 브라우저가 네이티브로 지원

AS-IS (모듈 시스템 없던 시절)

<!-- 전역 스코프 오염, 순서 의존성, 수동 관리 -->
<script src="jquery.js"></script>
<script src="lodash.js"></script>
<script src="app.js"></script>
<!-- app.js에서 $ 와 _ 를 전역으로 접근 -->

TO-BE (ES Modules)

// 명시적 의존성, 스코프 격리, 자동 관리
import { debounce } from './utils.js';
import { render } from './dom.js';
 
export function App() { /* ... */ }

핵심 문법

Named Export / Import

// math.js
export const PI = 3.14;
export function add(a, b) { return a + b; }
 
// main.js
import { PI, add } from './math.js';

Default Export / Import

// Button.js
export default function Button() { /* ... */ }
 
// main.js
import Button from './Button.js';

Dynamic Import (지연 로딩)

button.addEventListener('click', async () => {
  const { Chart } = await import('./Chart.js');
  new Chart(data);
});

브라우저에서 사용

<!-- type="module" 필수 -->
<script type="module" src="main.js"></script>

모듈 스크립트의 특징:

• 자동 strict mode 적용
• 자동 defer (DOM 파싱 후 실행)
• 한 번만 실행 (중복 참조해도)
• 자체 스코프 (전역 오염 없음)

ESM vs CommonJS

특성	ESM	CommonJS
문법	import/export	require()/module.exports
로딩	비동기 (브라우저 최적화)	동기 (서버 최적화)
정적 분석	가능 (tree-shaking 지원)	불가
브라우저 지원	네이티브	번들러 필요
환경	브라우저 + Node.js	주로 Node.js

Vite에서 ESM이 중요한 이유: Vite는 개발 서버에서 Native ESM을 활용하여 브라우저가 필요한 모듈만 on-demand로 요청하게 한다. 이것이 기존 번들러 대비 빠른 서버 시작과 HMR을 가능하게 하는 핵심 원리다.

참고 문서

• MDN - JavaScript Modules