JavaScript 모듈 | ES6 Modules, CommonJS 완벽 정리

들어가며

모듈이란?

모듈(Module)은 파일(또는 단위) 단위로 책임을 나누어 다시 가져다 쓰기 쉽게 만든 구조입니다. 모듈을 쓰면 얻는 점:

• ✅ 코드 재사용: 한 번 작성, 여러 곳에서 사용
• ✅ 네임스페이스: 변수명 충돌 방지
• ✅ 유지보수: 관련 코드를 함께 관리
• ✅ 의존성 관리: 필요한 모듈만 로드

---

실전 경험에서 배운 교훈

이 기술을 실무 프로젝트에 처음 도입했을 때, 공식 문서만으로는 알 수 없었던 많은 함정들이 있었습니다. 특히 프로덕션 환경에서 발생하는 엣지 케이스들은 로컬 개발 환경에서는 재현조차 되지 않았죠.

가장 어려웠던 점은 성능 최적화였습니다. 처음엔 “동작만 하면 되겠지”라고 생각했지만, 실제 사용자 트래픽이 몰리면서 병목 지점들이 하나씩 드러났습니다. 특히 데이터베이스 쿼리 최적화, 캐싱 전략, 에러 핸들링 구조 등은 여러 번의 장애를 겪으면서 개선해 나갔습니다.

이 글에서는 그런 시행착오를 통해 얻은 실전 노하우와, “이렇게 하면 안 된다”는 교훈들을 함께 정리했습니다. 특히 트러블슈팅 섹션은 실제 장애 대응 경험을 바탕으로 작성했으니, 비슷한 문제를 마주했을 때 참고하시면 도움이 될 것입니다.

CommonJS와 ES Modules 한눈에

항목	CommonJS (CJS)	ES Modules (ESM)
문법	require(), module.exports	import, export
로딩 시점	런타임에 경로를 바꿔 require 가능	정적 import는 파일 상단에서 분석(트리 쉐이킹에 유리)
대표 환경	Node.js 레거시·npm 패키지	브라우저 표준, Node ("type": "module")
this (최상위)	module.exports	undefined(엄격 모듈)

• 새 프로젝트: 가능하면 ESM을 기본으로 하고, 구형 패키지는 import x from 'pkg'가 안 될 때만 동적 import()나 interop을 씁니다.
• Node에서 혼용: 한 파일이 CJS냐 ESM이냐는 package.json의 "type"과 확장자(.cjs / .mjs)로 갈립니다.

---

1. ES6 Modules (ES Modules)

export: 내보내기

// math.js
// Named export (여러 개 가능)
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}
export const PI = 3.14159;
// 한 번에 export
function multiply(a, b) {
    return a * b;
}
function divide(a, b) {
    return a / b;
}
export { multiply, divide };
// 이름 변경하여 export
function power(a, b) {
    return a ** b;
}
export { power as pow };

import: 가져오기

// main.js
// Named import
import { add, subtract, PI } from './math.js';
console.log(add(10, 20));      // 30
console.log(subtract(20, 10)); // 10
console.log(PI);               // 3.14159
// 이름 변경하여 import
import { pow as power } from './math.js';
console.log(power(2, 3));  // 8
// 모두 import
import * as math from './math.js';
console.log(math.add(5, 3));  // 8
console.log(math.PI);         // 3.14159
// 부작용만 실행 (내보내는 값 없이 초기화 코드만)
import './polyfills.js';
// 다른 모듈에서 다시 내보내기(re-export)
// export { add } from './math.js';
// export { default as User } from './user.js';

default export

// user.js
// Default export (모듈당 1개만)
export default class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
    }
    
    greet() {
        console.log(`Hello, ${this.name}!`);
    }
}
// 또는
class User {
    // ...
}
export default User;
// 함수도 가능
export default function greet(name) {
    console.log(`Hello, ${name}!`);
}

// main.js
// Default import (이름 자유롭게)
import User from './user.js';
const user = new User("홍길동", "[email protected]");
user.greet();  // Hello, 홍길동!
// Named + Default 함께
import User, { formatDate, validateEmail } from './user.js';

default export vs named export 선택 가이드

	default export	named export
개수	파일당 하나	여러 개
가져올 때 이름	import MyThing처럼 자유롭게 바꿔 쓰기 쉬움	import { a, b }처럼 이름이 고정(별칭 as 가능)
자동완성·리팩터	이름이 파일마다 달라질 수 있어 추적이 약함	IDE가 정확히 따라감
적합한 경우	React 단일 컴포넌트, “이 파일의 대표 하나”	유틸 함수 모음, 여러 상수·타입
실무 팁: 라이브러리 API는 named가 리팩터링에 유리하고, 앱 코드에서 페이지 단위 컴포넌트 하나만 내보낼 때 default를 쓰는 패턴도 흔합니다. 한 파일에서 default와 named를 섞는 것도 가능합니다.

---

2. CommonJS (Node.js)

module.exports

// math.js
function add(a, b) {
    return a + b;
}
function subtract(a, b) {
    return a - b;
}
const PI = 3.14159;
// 방법 1: 객체로 내보내기
module.exports = {
    add,
    subtract,
    PI
};
// 방법 2: 개별 할당
module.exports.add = add;
module.exports.subtract = subtract;
module.exports.PI = PI;
// 방법 3: exports 축약
exports.add = add;
exports.subtract = subtract;

require

// main.js
// 전체 가져오기
const math = require('./math.js');
console.log(math.add(10, 20));  // 30
console.log(math.PI);           // 3.14159
// 구조 분해
const { add, subtract } = require('./math.js');
console.log(add(10, 20));  // 30
// 내장 모듈
const fs = require('fs');
const path = require('path');
const http = require('http');

ES Modules vs CommonJS

특징	ES Modules	CommonJS
문법	import/export	require/module.exports
환경	브라우저 + Node.js	Node.js
로딩	정적 (컴파일 타임)	동적 (런타임)
비동기	✅	❌
Tree Shaking	✅	❌
파일 확장자	.mjs 또는 package.json	.js
Interop 요약: ESM에서 CJS 모듈을 가져올 때는 환경에 따라 default로 한 번 감싸진 값이 올 수 있습니다(import pkg from 'cjs-pkg'). 반대로 CJS에서 ESM만 제공하는 패키지는 import()로 비동기 로드하거나, Node 문서의 createRequire를 참고합니다.

---

3. 브라우저에서 모듈 사용

type=“module”

<!DOCTYPE html>
<html>
<head>
    <title>ES Modules</title>
</head>
<body>
    <h1>모듈 테스트</h1>
    
    <script type="module">
        // math.js에서 import
        import { add, subtract } from './math.js';
        
        console.log(add(10, 20));  // 30
        
        // 동적 import
        const button = document.querySelector('#loadBtn');
        button.addEventListener('click', async () => {
            const module = await import('./heavy-module.js');
            module.doSomething();
        });
    </script>
</body>
</html>

동적 import

// 조건부 로딩
async function loadModule(moduleName) {
    if (moduleName === 'math') {
        const math = await import('./math.js');
        return math;
    }
}
// 사용
const math = await loadModule('math');
console.log(math.add(5, 3));
// 코드 스플리팅
button.addEventListener('click', async () => {
    const { default: Chart } = await import('./chart.js');
    new Chart('#myChart');
});

---

4. 실전 예제

예제 1: 유틸리티 모듈

// utils/string.js
export function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}
export function truncate(str, maxLength) {
    if (str.length <= maxLength) return str;
    return str.slice(0, maxLength) + '...';
}
export function slugify(str) {
    return str
        .toLowerCase()
        .replace(/\s+/g, '-')
        .replace(/[^\w-]/g, ');
}

// utils/array.js
export function chunk(arr, size) {
    const result = [];
    for (let i = 0; i < arr.length; i += size) {
        result.push(arr.slice(i, i + size));
    }
    return result;
}
export function unique(arr) {
    return [...new Set(arr)];
}
export function shuffle(arr) {
    const copy = [...arr];
    for (let i = copy.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [copy[i], copy[j]] = [copy[j], copy[i]];
    }
    return copy;
}

// utils/index.js (배럴 파일)
export * from './string.js';
export * from './array.js';
// 또는 선택적으로
export { capitalize, truncate } from './string.js';
export { chunk, unique } from './array.js';

// main.js
import { capitalize, chunk } from './utils/index.js';
console.log(capitalize("hello"));  // Hello
console.log(chunk([1, 2, 3, 4, 5], 2));  // [[1, 2], [3, 4], [5]]

예제 2: API 클라이언트

// api/client.js
const BASE_URL = 'https://api.example.com';
export class APIClient {
    constructor(apiKey) {
        this.apiKey = apiKey;
    }
    
    async request(endpoint, options = {}) {
        const url = `${BASE_URL}${endpoint}`;
        const headers = {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${this.apiKey}`,
            ...options.headers
        };
        
        const response = await fetch(url, { ...options, headers });
        
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        
        return await response.json();
    }
    
    get(endpoint) {
        return this.request(endpoint, { method: 'GET' });
    }
    
    post(endpoint, data) {
        return this.request(endpoint, {
            method: 'POST',
            body: JSON.stringify(data)
        });
    }
    
    put(endpoint, data) {
        return this.request(endpoint, {
            method: 'PUT',
            body: JSON.stringify(data)
        });
    }
    
    delete(endpoint) {
        return this.request(endpoint, { method: 'DELETE' });
    }
}
export default APIClient;

// api/users.js
// 필요한 모듈 import
import APIClient from './client.js';
export class UserAPI {
    constructor(apiKey) {
        this.client = new APIClient(apiKey);
    }
    
    async getUsers() {
        return await this.client.get('/users');
    }
    
    async getUser(id) {
        return await this.client.get(`/users/${id}`);
    }
    
    async createUser(userData) {
        return await this.client.post('/users', userData);
    }
    
    async updateUser(id, userData) {
        return await this.client.put(`/users/${id}`, userData);
    }
    
    async deleteUser(id) {
        return await this.client.delete(`/users/${id}`);
    }
}

// main.js
import { UserAPI } from './api/users.js';
const api = new UserAPI('your-api-key');
async function main() {
    try {
        const users = await api.getUsers();
        console.log(users);
        
        const newUser = await api.createUser({
            name: "홍길동",
            email: "[email protected]"
        });
        console.log("생성됨:", newUser);
    } catch (error) {
        console.error("에러:", error);
    }
}
main();

---

번들러와 빌드: Webpack, Vite

브라우저는 ESM을 네이티브로 로드할 수 있지만, 실제 프로덕션에서는 다음 이유로 번들러를 씁니다.

• 여러 파일·npm 패키지를 한(또는 몇) 개의 JS 파일으로 묶기
• 난독화·압축, 코드 스플리팅(동적 import 단위로 청크 분리)
• TypeScript·JSX, CSS import 등 전처리

Webpack

• 역할: 진입점(entry)부터 의존성 그래프를 따라 모듈을 묶는 도구입니다. 로더(CSS, TS 등)와 플러그인으로 확장합니다.
• 특징: 설정이 세밀하게 가능하고, 대규모 레거시 프로젝트에서 여전히 많이 씁니다.
• 개발 서버: webpack-dev-server로 HMR(핫 리로드) 등을 구성합니다.

Vite

• 역할: 개발 시 네이티브 ESM으로 빠르게 서빙하고, 프로덕션 빌드는 Rollup 기반으로 묶는 방식이 일반적입니다.
• 특징: 초기 설정이 단순하고, Vue/React 템플릿과 궁합이 좋습니다. import 분석이 자연스러워 DX(개발 경험)가 가볍습니다.

선택 가이드 (요약)

상황	추천
새 SPA, 빠른 프로토타입	Vite부터 검토
기존 Webpack 설정·플러그인에 깊이 의존	Webpack 유지 또는 점진적 마이그레이션
라이브러리만 배포	Rollup/tsup 등도 선택지
동적 import()는 Webpack/Vite 모두에서 별도 청크로 떼어 내는 데 자주 쓰입니다.

---

5. Node.js에서 ES Modules 사용

package.json 설정

{
  "name": "my-project",
  "version": "1.0.0",
  "type": "module"
}

또는 파일 확장자를 .mjs로 사용:

// math.mjs
// 실행 예제
export function add(a, b) {
    return a + b;
}

// main.mjs
import { add } from './math.mjs';
console.log(add(10, 20));

---

6. 자주 하는 실수와 해결법

실수 1: 순환 참조

// ❌ 순환 참조
// a.js
import { b } from './b.js';
export const a = 'A';
// b.js
import { a } from './a.js';
export const b = 'B';
// ✅ 해결: 구조 개선
// common.js
export const a = 'A';
export const b = 'B';
// a.js
import { b } from './common.js';
// b.js
import { a } from './common.js';

실수 2: 잘못된 경로

// ❌ 확장자 누락 (브라우저)
import { add } from './math';  // 에러!
// ✅ 확장자 포함
import { add } from './math.js';
// Node.js는 확장자 생략 가능 (CommonJS)
const math = require('./math');  // OK

실수 3: export default 여러 개

// ❌ default는 1개만
export default function add() {}
export default function subtract() {}  // SyntaxError
// ✅ named export 사용
export function add() {}
export function subtract() {}

---

정리

핵심 요약

1. ES Modules:
   • export: 내보내기
   • import: 가져오기
   • Named export: 여러 개
   • Default export: 1개
2. CommonJS:
   • module.exports: 내보내기
   • require(): 가져오기
   • Node.js 기본
3. 브라우저:
   • <script type="module">
   • 동적 import: await import()
4. 패턴:
   • 배럴 파일: index.js
   • API 클라이언트
   • 유틸리티 모듈

다음 단계

• JavaScript 에러 처리
• JavaScript 디자인 패턴
• TypeScript 시작하기

---

관련 글

• Node.js 모듈 시스템 | CommonJS와 ES Modules 완벽 가이드
• C++20 Modules 완벽 가이드 | 헤더 파일을 넘어서
• C++20 Modules |
• C++ 기존 프로젝트를 Module로 전환 | 단계별 마이그레이션 [#24-2]
• JavaScript 클래스 | ES6 Class 문법 완벽 정리

심화 부록: 구현·운영 관점

이 부록은 앞선 본문에서 다룬 주제(「JavaScript 모듈 | ES6 Modules, CommonJS 완벽 정리」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.

내부 동작과 핵심 메커니즘

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(런타임·게이트웨이·프로세스)
  participant D as 의존성(API·DB·큐·파일)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

• 불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
• 결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
• 경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
• 백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.

프로덕션 운영 패턴

영역	운영 관점 질문
관측성	요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성	입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성	재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능	캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포	롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가
용량	피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.

확장 예시: 엔드투엔드 미니 시나리오

앞선 본문 주제(「JavaScript 모듈 | ES6 Modules, CommonJS 완벽 정리」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

1. 입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
2. 핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
3. 실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
4. 호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
5. 부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)
  authorize(validated, ctx)
  result = domainCore(validated)
  persistOrEmit(result, idempotentKey)
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상	가능 원인	조치
간헐적 실패	레이스, 타임아웃, 외부 의존성, DNS	최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하	N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스	프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가	캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납	상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패	환경 변수, 권한, 플랫폼 차이, lockfile	CI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정 불일치	프로필·시크릿·기본값, 리전	스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화
데이터 불일치	비멱등 재시도, 부분 쓰기, 캐시 무효화 누락	멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.

---

자주 묻는 질문 (FAQ)

Q. 이 내용을 실무에서 언제 쓰나요?

A. JavaScript 모듈: ES6 Modules, CommonJS 완벽 정리. CommonJS와 ES Modules 한눈에부터 핵심 개념·패턴·실무 함정을 코드 예제로 풉니다. JavaScript·모듈·ES6 중심으… 실무에서는 위 본문의 예제와 선택 가이드를 참고해 적용하면 됩니다.

Q. 선행으로 읽으면 좋은 글은?

A. 각 글 하단의 이전 글 또는 관련 글 링크를 따라가면 순서대로 배울 수 있습니다. JavaScript 시리즈 목차에서 전체 흐름을 확인할 수 있습니다.

Q. 더 깊이 공부하려면?

A. cppreference와 해당 라이브러리 공식 문서를 참고하세요. 글 말미의 참고 자료 링크도 활용하면 좋습니다.

---

같이 보면 좋은 글 (내부 링크)

이 주제와 연결되는 다른 글입니다.

• [JavaScript Modules | ES Modules and CommonJS Explained](/en/blog/javascript-series-08-modules/
• Node.js 모듈 시스템 | CommonJS와 ES Modules 완벽 가이드
• TypeScript 시작하기 | 설치, 설정, 기본 문법

---

이 글에서 다루는 키워드 (관련 검색어)

JavaScript, 모듈, ES6, import, export, CommonJS, 번들러 등으로 검색하시면 이 글이 도움이 됩니다.