ES 모듈: 파일 사이의 공개 경계 만들기

"export는 밖에서 써도 되는 계약이고, 나머지는 파일 안의 구현이야."

이름 있는 내보내기와 가져오기

export function parse() {}처럼 이름을 내보내면 다른 파일에서 import { parse } from './parser.js'로 가져와. 이름이 연결되어 있어 자동 완성과 리팩터링이 잘 작동하고, 한 모듈이 여러 계약을 내보내기도 자연스러워.

default export는 가져오는 쪽이 임의 이름을 붙일 수 있어 편하지만, 코드베이스 전체에서 같은 대상을 여러 이름으로 부르기 쉬워. 기본 내보내기가 틀린 것은 아니지만 팀 규칙과 프레임워크 요구가 없다면 이름 있는 내보내기가 추적하기 편한 경우가 많아.

재내보내기와 순환 의존성

export { parse } from './parser.js'나 export * from ...로 공개 진입점을 만들 수 있어. 다만 모든 내부 파일을 한 배럴에서 무차별 재내보내면 의존 방향이 흐려지고 이름 충돌이나 순환 참조가 생기기 쉬워.

Node가 파일을 ESM으로 다루게 하려면 package.json에 "type": "module"을 두거나 .mjs/.mts 확장자를 사용해야 해. 둘 다 없으면 Node는 CommonJS로 돌아가며 require와 module.exports 의미가 적용돼.

ESM 모델

파일에 import나 export가 있으면 그 파일은 자체 모듈 범위를 가져서 선언이 전역으로 새지 않아. ESM은 브라우저와 Node, Bun, Deno가 네이티브로 이해하는 현대 JavaScript 모듈 표준이야.

모듈은 파일 나누기보다 의존 방향을 선언하는 장치야. 내보내는 이름을 작게 유지하고, 타입 검사뿐 아니라 목표 런타임의 해석 규칙으로 검증해.

Code

Named export, default export, re-export·typescript

// math.ts — 여러 named export.
export function add(a: number, b: number): number { return a + b }
export function sub(a: number, b: number): number { return a - b }
export const PI = 3.14159;

// main.ts
import { add, sub, PI } from './math';
import * as math from './math';            // namespace import
import { add as plus } from './math';      // alias

add(1, 2);            // 3
math.PI;              // 3.14159
plus(1, 2);           // 3 — 같은 함수, 다른 이름

// component.ts — default export.
export default function Button() { /* ... */ }

// app.ts
import Button from './component';           // import 이름 너가
import AnyName from './component';           // 작동도 함 — default export 가 이름 유연

// Barrel 에서 re-export.
// index.ts
export { add, sub, PI } from './math';
export { default as Button } from './component';

Exercise

add.ts와 sub.ts에서 함수를 이름으로 내보내고 index.ts에서 둘을 다시 내보내. 네 번째 파일에서는 index.ts만 통해 두 함수를 가져와 타입이 재내보내기 경계를 따라오는지 확인해.

Hint

소비자는 한 진입점에서 가져오게 해. 그러면 내부 디렉터리 구조를 바꿔도 공개 경계를 유지하기 쉬워.

이름 있는 내보내기와 가져오기

재내보내기와 순환 의존성

ESM 모델

Code

External links

Exercise

Progress

댓글 0