CommonJS와 ESM의 차이

코드는 여러 파일로 분리해서 작성하는 것이 좋다. 어떤 코드가 무슨 역할을 하는지를 명확한 파일명과 함께 체계적으로 저장하면 다른 개발자와 협업할 때 도움되는 것은 물론이고, 나중에 스스로 짠 코드를 돌아볼 때도 그때 당시에 로직을 짠 의도와 방향성을 빨리 파악할 수 있다.

 

코드가 저장된 하나의 파일을 모듈이라고 한다. 기본적으로 모듈별로 코드를 분리하면 변수나 함수는 생성된 모듈 내에서만 참조할 수 있지만, 다른 모듈에서도 참조할 수 있도록 내보내는 것 또한 가능하다. 한 모듈 안에 있는 코드를 외부에서 사용할 수 있도록 내보내는 것을 export라 하고, 반대로 다른 모듈에 있는 코드를 불러오는 것을 import라 한다.

 

자바스크립트에는 CommonJS와 ESM이라고 하는 두가지의 모듈 유형이 있다.

 

CommonJS

CommonJS는 자바스크립트의 모듈 시스템과 함께 초기에 등장한 모듈 형태다. Node.js 환경에서는 기본적으로 자바스크립트 모듈을 CommonJS 모듈로 여기지만, 브라우저가 사용하는 표준은 아니다. 따라서 브라우저 환경에서 CommonJS 모듈을 쓰고 싶다면 별도의 변환 작업을 거쳐야 한다.

• 코드를 export할 땐 module.exports를 사용
• 코드를 import할 땐 require() 함수를 사용

// export
module.exports.add = function (a, b) {
  return a + b;
};
module.exports.multiply = function (a, b) {
  return a * b;
};

// import
const { add, multiply } = require("./util");

 

ESM

ESM은 ECMAScript Module의 약자로, 브라우저가 사용하는 표준 모듈 타입이다. CommonJS의 require()는 함수이기 때문에 조건적으로 모듈의 코드를 불러오는 것이 가능하지만, ESM은 그럴 수 없다. 대신 CommonJS에서는 할 수 없는 비동기적 로딩이 가능하다.

• 코드를 export할 땐 export 키워드를 사용
• 코드를 import할 땐 import 키워드를 사용

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

// import
import { add } from "./util.js";