ESM 그리고 CommonJS

JavaScript는 오랜 시간 동안 웹 개발의 중심 언어로 자리 잡아 왔으며, 모듈 시스템의 발전도 이에 맞춰 진화해왔습니다. CommonJS와 **ESM(ECMAScript Modules)**은 JavaScript 모듈 시스템의 두 가지 주요 축입니다. 이번 글에서는 두 시스템의 차이점, 장단점, 그리고 선택 기준에 대해 알아보겠습니다.

---

1. CommonJS란?

CommonJS는 Node.js에서 기본적으로 사용되는 모듈 시스템입니다. JavaScript가 브라우저 외의 환경에서도 사용되기 시작하면서, 모듈화를 위한 표준이 필요했는데, CommonJS는 이에 대한 초기 솔루션으로 자리 잡았습니다.

CommonJS의 주요 특징

• 동기적 로딩: commonJS환경에서 모듈은 파일이 로드될 때 즉시 실행됩니다. 때문에 promise를 리턴하지 않고, 설정된 값만을 리턴합니다. 이는 서버 환경에서는 유리하지만 브라우저 환경에서는 비효율적일 수 있습니다.
• require와 module.exports 사용:

  // 파일 a.js
  const greet = () => {
    console.log("Hello, CommonJS!");
  };
   
  module.exports = greet;
   
  // 파일 b.js
  const greet = require('./a');
  greet(); // "Hello, CommonJS!"

• 트리쉐이킹 불가 : ESM과는 다르게, CommonJS에서는 트리쉐이킹이 대체로 불가능합니다. 트리쉐이킹이란 정적으로 코드를 분석 가능할 때 가능한 것입니다. 하지만 CommonJS는 동적 모듈 시스템이기 때문에 근본적으로 트리쉐이킹과 맞지 않습니다. 이는 module.exports 가 가진 비정적 구조 때문입니다.

  if (condition) {
    module.exports = functionA;
  } else {
    module.exports = functionB;
  }

  위 코드 처럼 module.exports 가 런타임에 변경될 수 있기 때문에 번들러는 어떤 코드가 사용될지 정적 분석으로 예측할 수 없게 됩니다.

---

2. ESM(ECMAScript Modules)이란?

ESM은 ES6(ECMAScript 2015)에서 도입된 공식 모듈 시스템으로, JavaScript 언어 자체에 통합되었습니다. 브라우저와 Node.js 모두에서 점차 표준으로 자리 잡아가고 있습니다.

ESM의 주요 특징

• 비동기적 로딩: ESM은 import가 비동기로 작동하므로 브라우저 환경에서 더 적합합니다. 모듈을 가져오는 동안 리소스 로딩이나 렌더링이 중단되지 않습니다.
• import와 export 사용:

  // 파일 a.js
  export const greet = () => {
    console.log("Hello, ESM!");
  };
   
  // 파일 b.js
  import { greet } from './a.js';
  greet(); // "Hello, ESM!"

• 트리쉐이킹(Tree Shaking) 지원: 사용하지 않는 코드를 번들링에서 자동으로 제거하여 최적화합니다. CommonJS와 달리 정적인 export 를 사용하여 빌드 단계에서 모듈관의 관계를 파악할 수 있고, 트리쉐이킹이 가능하게 합니다.

---

3. CommonJS와 ESM의 주요 차이점

---

4. 장단점 비교

CommonJS의 장점

• 간단한 문법으로 빠르게 사용 가능.
• Node.js에서 강력한 지원.
• 기존 프로젝트와의 호환성이 높음.

CommonJS의 단점

• 브라우저 환경에서 비효율적.
• 트리 셰이킹 미지원으로 번들 크기 증가 가능.

ESM의 장점

• 최신 JavaScript 표준으로 점진적 채택.
• 브라우저와 Node.js 모두에서 지원.
• 트리 셰이킹을 통해 더 나은 번들 최적화.

ESM의 단점

• Node.js에서 레거시 코드와 함께 사용하기 어렵거나 추가 설정 필요.

---

5. ESM과 CommonJS, 무엇을 선택해야 할까?

CommonJS를 선택해야 할 때

• 기존 Node.js 프로젝트를 유지보수하는 경우.
• 레거시 라이브러리와 호환이 필요한 경우.

ESM을 선택해야 할 때

• 새로운 프로젝트를 시작하는 경우.
• 브라우저 환경을 지원해야 하거나 최신 JavaScript 기능을 활용하고 싶은 경우.
• 번들 크기 최적화가 중요한 경우.

---

6. 마무리

CommonJS와 ESM은 각기 다른 요구사항을 해결하기 위해 만들어졌습니다. CommonJS는 Node.js 기반의 서버 환경에서 강력한 도구로 자리 잡았고, ESM은 JavaScript의 표준화를 통해 브라우저와 서버 양쪽에서 모듈 관리를 효율적으로 지원합니다.

따라서 현재 환경과 요구사항에 따라 적합한 모듈 시스템을 선택하면 됩니다. 앞으로는 ESM이 점점 더 널리 사용될 가능성이 높으므로, 새로운 프로젝트에서는 ESM을 고려하는 것이 좋은 선택일 것입니다.

---

참고 자료

• MDN Web Docs: JavaScript Modules
• Node.js Documentation on ESM