Common JS와 ES module

모듈

개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 기능별로 분리해야 하는 시점이 온다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부른다.

즉, 모듈은 스크립트 파일 하나를 의미하고 모듈을 관리하는 다양한 기능을 제공하는 시스템을 모듈 시스템이라 한다.

장점

1. 유지 보수성 향상
   각 기능이 분리되어 있어 수정이나 기능 추가가 용이하며, 의존성을 줄일 수 있다.

2. 전역 스코프 오염 방지
   각 모듈은 독립적인 스코프를 가지므로 전역 변수 충돌을 방지

3. 의존성 관리
   필요한 기능만을 가져와 사용할 수 있어 불필요한 코드 로드를 방지

CommonJS와 ES module

두가지 시스템인 이유?

간단히 요약하자면,

• Javascript는 정적 문서의 상호작용을 위한 짧은 스크립트 코드를 넣기 위해 개발되었다.
• Google의 V8 엔진의 등장과 Node.js가 탄생으로 브라우저 이외의 환경에서 Javascript를 실행할 수 있게 되었다.
• 서버사이드에서도 Javascript가 이용되기 시작하며 모듈화가 필요해졌고, Node.js는 CommonJS 시스템을 채택한다.
• 이후 여러 키워드를 추가해 가독성을 높이고 비동기 방식으로 실제 사용되는 모듈만 불러오도록 동작하는 ES module이 ES6 표준으로 도입된다.

적용 방법

• 확장자 설정
  파일의 확장자를 .cjs 또는 .mjs로 설정

• package.json 설정
  type 속성을 commonjs 또는 module로 설정

사용법

• CommonJS
  module.js 내보내기

  function sum(x = 0, y = 0) {
    return x + y;
  }
  
  module.exports = {
  	sum
  }

  main.js 불러오기

  const { sum } = require('./module');
  // const module = require('./module');
  
  console.log(sum(1, 1)); // 2

• ES module
  module.js 내보내기

  export default function add(x = 0, y = 0) {
    return x + y;
  }

  main.js 불러오기

  import add from './module.js';
  
   console.log(add(200, 200)); // 400

  
  

우리는 무엇을 사용해야 할까?

표준인 ES module이 우위를 차지하는 추세인 듯 하며 현재 Node.js 최신 버전에서는 ES Module이 공식적으로 사용되고 있다. 그러나 지금까지 많은 라이브러리들이 CommonJS로 작성되었으며, 두 Module System은 기본적으로 동작이 달라 서로 호환되기 어렵기 때문에 동작방식을 이해하고 차이점을 이해하는 것은 중요하다.

토스 기술 블로그

CommonJS와 ESM에 모두 대응하는 라이브러리 개발하기
https://toss.tech/article/commonjs-esm-exports-field

---

참고
https://magnificent7.tistory.com/entry/CJS-vs-ESM