모듈 시스템 - CJS, ESM

 

 

 

모듈 시스템

 

 

 

1. CJS (Common JS modul System) 

: Node.js에서 가장 일반적으로 사용되는 모듈 시스템

 

 

값 내보내기

module.exports = {
   내보낼 값들(프로퍼티)
}

 

// math.js
function add(a, b) {
    return a + b;
}

function sub(a, b) {
    return a - b;
}

module.exports = {
    add: add, // add라는 변수에 add()함수 저장
    sub: sub,
}

 

 

값 불러오기

require("./파일명");

// index.js
const moduleData = require("./math");
// math 모듈러로부터 객체 형태로 내보내진 값을 반환함

console.log(moduleData); // { add: [Function: add], sub: [Function: sub] }
console.log(moduleData.add(1, 2)); // 3
console.log(moduleData.sub(5, 2)); // 3

 

 

 

 

---

 

 

 

2. ESM (ECMA Script Modules)

: 최신 JavaScript 버전에서 지원되는 모듈 시스템

 

 

 

타입 설정하기

"type": "module"

• json 파일에서 타입을 설정해야 사용 가능
• 해당 패키지는 ESM을 사용하겠다는 뜻
• CJS 사용 불가 X
  
  

 

 

값 내보내기

case 1. export { 내보낼 값 };

export {add, sub};

 

 

case 2. 함수 선언문 앞에 export 붙이기

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

 

 

값 가져오기

import { 가져온 값 } from "./파일명";

• 파일명에 확장자까지 써야 함 (ex. math.js)

import {add, sub} from "./math.js";

console.log(add(1, 2)); // 3
console.log(sub(5, 2)); // 3

 

 

기본값 내보내기

(1) 함수 선언문 앞에 export 붙이기

(2) export 뒤에 default 붙이기
= 모듈을 대표하는 기본값이 된다.

export default function multiply(a, b) {
    return a * b;
}

 

 

 

 

기본값 가져오기

import 작명 from "./파일명";

• {중괄호} 없이 씀
• 마음대로 작명 가능 O

import mul from "./math.js";

 

 

 

 

동일한 경로의 import문 축약하기

import mul, {add, sub} from "./math.js";

 

 

 

---

 

 

CJS  vs  ESM

 

CJS
코드 처리	동적으로 처리
순환 종속성	종속성이 모두 파악되기 전에 코드를 가져오고 실행 👉 순환 종속성 문제 ⭕ : 업데이트 되지 않는 값을 가져오는 문제
파일 확장자	.js

 

ESM
코드 처리	정적으로 처리
순환 종속성	import 구문은 모든 코드의 최상위에서 선언  👉 순환 종속성 문제 ❌ : 모든 모듈이 다른 모듈의 최신 상태를 유지
파일 확장자	.mjs 사용을 권장

 

 

 

 

---

 

 

출처

한입 크기로 잘라먹는 리액트

 

CJS 와 ESM