Programing/javascript

자바스크립트 Module Pattern

Dongkkase 2025. 4. 19. 08:55
반응형

Module Pattern(모듈 패턴) 은 변수나 함수를 외부에 노출하지 않고, 캡슐화(encapsulation) 를 통해 내부 구현을 숨길 수 있도록 하는 디자인 패턴입니다. 전역 네임스페이스 오염을 방지하고, 코드를 구조화하는 데 매우 유용합니다.


🧱 Module Pattern이란?

Module Pattern은 즉시 실행 함수(IIFE) 와 클로저를 활용하여 프라이빗(private) 데이터와 퍼블릭(public) API를 명확히 분리합니다. 이를 통해 외부에서 접근 가능한 인터페이스만 공개하고, 나머지는 내부에서만 사용할 수 있게 만듭니다.

const CounterModule = (function () {
    let count = 0;

    function changeBy(val) {
        count += val;
    }

    return {
        increment() {
            changeBy(1);
        },
        decrement() {
            changeBy(-1);
        },
        getCount() {
            return count;
        }
    };
})();

CounterModule.increment();
CounterModule.increment();
console.log(CounterModule.getCount()); // 2

✅ 장점

  1. 정보 은닉: 외부에서는 내부 상태(count 등)에 직접 접근할 수 없음
  2. 전역 변수 최소화: 네임스페이스 오염을 방지하고 충돌 가능성 감소
  3. 구조화된 코드: 명확한 인터페이스 제공으로 유지보수가 쉬움

❌ 단점

  1. 테스트 어려움: 내부 구현이 숨겨져 있어 테스트하기 힘들 수 있음
  2. 상속 어려움: 다른 모듈에서 해당 모듈의 기능을 상속받기 어려움
  3. 메모리 점유: 클로저를 통해 유지되는 상태는 메모리 해제가 어렵기도 함

🛠️ 실전 예시: 설정 모듈

const ConfigModule = (function () {
    const config = {
        apiKey: '123-ABC',
        apiUrl: 'https://api.example.com'
    };

    return {
        get(key) {
            return config[key];
        },
        set(key, value) {
            config[key] = value;
        }
    };
})();

console.log(ConfigModule.get('apiUrl'));
ConfigModule.set('apiUrl', 'https://api.newdomain.com');
console.log(ConfigModule.get('apiUrl'));

🧩 결론

Module Pattern은 특히 ES6 이전의 자바스크립트에서 널리 사용되던 캡슐화 기법입니다. 지금은 ES6 모듈(import/export)이 표준이 되었지만, 여전히 클로저 기반의 모듈 패턴은 강력한 정보 은닉 수단으로 활용됩니다. 코드의 안정성과 유지보수성 향상을 위해 모듈화를 고려해야 합니다.

반응형