Node.js 모듈 시스템 완전 정복: CommonJS vs ES Modules

Node.js를 사용하다 보면 require, import, module.exports, export 같은 모듈 관련 키워드들을 자주 접하게 됩니다.

이 블로그에서는 Node.js에서 사용하는 두 가지 대표적인 모듈 시스템, CommonJS와 ES Modules(ESM)에 대해 개념부터 실무 적용까지 깔끔하게 정리해보겠습니다.

 

---

 

CommonJS란?

CommonJS는 Node.js에서 기본적으로 사용되는 모듈 시스템입니다.
JavaScript는 원래 모듈 개념이 없었지만, Node.js는 서버 사이드에서 코드를 모듈화하기 위해 CommonJS라는 방식을 도입했습니다.

✅ 주요 특징

• require()로 모듈을 불러오고
• module.exports 또는 exports로 외부에 기능을 내보냅니다
• 동기 방식으로 모듈을 로딩합니다 (코드 실행 시 바로 읽음)
• 주로 .js 확장자를 사용합니다

 

예제

 

math.js

function add(a, b) {
  return a + b;
}

module.exports = { add };

 

main.js

const math = require('./math');
console.log(math.add(3, 4)); // 출력: 7

 

 

✔️ 장점

1. Node.js에 기본 내장
   • 설정 없이 바로 사용할 수 있어서 진입 장벽이 낮음
2. 동기적 로딩 → 단순한 구조
   • 순차적 실행이 필요한 서버 코드에 적합
3. 방대한 레거시 생태계
   • NPM 패키지 대부분이 CommonJS 기반으로 되어 있음
4. 런타임 중 동적 require 가능
   • 조건문 안에서 require() 호출이 가능 (유연성)

❌ 단점

1. 브라우저 직접 실행 불가
   • 번들러(Webpack 등) 없이 실행할 수 없음
2. 트리 셰이킹 불가능
   • 사용하지 않는 코드도 모두 포함되므로 최적화에 불리
3. 모듈 캐싱 문제
   • 한 번 불러오면 캐싱되기 때문에 동적 로딩 시 예외 상황 처리 어려움
4. 동기 로딩
   • I/O 기반의 모듈 로딩에선 비효율적일 수 있음

 

---

ES Modules(ESM)이란?

ES Modules는 **ECMAScript 2015 (ES6)**에서 도입된 자바스크립트 표준 모듈 시스템입니다.
Node.js와 브라우저에서 모두 사용할 수 있으며, 최신 JavaScript 생태계에서 널리 사용되고 있습니다.

✅ 주요 특징

• import로 모듈을 불러오고
• export로 기능을 외부에 제공합니다
• 비동기 방식으로 모듈을 로딩합니다 (성능 최적화에 유리)
• .mjs 확장자 또는 package.json에 "type": "module"이 필요합니다
• 트리 셰이킹(Tree Shaking) 최적화가 가능합니다 (안 쓰는 코드 제거)

 

math.js

function add(a, b) {
  return a + b;
}

module.exports = { add };

 

main.js

import { add } from './math.mjs';
console.log(add(3, 4)); // 출력: 7

 

✅ ES Modules (ESM) – 장단점

✔️ 장점

1. 표준 모듈 시스템
   • 자바스크립트의 공식적인 모듈 시스템으로, 브라우저/Node.js에서 모두 사용 가능
2. 비동기 로딩
   • 성능 최적화에 유리하며, 대규모 프로젝트에서도 효율적
3. 트리 셰이킹 지원
   • 사용하지 않는 코드 제거 가능 → 번들 사이즈 절감
4. 정적 분석 가능
   • 빌드 도구가 import/export를 분석해 최적화에 활용 가능
5. 웹과의 호환성
   • 프론트엔드 환경에서도 동일한 문법 사용 가능 (예: React, Vue)

❌ 단점

1. Node.js에선 설정 필요
   • .mjs 확장자 또는 "type": "module" 지정 필요
2. 런타임 동적 import 제한
   • import는 코드 최상단에서만 사용 가능 (동적 로딩은 import()로 따로 처리해야 함)
3. CommonJS와 완전 호환 불가
   • 기존 패키지와 함께 쓸 때 삽질할 가능성 있음
4. 초기 진입 장벽
   • 설정과 규칙이 상대적으로 엄격해서 익숙해지는 데 시간이 걸림

---

차이점

항목	CommonJS	ES Modules (ESM)
문법	require, module.exports	import, export
로딩 방식	동기 (Synchronous)	비동기 (Asynchronous)
기본 확장자	.js	.mjs 또는 .js + type 설정 필요
실행 환경	Node.js	Node.js + 브라우저
트리 셰이킹	❌ 불가능	✅ 가능
도입 시기	오래전부터	ES6(2015)부터

 

 

 

---

트리 셰이킹(Tree Shaking)이란?

트리 셰이킹은 사용되지 않는(불필요한) 코드들을 자동으로 제거하는 최적화 기법이야.

 

 

✅ 왜 중요한가요?

웹에서 자바스크립트 번들 크기가 커질수록,

• 로딩 속도는 느려지고,
• UX는 나빠지고,
• **SEO나 성능 점수(Lighthouse)**도 떨어지게 돼.

그래서 사용하지 않는 코드는 아예 포함되지 않도록 하는 게 핵심인데,
이걸 자동으로 해주는 게 바로 "트리 셰이킹"이야!

---

✅ 언제 작동하나요?

• 트리 셰이킹은 보통 Webpack, Rollup, Vite 같은 번들러가 수행해
• 하지만 전제 조건이 있어:
  • 모듈 시스템이 ES Modules이어야 함
  • 코드가 정적 분석 가능해야 함 (동적으로 require하거나 조건문 안에 있으면 안 됨)

---

예시로 보면 금방 이해됨!

js

 

// utils.js
export function usedFn() {
  console.log('사용되는 함수');
}

export function unusedFn() {
  console.log('안 쓰이는 함수');
}

js

 

// main.js
import { usedFn } from './utils.js';
usedFn();

이 경우, 트리 셰이킹이 동작하면 unusedFn()은 번들 파일에서 아예 제거됨!
불필요한 코드가 빠지니 번들 크기↓, 로딩 속도↑!