CommonJS와 ES Modules 비교: 현대 JavaScript 모듈 시스템의 이해

1. 들어가며

JavaScript는 웹 개발의 핵심 언어로서, 복잡한 애플리케이션을 효율적으로 관리하기 위해 모듈 시스템이 필요합니다. 모듈 시스템은 코드의 재사용성과 유지 보수성을 향상시키며, 개발 과정에서 필수적인 요소로 자리 잡았습니다. 이번 글에서는 JavaScript의 두 가지 주요 모듈 시스템인 CommonJS(CJS)와 ES Modules(ESM)를 비교하여 그 특징과 차이점을 알아보겠습니다.

 

2. CommonJS

CommonJS는 2009년 서버 사이드 자바스크립트 개발을 촉진하기 위해 만들어진 모듈 시스템 사양입니다. Node.js가 이 사양을 채택하면서 서버 사이드 JavaScript의 사실상 표준이 되어왔습니다.

 

작동 방식

 

CommonJS는 require 함수와 module.exports 객체를 사용하여 모듈을 가져오고 내보냅니다. 모듈은 파일 단위로 격리된 스코프를 가지며, 런타임에 동적으로 로드됩니다.

 

사용 예시

// math.js
function add(a, b) {
  return a + b;
}

module.exports = { add };

 

// app.js
const math = require('./math');
console.log(math.add(2, 3)); // 출력: 5

 

장점

• 간단한 문법: require과 module.exports를 이용한 직관적인 모듈 관리
• Node.js 기본 지원: 추가 설정 없이 바로 사용 가능

 

단점

• 브라우저 비호환성: 브라우저 환경에서 기본적으로 지원되지 않음
• 동적 로딩: 런타임에 모듈을 로드하므로 정적 분석과 최적화에 제한

 

3. ES Modules(ESM)

ES Modules는 ECMAScript 2015(ES6)에서 표준화된 모듈 시스템으로, 최신 브라우저와 Node.js에서 기본적으로 지원됩니다. import와 export 키워드를 사용하여 모듈을 가져오고 내보냅니다.

 

작동 방식

 

ESM은 컴파일 타임에 모듈 종속성을 정적으로 분석합니다. 이는 트리 쉐이킹(tree-shaking)과 같은 고급 최적화를 가능하게 하며, 번들 크기를 줄이는 데 도움이 됩니다.

 

사용 예시

// math.js
export function add(a, b) {
  return a + b;
}

// app.js
import { add } from './math.js';
console.log(add(2, 3)); // 출력: 5

 

다른 장점은 다 제쳐두고 코드가 굉장히 직관적이라는 점이 가장 크게 와닿는 것 같습니다.

 

장점

• 정적 로딩: 컴파일 타임에 종속성 분석이 가능하여 최적화에 유리
• 브라우저 지원: 최신 브라우저에서 기본적으로 지원
• 최신 표준 준수: ECMAScript의 공식 표준을 따름

단점

• 구형 환경 호환성: 이전 버전의 Node.js나 브라우저에서는 추가 설정 필요
• 복잡한 설정: Node.js에서 ESM을 사용하려면 package.json 설정이나 파일 확장자 변경 필요

 

4. CommonJS vs. ES Modules

문법

• CommonJS
  • import: const module = require('module');
  • export: module.exports = value;
• ES Modules
  • import: import module from 'module';
  • export default value; 또는 export const name = value;

 

로딩 방식

• CommonJS: 동적 로딩
  • 모듈을 런타임에 로드하므로 조건부 로딩이 가능하지만, 정적 분석이 어렵습니다.
• ES Modules: 정적 로딩
  • 컴파일 타임에 모듈 종속성을 파악하여 최적화에 유리합니다.

 

지원 환경

• Node.js
  • CommonJS는 기본적으로 지원
  • ESM은 Node.js 12버전부터 지원하며, 일부 설정 필요
• 브라우저
  • ESM은 최신 브라우저에서 지원
  • CommonJS는 기본적으로 지원되지 않아 번들러가 필요

 

성능 및 최적화

• CommonJS
  • 동적 로딩으로 인해 초기 로딩 시간이 길어질 수 있음
• ES Modules
  • 정적 분석을 통한 최적화 가능
  • 트리 쉐이킹으로 불필요한 코드를 제거하여 번들 크기 감소

 

5. 호환성과 상호 운용성

혼용 가능성

• 트랜스파일러(transpiler) 사용
  • Babel 등 도구를 사용하여 서로 다른 모듈 시스템을 변환 가능
• Node.js 설정
  • package.json의 type 필드를 module로 설정하여 ESM 사용

 

주의 사항

• 모듈 시스템을 혼용하면 복잡성이 증가하고 예기치 않은 오류가 발생할 수 있으므로, 가능하면 일관된 모듈 시스템을 사용하는 것이 좋습니다.

 

6. 마이그레이션 고려 사항

CommonJS에서 ESM으로 전환하기

1. 의존성 확인
   1. 사용 중인 라이브러리가 ESM을 지원하는지 확인
2. 코드 변경
   1. require를 import로, module.exports를 export로 변경
3. 환경 설정
   1. Node.js의 경우 package.json에 "type": "module" 추가 또는 파일 확장자를 .mjs로 변경

 

베스트 프랙티스

• 단계적 전환
  • 모든 코드를 한 번에 변경하기보다 모듈별로 점진적으로 전환
• 테스트
  • 변경 사항에 대한 철저한 테스트로 기능이 정상적으로 동작하는지 확인

 

7. 마치며

CommonJS와 ES Modules는 각자의 장점을 가지고 있는 JavaScript 모듈 시스템입니다. 프로젝트의 요구 사항과 개발 환경에 따라 적절한 모듈 시스템을 선택하는 것은 중요합니다. 새로운 프로젝트나 최신 기술 스택을 사용하는 경우 ES Modules를 사용하는 것이 권장되지만, 기존의 CommonJS 기반 코드와의 호환성도 고려해야 합니다.

 

8. Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules

JavaScript modules - JavaScript | MDN