[NodeJS] CommonJS & ES Module 차이 확인 및 변경 방법

 

CommonJS 모듈과 ES 모듈은 JavaScript에서 모듈화를 구현하는 두 가지 주요 접근 방식이다. CommonJS는 Node.js에서 주로 사용되며, ES 모듈은 ECMAScript 2015(ES6)에서 도입된 표준 모듈 시스템이다. CommonJS 모듈과 ES 모듈의 차이점과 예제 코드를 통해 각각의 특징과 사용법을 알아보자.

 

 

 

 

 

1. CommonJS 모듈

CommonJS 모듈은 동기적으로 동작하는 모듈 시스템이다. 이는 모듈이 필요한 시점에 동기적으로 로드되고 해석되는 방식을 의미한다. CommonJS 모듈은 `require`와 `module.exports` 문법을 사용하여 모듈을 로드하고 내보내는 것이 특징이다.

 

// 모듈 로드
const express = require('express');

// 애플리케이션 생성
const app = express();

// 라우트 정의
app.get('/', (req, res) => {
  res.send('Hello, World!');
});

// 서버 실행
app.listen(3000, () => {
  console.log('서버가 실행되었습니다.');
});

// 모듈 내보내기
module.exports = app;

 

위의 예제 코드에서 `require` 함수를 사용하여 `express` 모듈을 로드하고, `module.exports`를 통해 `app` 객체를 내보낸다. 이렇게 내보낸 모듈은 다른 파일에서 `require`를 사용하여 불러올 수 있다. CommonJS 모듈은 동기적으로 로드되기 때문에 `require` 문은 다른 코드보다 위에 위치해야 한다.

 

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "hello",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  }
}

 

 

 

 

2. ES 모듈

ES 모듈은 비동기적으로 동작하는 모듈 시스템으로, 모듈이 필요한 시점에 비동기적으로 로드되고 해석된다. ES 모듈은 `import`와 `export` 문법을 사용하여 모듈을 로드하고 내보내는 것이 특징이다.

 

// 모듈 로드
import express from 'express';

// 애플리케이션 생성
const app = express();

// 라우트 정의
app.get('/', (req, res) => {
  res.send('Hello, World!');
});

// 서버 실행
app.listen(3000, () => {
  console.log('서버가 실행되었습니다.');
});

// 모듈 내보내기
export default app;

 

위의 예제 코드에서 `import` 문을 사용하여 `express` 모듈을 로드하고, `export default`를 통해 `app` 객체를 내보낸다. 이렇게 내보낸 모듈은 다른 파일에서 `import`를 사용하여 불러올 수 있다. ES 모듈은 비동기적으로 로드되기 때문에 `import` 문은 다른 코드보다 위에 위치하지 않아도 된다.

 

 

 

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "hello",
  "license": "ISC",
  
  "type": "module",
  
  "dependencies": {
    "express": "^4.18.2"
  }
}

CommonJS와 달리 ES module에서는 "type": "module" 항목 추가를 해야한다.

 

 

 

PS C:\hello-world> node index.js
(node:12736) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
C:\hello-world\index.js:1
import express from "express";

"type": "module"이  추가되지 않은 상태에서는 위와 같은 경고메시지와 node가 실행되지 않는다.

 

 

 

 

 

3. CommonJS 모듈과 ES 모듈의 차이점

CommonJS 모듈과 ES 모듈은 몇 가지 중요한 차이점이 있다.

- 로드 방식: CommonJS 모듈은 동기적으로 로드되고 해석되며, ES 모듈은 비동기적으로 로드되고 해석된다. ES 모듈은 로드 시점에 모듈의 정적 해석을 수행하여 더욱 효율적으로 로드할 수 있다.

- 라이브 바인딩: CommonJS 모듈은 런타임에 모듈을 로드하므로, 모듈 내부의 상태가 호출마다 변경될 수 있다. 반면에 ES 모듈은 정적 해석이 가능하기 때문에 모듈 내부의 상태가 라이브 바인딩되지 않는다. 이는 ES 모듈이 더 예측 가능하고 최적화하기 쉽게 만든다.

- 브라우저에서의 사용: CommonJS 모듈은 주로 Node.js 환경에서 사용되었지만, 브라우저에서도 사용할 수 있도록 번들러(Bundler)를 사용해야 한다. 반면에 ES 모듈은 최신 브라우저에서 직접 지원되므로 번들러 없이도 사용할 수 있다.

 

 

 

4. 요약

"CommonJS"는 동기적인 로딩과 라이브 바인딩이 가능한 모듈 시스템으로 Node.js에서 주로 사용되며, "ES 모듈"은 비동기적인 로딩과 정적 해석을 통해 브라우저 및 최신 JavaScript 환경에서 사용할 수 있다.