자바스크립트의 Module(모듈)의 종류 : ESM, CJS

잎서 자바스크립트의 모듈의 종류는 ESM와 CJS의 두가지 종류로 나뉜다고 말하고 있다.

ESM(ECMAScript) Modules

ECMAScript 표준 일부인 모듈 시스템을 의미하며 JavaScript의 모듈을 정의하는 형식이다.

• 프론트엔드 영역에서 표준화되어 널리 사용되는 방식이다.
• node.js 12버전부터 공식 채택했으나 현재 CJS방식을 주로 사용된다.

ESM의 특징

• 정적으로 분리된다 : 코드가 실행되기 전에 모듈간의 의존성을 파악한다.
• 단일 인스턴스를 가진다 : 여러 모듈에서 동일한 파일을 가져올 때 각각의 모듈은 동일한 인스턴스를 공유한다.
• export/import 구문을 사용한다 : export는 모듈에서 외부로 공개할 항목을 정의하고 import는 다른 모듈에서 해당 항목을 가져온다.
• 비동기 로딩을 지원한다 : 불필요한 리소스 로딩을 최소화한다.

// ESM 모듈 예시 코드

// math.js
export function add(a, b){
 	return a + b; 
}
// 화살표 함수로 만들어주는 방법
export const add = (a, b) => a + b;

//calculator.js
import { add } from './math.js';
console.log(add(2, 3)); // 출력 : 5

import * as totalCal from './math.js';
console.log(totalCal(2, 3)); // 출력 : 5

Named Export/import

• 여러개의 값을 내보낼 때 각각의 고유한 이름으로 내보내기 위해서 사용하는 방법이다.
• 하나의 모듈에서 여러 함수, 변수, 클래스 등을 내보낼 때 사용한다.

// Named Export/import 예시 코드
// namedExport.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;
export const divide = (a, b) => a / b;

// index.js
import {add, subtract, miltiply, divide} from './namedExport.js'

Default Export / import

• 모듈당 하나의 값을 내보낼 때 사용하는 방법이다.
• 모듈 전체가 하나의 클래스나 객체일 때 유용한 방법이다.
• import 시 명칭 변경이 가능하다.

// Default Export / import 예시 코드
// defaultExport.js
export default class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
  
  birthday() {
    this.age += 1;
    console.log(`Happy birthday ${this.name}, you are now ${this.age} years old.`);
  }
}

// index.js
import NameChange from './defaultExport.js';

const user1 = new NameChange('Kim', 30);
user1.greet();
user1.birthday();

---

CJS(Common JS) Modules

JavaScript 표준 일부인 모듈 시스템을 의미하며 주로 Node.js와 같은 환경에서 사용된다.

CJS의 특징

• 동적으로 분리된다 : 런타임에 모듈의 의존성을 파악한다.
• 단일 인스턴스가 아니다 : 단일 인스턴스가 아니기 때문에 같은 모듈을 여러 번 가져와도 각 모듈은 별도의 인스턴스를 가진다.
• module.exports / require() 구문을 사용한다 : module.exports는 외부로 공개할 항목을 정의하고 require는 다른 모듈에서 해당 항목을 가져온다.
• 동기 로딩을 지원한다 : 모든 모듈이 로드되기 전까지 코드 실행이 차단된다.

// CJS 모듈의 예시 코드

//calc.js
module.exports.add = (a, b) => a + b;
module.exports.sub = (a, b) => a - b;

//calculator.js
const calc = require('./calc.js');
calc.add(3 ,5);
calc.sub(5, 1);
// 실행결과
// 8
// 4

---

ESM와 CJS의 공통점과 차이점은 무엇일까?🧐

ESM와 CJS의 공통점

• 모듈화 : 둘 다 모듈 시스템을 제공하기 때문에 코드를 모듈화하고 관리할 수 있다!
• 재사용성 : 모듈 시스템을 사용하기 때문에 코드를 재사용할 수 있으며 의존성을 관리할 수 있다!
• 외부 공개 :두 시스템 모듀 모두 모둘에서 외부로 공개할 항목을 지정할 수 있다!

ESM와 CJS의 차이점

• 로딩 방식 : ESM는 비동기적으로 모듈을 로드, CJS는 동기적으로 모듈을 로드한다.
• 문법 : ESM는 export/import 문법을 사용하지만 CJS는 module.exports/require() 문법을 사용한다.
• 단일 인스턴스 : ESM는 기본적으로 단일 인스턴스이지만 CJS는 서버 단일 인스턴스가 아니다.
• 환경: ESM는 브라우저 환경에서 사용되지만 CJS는 서버 환경(Node.js)에서 사용된다.
• 정적/동적분석 : ESM는 정적으로 분석이 되기 때문에 모듈 간의 의존성을 파악하고 로드되지만 CJS는 동적으로 모듈이 로드되기 때문에 런타임에 모듈을 결정한다.

---

ESM와 CJS 중 어떠한 것을 사용해야 할까?🧐

프로젝트의 요구사항과 개발 환경을 고려해서 정해야 한다.

CJS(Common JS)

• 주로 백엔드 개발일 때 사용한다.
• Node.js를 활용한 SSR 개발 시 사용한다.
• 기존 node.js 프로젝트를 사용하거나 라이브러리를 사용해야하는 경우에 사용한다.

ESM(ECMAScript)

• 최신 웹 개발 환경에 사용한다.
• 최적화가 필요한 환경에서 사용한다.(Tree-Shaking, Code-splitting, Dynamic Imports - Lazy Loading)
• FE-BE 스텍을 맞추고 싶은 경우에 사용한다.

---

참고사이트📜

• Code-Splitting란 무엇인지?
• Dynamic Imports란 무엇인지?
• Lazy Loading란 무엇인지?