모듈

1. 모듈

자바스크립트 모듈(module)은 코드의 재사용성과 유지보수성을 높이기 위해 기능을 개별 파일로 분리하여 사용할 수 있도록 해주는 구조입니다. export 키워드를 사용하여 모듈에서 변수, 함수, 클래스 등을 외부로 내보내고, import 키워드를 사용하여 다른 파일에서 이들을 불러와 사용할 수 있습니다. 이를 통해 전역 변수 오염을 방지하고, 각 기능을 독립적으로 관리할 수 있어 복잡한 애플리케이션 개발에 적합한 구조를 제공합니다. ES6(ECMAScript 2015)부터 표준으로 도입되어 현재 대부분의 환경에서 널리 사용되고 있습니다.

1. CommonJS 방식의 모듈

📁 counter.js (모듈 파일)

let count = 0

function increase(){
    count++
}

function getCount(){
    return count
}

module.exports.getCount = getCount
module.exports.increase = increase

 

• count 변수는 외부에서는 직접 접근할 수 없습니다. (private한 변수처럼 동작)
• 외부에서는 increase()와 getCount() 함수만 사용할 수 있습니다.
• 모듈은 해당 파일의 내용을 은닉하고 필요한 것만 노출시킵니다. → 캡슐화가 됩니다.

 

📁 main.js (모듈 사용하는 파일)

const counter = require('./counter'); // counter.js 파일을 불러옴

counter.increase(); // count를 1 증가
counter.increase(); // 한 번 더 증가

console.log(counter.getCount()); // 2 출력됨

 

 

2. ES6 방식의 모듈

📁 counter.mjs (모듈 파일)

let count = 0

export function increase(){
    count++
}

export function getCount(){
    return count
}

 

📁 main.mjs (모듈 사용하는 파일)

import { increase, getCount } from './counter.mjs';

increase(); // count: 1
increase(); // count: 2

console.log(getCount()); // 출력: 2

 

3. CommonJS vs ES6 모듈 차이

 

package.json 파일에 "type"을 "module"로 설정