CommonJS vs ES Modules

🌟 모듈

한 파일에 모든 기능을 다 때려 박는다면 가독성도 좋지 않고 유지 보수도 힘들 것입니다. 그래서 보통 기능 별로 파일을 나누어 사용하는 데, 이를 모듈이라고 합니다.

 

특정 기능을 하는 JavaScript 파일이 하나의 모듈인 것이죠.

---

🌟 모듈 시스템

모듈 시스템은 모듈을 가져오고, 내보내고, 사용하는 등의 기능을 제공해 코드를 구조화하고 관리하는 시스템입니다. 대표적인 모듈 시스템에는 CommonJS와 ES Modules 등이 있습니다.

CommonJS

CommonJS는 전통적인 모듈 시스템인데 require, exports 명령어로 모듈을 가져오고 내보내는 방식입니다.

ES Modules

ES Modules는 ES6(ECMAScript 2015)에서 도입된 모듈 시스템으로 import, export를 통해 모듈을 가져오고 내보내는 방식입니다.

.mjs 확장자를 사용하거나, package.json에서 "type": "module"을 설정하여 사용할 수 있습니다.

---

🌟 CommonJS vs ES Modules

1. 정적/동적 용어 정리

먼저 정적/동적 import에 대한 용어 정리가 필요할 것 같습니다.

정적 import는 "빌드" 타임에 결정되고, 동적 import는 "런타임"에 결정되는 것입니다. 정적 import는 다음과 같은 특징들을 만족해야 합니다.

모듈의 최상위 레벨에서만 사용 가능

// 올바른 사용: 최상위 레벨
import fs from 'fs';

function someFunction() {
    // 잘못된 사용: 함수 내부
    import fs from 'fs';  // 오류!
}

if문, for문 등의 제어문 안에서 사용 불가능

// 잘못된 사용: 조건문 내부
if (condition) {
    import mod1 from './mod1.js';  // 오류!
} else {
    import mod2 from './mod2.js';  // 오류!
}

문자열 리터럴만 사용 가능

// 올바른 사용: 문자열 리터럴
import myModule from './myModule.js';

// 잘못된 사용: 변수나 표현식
const modulePath = './myModule.js';
import myModule from modulePath;  // 오류!

 

2. 동기적 vs 비동기적

용어 정리를 했으니 각 모듈 시스템이 어떻게 동작하는지 살펴보겠습니다.

 

CommonJS

• CommonJS는 동적 import만 가능합니다.
• 코드의 최상단에 있고, 문자열 리터럴만 사용한다는 점에서 "정적"으로 보이지만 실제로 런타임에 작동합니다.
• require()는 항상 동기적으로 실행됩니다.

// 1. 정적으로 보이는 import
let foo = require("./mod1.js");

// 2. 동적 import
let foo;
if (someCondition) {
    foo = require("./mod1.js");
} else {
    foo = require("./mod2.js");
}

// 또는
const foo = require(someCondition ? "./mod1.js" : "./mod2.js");

// 3. 동기적으로 실행
const fs = require('fs'); // 파일 불러올 때까지 기다림
console.log('파일 불러옴');

 

ES Modules

• 정적 import(import문): 파싱 단계에 분석됩니다.
• 동적 import(import()문): 런타임에 실행됨
• ES Modules는 브라우저 환경에서도 사용될 수 있도록 비동기적으로 설계됐습니다.

// 1. 정적 import ===================================
// 유효함
import foo from "./mod1.js";
 
// 유효하지 않음
if (someCondition) {
    import foo from "./mod1.js";
} else {
    import foo from "./mod2.js";
}

// 2. 동적 import ===================================
if (someCondition) { 
	const mod1 = await import("./mod1.js"); 
} else {
	const mod2 = await import("./mod2.js");
} 

// 또는
const foo = await import(someCondition ? "./mod1.js" : "./mod2.js").default;

// 3. 비동기적으로 실행 ===================================
import fs from 'fs';
console.log('파일 불러오기 전에 이게 찍힘');

 

3. 트리셰이킹(Tree-Shaking)

트리셰이킹이란 미사용 코드를 번들에서 제거하는 최적화 기법을 말합니다.

ES Modules는 정적 분석(코드를 실행하지 않고 단순히 파싱만으로 모듈 간의 의존성을 파악하는 것)이 가능해 번들러가 미사용 코드를 쉽게 탐지하고 제거할 수 있습니다. (다만 import()를 사용한 동적 import는 트리셰이킹 대상이 아닙니다.)

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;
export const divide = (a, b) => a / b;

// main.js
import { add } from './math.js';
console.log(add(2,3));

반면, CommonJS는 런타임에 모듈을 가져오기 때문에 불필요한 코드를 제거하기 어렵습니다.

4. 최상위 레벨에서 await

ES Modules는 최상위 레벨에서 await를 사용할 수 있습니다. 코드를 직접 보시면 이해가 빠를 겁니다.

 

CommonJS

const fetchData = async () => {
  return '데이터';
};

// 함수 밖에서 await를 사용하면 에러가 발생합니다.
(async () => {
  const data = await fetchData();
  console.log(data);
})();

 

ES Modules

const fetchData = async () => {
  return '데이터';
};

// 함수 밖에서도 await 사용이 가능합니다.
const data = await fetchData();
console.log(data);

---

🌟 모듈 시스템 흐름

출처: 재그지그,  https://wormwlrm.github.io/2020/08/12/History-of-JavaScript-Modules-and-Bundlers.html

---

🌟 참고 자료

• https://medium.com/@hong009319/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%ED%91%9C%EC%A4%80-%EC%A0%95%EC%9D%98-commonjs-vs-es-modules-306e5f0a74b1
• https://stackoverflow.com/questions/52965907/what-is-the-meaning-of-static-import-in-es6