CommonJS(CJS)와 ESModules(ESM)

CommonJS(CJS)와 ES Modules(ESM)은 JavaScript에서 모듈을 관리하고 불러오는 두 가지 방식이다.
이 두 방식은 모듈의 정의, 불러오기, 사용 방법에서 차이가 존재한다.

CommonJS(CJS)

개요

CommonJS는 Node.js에서 널리 사용되는 모듈 시스템이다. JavaScript가 서버 사이드 환경에서 사용되기 시작하면서 생겨났으며, Node.js는 처음부터 CommonJS를 기본 모듈 시스템으로 사용해 왔다.

사용법

• 모듈 불러오기: require() 함수로 모듈을 불러온다.
• 모듈 내보내기: module.exports 또는 exports 객체를 사용해 모듈을 내보낸다.

// module.js
const message = "Hello, CommonJS!";
module.exports = message;

// main.js
const message = require("./module.js");
console.log(message); // "Hello, CommonJS!"

특징

• 동기식 로딩: CommonJS 모듈은 동기적으로 로드된다. 이는 Node.js와 같이 파일 시스템에 접근하는 서버 환경에서 적합하지만, 브라우저와 같은 클라이언트 환경에서는 비효율적일 수 있다.
• 파일 단위 모듈: CommonJS는 파일 단위로 모듈을 정의한다. 각 파일은 자체적으로 module, exports 객체를 가지며, 다른 파일과 독립적으로 동작한다.

한계

브라우저에서 직접 사용할 수 없다. 브라우저는 JavaScript 파일을 비동기적으로 로드하는 경향이 있기 때문에, CommonJS를 사용하려면 번들러(Webpack, Browserify 등)가 필요하다.
CommonJS 모듈은 require()를 호출하는 순간 모듈을 로드하기 때문에, 정적 분석과 최적화가 어렵다.

ESModules(ESM)

개요

ES Modules는 ECMAScript 표준(ES6)에서 도입된 공식 모듈 시스템이다. 이 시스템은 JavaScript의 기본 모듈 시스템으로 자리 잡고 있으며, 브라우저와 Node.js에서 모두 사용할 수 있다.

사용법

• 모듈 불러오기: import 키워드를 사용한다.
• 모듈 내보내기: export 키워드를 사용해 모듈을 내보낸다.

// module.js
export const message = "Hello, ES Modules!";

// main.js
import { message } from "./module.js";
console.log(message); // "Hello, ES Modules!"

특징

• 비동기 로딩: ESM은 비동기적으로 모듈을 로드한다. 브라우저와 같은 환경에서 효율적으로 작동하며, 네트워크 지연을 줄일 수 있다.
• 정적 분석 가능: ESM은 import와 export를 통해 모듈의 종속성을 정적 분석할 수 있으며, 이를 통해 트리 쉐이킹(사용되지 않는 코드를 제거)과 같은 최적화 작업이 가능하다.
• 엄격한 모드: ESM은 기본적으로 엄격 모드("use strict")에서 동작한다.

호환성

ESM은 최신 브라우저와 Node.js(버전 12 이상)에서 기본적으로 지원된다. Node.js에서는 .mjs 확장자를 사용하거나 package.json에서 "type": "module" 설정을 통해 ESM을 사용할 수 있다.
CommonJS와 ESM을 혼합해 사용하는 경우 호환성 문제가 발생할 수 있어, 프로젝트 설정에 따라 적절한 모듈 시스템을 선택하는 것이 중요하다.

CJS vs ESM: 비교

동기 vs 비동기

CJS는 동기적으로 모듈을 로드하는 반면, ESM은 비동기적으로 로드한다.

파일 확장자

CJS는 .js 파일을 사용하며, ESM은 .js, .mjs 또는 package.json에서 ESM 타입을 명시해 사용할 수 있다.

사용 환경

CJS는 Node.js에서 주로 사용되며, ESM은 브라우저와 Node.js 모두에서 사용할 수 있다.

정적 분석

ESM은 정적 분석이 가능해 트리 쉐이킹 등의 최적화가 가능하지만, CJS는 동적 로딩으로 인해 이점이 제한된다.