[NodeJS] CommonJS vs. ESM

const module1 = require('module1'); // CommonJS
import module1 from 'module1'; // ES6

자바스크립트로 개발을 하다보면 require나 import로 외부 라이브러리를 불러오는 코드를 자주 볼 수 있다. require은 CommonJS 키워드, import는 ES6에서 사용되는 키워드다.

---

Modules

모듈은 프로그램의 구성 요소로, 관련 데이터와 함수를 하나로 묶은 단위를 의미한다. 일반적으로 하나의 소스 파일에 모든 함수를 작성하지 않고, 함수의 기능별로 별도의 모듈을 구성한다. 이처럼 프로그램 코드를 기능별로 나누어 독립된 파일에 저장하여 관리하는 방식을 모듈화라고 한다.

---

Javascript Module System

• AMD : require.js 라이브러리를 통해 개발된, 가장 오래된 모듈 시스템
• CommonJS : NodeJS 서버를 위해 만들어진 모듈 시스템
• UMD : (Universal Module Definition) AMD와 CommonJS와 같은 다양한 모듈 시스템을 함께 사용하기 위해 만들어진 모듈 시스템
• ES module : (ESM) ES6에 도입된 모듈 시스템

---

ES Module

ESM은 ES6에 도입된 모듈 시스템이다. import, from, export, default처럼 모듈 관리 전용 키워드를 사용하여 가독성이 좋다. 또한, Named Parameter와 같이 CommonJS에서 지원하지 않는 기능들도 가지고 있다.

---

객체 내보내기/불러오기

CommonJS는 exports나 module.exports를 이용하여 객체를 내보내고, require를 통해 객체를 불러온다.

• exports를 이용한 내보내기/불러오기

// (func.js)
exports.func1 = func1;
exports.func2 = func2;

// (main.js)
const func = require('./func');
func.func1(10);
func.func2(10);

• module.exports를 이용한 내보내기/불러오기

// (func.js)
const func = {
  func1: function(n) {
  },
  func2: function(n) {
  }
}
module.exports = func;

// (main.js)
const func = require('./func');
func.func1(10);
func.func2(20);

exports와 module.exports 모두 객체를 내보내는 공통적인 기능을 갖고 있지만 exports는 property 방식을 사용하고, module.exports는 곧바로 사용할 수 있다는 점에서 차이가 았다.

반면, ES6는 export 키워드를 사용하여 객체를 내보내고, 다른 프로그램에서 import문으로 객체를 가져와 사용할 수 있다. export에는 named와 default 두 종류의 내보내기 방식이 있다.

• named 방식으로 내보내기

// 개별적으로 내보내기
export const func1 = function(num) {};
export const func2 = function(num) {};

// 목록으로 내보내기
export {func1, func2};

• default 방식으로 내보내기

export default function() {}; // export {func as default} 도 가능

named 방식은 여러 값을 내보낼 때 유용하다. 이때, 불러와 사용할 때는 내보낸 이름과 동일한 이름을 사용해야 한다. 반면, default는 아무 이름으로 가져와 사용할 수 있다.

---

CJS와 ES6의 내보내기/불러오기 비교 정리

CommonJS

• 내보내기

  • exports 변수의 property로 내보낼 객체 할당
  • module.exports의 변수로 내보낼 객체 할당

• 불러오기 : require 키워드 사용

ES6

• 내보내기 : export를 사용하여 named/default 방식으로 내보낼 객체 선정
• 불러오기 : import ~ from 키워드 사용

---

참고자료
TCP School : module
JAVASCRIPT.INFO : module
ESM import
mozilla : ES modules: A cartoon deep-dive
exports vs. module.exports
mdn web docs : export