JS | 모듈 시스템 4가지(AMD, CommonJS, UMD, ES Module)

요약

• CommonJS (이하 CJS) – NodeJS 환경을 위해 만들어진 모듈 시스템
• ES Module (이하 ESM) – ES6 에 도입된 자바스크립트 모듈 시스템입니다

• AMD – 가장 오래된 모듈 시스템, require.js 라이브러리를 통해 개발되었습니다
• UMD – AMD와 CommonJS 등 모듈 시스템을 함께 사용하기 위해 개발되었습니다

모듈의 장점

• 유지 보수 – 모듈화가 잘 되어있을 때 의존성을 줄일 수 있어 개선, 수정이 용이합니다.
• 협업 – 약속한 이름으로 메뉴얼을 생성하는 경우 생산성을 늘릴 수 있습니다.
• 재사용성 – 같은 코드를 반복하지 않고 모듈로 분리시켜 재활용할 수 있습니다.
• 네임스페이스화 – 코드 양이 많아질 수록 변수명이 겹칠 가능성이 있습니다.
  모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 문제를 해결할 수 있습니다

모듈 시스템 사용법

HTML에서 불러오기

<script type="module" src="module/index.js"></script>

type에 module 로 추가해놓으면 가져오는 자료는 모듈로 인식하게 됩니다.

<script type="module" src="lib.mjs"></script>

mjs(Node.js ES 모듈 파일) 파일 확장자를 사용할 수도 있습니다.
차이점은 다음과 같습니다.

• NodeJS의 모듈 시스템
• .cjs 파일로 CommonJS 모듈 시스템 지원 (기본값)
• .mjs 파일로 ECMAScript 모듈 시스템 지원 (package.json 에 {"type" : "module"} 입력)
• .js 파일로 두 모듈 시스템 지원

모듈 내보내기, 불러오기

• CJS : require, module.exports, exports
• ESM : import, export, export default

지정 변수로 사용하기

export const name = yun;

export const sum = (num1, num2) => {
    return num1 + num2;
}
export const avg = (num1, num2) => {
    return (num1 + num2) /2;
}

변수에 export 선언을 한개씩 하는 방법입니다.

import {sum, avg} from './모듈명.js';

console.log('sum: ', sum(10, 20));
console.log('avg: ', avg(50, 70));

변수명으로 지정하여 가져오는 방법입니다.

export default 사용하기

const name = yun;

const sum = (num1, num2) => {
    return num1 + num2;
}
const avg = (num1, num2) => {
    return (num1 + num2) /2;
}

export default {
    name,
    sum,
    avg,
}

default 로 변수를 모아 출력하는 방법입니다.

• import * as math from './모듈명.js'; 와 같은 방식으로 사용할 수 있습니다
  이 때는 math.sum(10, 20) math.avg(50, 70) 과 같이 적용할 수 있게 됩니다.

import math from './모듈명.js';

console.log('sum: ', math.sum(10, 20));
console.log('avg: ', math.avg(50, 70));

index.js 에 내용을 붙여넣기합니다.

Node 명령어로 CommonJS 사용하기

import {sum, avg} from './모듈명.js';

console.log('sum: ', sum(10, 20));
console.log('avg: ', avg(50, 70));

const name = yun;

const sum = (num1, num2) => {
    return num1 + num2;
}
const avg = (num1, num2) => {
    return (num1 + num2) /2;
}

module.exports {
    name,
    sum,
    avg,
}

module.exports 를 사용하면 하나의 객체로 내보낼 수 있습니다.

• 터미널에서 node module/index.js 명령어를 입력하여 사용할 수 있게 됩니다.

import, export 사용 설정하기

NodeJS 에서 import , export 를 사용하려면
ECMAScript 를 사용하려면 추가 설정해야 합니다.

{
    "type": "module"
}

package.json 파일에서 다음의 코드를 추가합니다.
다른 방법으로 .cjs 파일 확장자를 사용할 수 있습니다.

참조

• 유튜브 : 자바스크립트 모듈 시스템