[JS] (⭐)모듈 시스템이란? (+ ES 모듈 시스템)

 ✅모듈(Module) 시스템이란?
 ㄴ 모듈 시스템" 모듈을 다루는 시스템
 ㄴ 모듈 : 기능별로 나뉘어진 각각의 자바스크립트 파일들을 '모듈'이라 부른다.
 

---

✅ Common 모듈 시스템

1. Common 모듈 시스템 등록

(기본 모듈 시스템)

//위치: scr/math.js 

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

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

//module은 내장객체
module.exports={
    add,//add: add, (key와 value가 같으면 하나만 적어주자.)
    sub //sub: sub
}

2. Common 모듈 시스템 사용

//위치: scr/index.js 

const moduleData = require("./math");//객체가 저장됨.
console.log(moduleData.add(1,2));
console.log(moduleData.sub(2,1));

const {add, sub} = require("./math");//구조분해할당.
console.log(add(1,2));
console.log(sub(2,1));

 

✅ ES 모듈 시스템(업그레이드 버전) + 🔥설정 필요함

1. 설정

pakage.json에서
맨 마지막에
"type":"module" 추가

2. ES 모듈 등록

//ES 모듈 시스템 사용법
export {add, sub}; //또는 export function xxx 이렇게 붙이면 됨.

//math.js의 기본값으로 내보내겠다.
export default function multiply(a,b){
    return a*b;
}

 

3. ES 모듈 사용

//ES 모듈 시스템 사용법(확장자까지 명시해야함)
// import {add, sub} from "./math.js"
// import mul from "./math.js";//default는 중괄호 필요 없음
import mul, {add, sub} from "./math.js";//합쳐서 호출 가능

console.log(add(1,2));
console.log(sub(2,1));
console.log(mul(2,1));