#기본기17_모듈 시스템을 통한 코드의 관리 및 재사용

JavaScript 모듈 시스템은 코드를 여러 파일로 분할하여 관리하고 재사용할 수 있는 기능을 제공합니다.

모듈 시스템을 사용하면 코드의 구조화와 유지 보수가 용이해지며, 복잡한 애플리케이션의 개발 및 확장이 용이해집니다

 

ESM(ES module) 방식 - 일반적으로 프론트엔드

1. 자주 쓰는 코드(함수)를 module.js 파일에 작성한다.

2. 함수 이름 앞에 export를 작성한다.

3. 해당 함수를 사용할 js파일에 import를 한다.

4. 함수를 사용한다.

//module.js 모듈파일
export function 진짜자주씀(a, b, c){
    return (a + b + c) / 2;
}
export function 조금쓰는편(a, b){
   return a * b;
}

// app.js, 모듈에서 가져올 파일
import { 진짜자주씀, 조금쓰는편 } from './module.js'

진짜자주씀(10, 5, 5);
조금쓰는편(3,88);

 

CJS (common js)방식 - Node.js 

1. 자주 쓰는 코드(함수)를 module.js 파일에 작성한다.

2. 파일 맨 밑에 module.export = { 함수1, 함수2 }를 작성한다.

3. 해당 함수를 사용할 js파일에 require 한다.

4. 함수를 사용한다.

 

//module.js 모듈파일
function 진짜자주씀(a, b, c){
    return (a + b + c) / 2;
}
function 조금쓰는편(a, b){
   return a * b;
}
module.exports = {
	진짜자주씀,
    조금쓰는편
}

// app.js, 모듈에서 가져올 파일
const { 진짜자주씀, 조금쓰는편 }  = require('./module.js');  // 객체구조분해

진짜자주씀(10, 5, 5);
조금쓰는편(3,88);