Programing/javascript

자바스크립트 Module Pattern

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)이 표준이 되었지만, 여전히 클로저 기반의 모듈 패턴은 강력한 정보 은닉 수단으로 활용됩니다. 코드의 안정성과 유지보수성 향상을 위해 모듈화를 고려해야 합니다.

반응형

'Programing > javascript' 카테고리의 다른 글

자바스크립트 Adapter Pattern  (0) 2025.04.19
자바스크립트 Proxy Pattern  (0) 2025.04.19
자바스크립트 Facade Pattern  (0) 2025.04.19
자바스크립트 Decorator Pattern  (0) 2025.04.19
자바스크립트 Builder Pattern  (0) 2025.04.19
자바스크립트 Prototype Pattern  (1) 2025.04.19
자바스크립트 Singleton Pattern  (0) 2025.04.19
자바스크립트 Factory Pattern  (0) 2025.04.19
'Programing/javascript' 카테고리의 다른 글
  • 자바스크립트 Facade Pattern
  • 자바스크립트 Decorator Pattern
  • 자바스크립트 Builder Pattern
  • 자바스크립트 Prototype Pattern
Dongkkase
Dongkkase
개발자로 일하면서 부딪히는 문제풀이가 누군가에게 도움이 되길 바라며
    반응형
  • Dongkkase
    정집사의 개발로그
    Dongkkase
  • 전체
    오늘
    어제
    • All (478)
      • 금융 (61)
      • Programing (295)
        • Algorithm (39)
        • API (2)
        • javascript (122)
        • CSS (8)
        • HTML (10)
        • PHP (15)
        • JAVA (27)
        • JSP (17)
        • JSP 예제 (1)
        • IOS (1)
        • Android (1)
        • Sencha Touche (1)
        • bat file, cmd (0)
        • 디버깅 (2)
        • SQL (21)
        • MS-SQL (1)
        • MySQL (13)
        • 보안 (5)
      • Server (14)
        • Docker (1)
        • Windows (9)
        • Linux (3)
        • jeus (1)
      • Database (6)
      • IT 일반 (15)
      • 리뷰 (38)
        • Book (17)
        • 제품 (2)
        • 영화 소개 (11)
        • 음악 소개 (7)
      • 잡생각 (36)
        • 회고 (3)
        • 컬럼 (4)
        • 자료실 (6)
        • 낙서장 (12)
        • 위시리스트 (2)
        • WOW (1)
        • 덕 (1)
  • 인기 글

  • 최근 댓글

  • 태그

    블로그
    jsp
    디자인패턴
    js패턴
    IT 관련
    SQL
    IT·컴퓨터
    자바
    기초
    사고 싶은 책
    JavaScript
    It
    iT's MY LiFE
    위시리스트
    읽고 싶은 책
    자바스크립트
    IT블로그
    Java
    php
    자바스크립트유틸
Dongkkase
자바스크립트 Module Pattern
상단으로

티스토리툴바