JavaScript 모듈 탐구하기: CommonJS vs. ES6 모듈

JavaScript에서 모듈은 코드를 조직화하고 재사용성을 높이는 데 중요한 역할. CommonJS와 ES6 모듈은 두 가지 주요한 모듈 시스템

1. CommonJS

// 모듈 가져오기
const moduleA = require('./moduleA');
const moduleB = require('./moduleB');

// 모듈 내보내기
module.exports = {
  moduleA,
  moduleB
};

CommonJS는 Node.js에서 사용되는 표준 모듈 시스템입니다. require 함수를 사용하여 모듈을 가져오고, module.exports를 사용하여 모듈을 내보냅니다. 동기적으로 모듈을 로드하기 때문에 서버 환경에서 주로 사용됩니다.

2. ES6 모듈

// 모듈 가져오기
import { moduleA, moduleB } from './modules';

// 모듈 내보내기
export { moduleA, moduleB };

ES6 모듈은 브라우저와 Node.js에서 모두 사용할 수 있는 모듈 시스템입니다. import 문을 사용하여 모듈을 가져오고, export 문을 사용하여 모듈을 내보냅니다. 비동기적으로 모듈을 로드할 수 있어서 더욱 효율적입니다.

CommonJS vs. ES6 모듈

CommonJS는 동기적으로 모듈을 로드하기 때문에 브라우저에서 사용하기 어렵습니다. 반면에 ES6 모듈은 비동기적으로 로드할 수 있어 브라우저에서도 쉽게 사용할 수 있습니다.
ES6 모듈은 정적으로 분석되기 때문에 더욱 최적화된 결과를 얻을 수 있습니다.
CommonJS는 객체를 복사하여 내보내는 반면에, ES6 모듈은 실제로 두 모듈 사이에 바인딩을 유지하므로 더욱 효율적입니다.
JavaScript 모듈 시스템을 선택할 때는 해당 환경과 요구사항에 맞게 선택해야 합니다. Node.js 환경에서는 CommonJS를, 브라우저 환경에서는 ES6 모듈을 사용하는 것이 좋습니다.

참고 자료

MDN Web Docs: JavaScript modules