디자인 패턴 (모듈 패턴, 싱글턴 등)

1. 도입 (왜 배워야 하는가)

디자인 패턴은 소프트웨어 개발에서 자주 발생하는 문제를 해결하기 위한 일반적인 해결책입니다. 특히 JavaScript와 같은 동적 언어에서는 코드의 구조와 유지보수성을 높이는 데 중요한 역할을 합니다. 실무에서는 복잡한 애플리케이션을 작성할 때, 재사용성과 효율성을 고려해야 하므로 디자인 패턴에 대한 이해가 필수적입니다.

디자인 패턴을 모르면 코드가 복잡해지고, 예기치 않은 버그가 발생할 확률이 높아집니다. 또한 팀원 간의 코드 이해도가 떨어질 수 있으며, 장기적으로 프로젝트의 유지보수가 어려워질 수 있습니다.

2. 핵심 개념 설명

모듈 패턴

모듈 패턴은 코드의 캡슐화를 통해서 특정 기능을 독립적으로 관리할 수 있도록 도와주는 패턴입니다. 마치 상자에 여러 물건을 넣어두고, 필요할 때마다 꺼내쓰는 것과 같습니다.

싱글턴 패턴

싱글턴 패턴은 클래스의 인스턴스가 단 하나만 생성되도록 보장하는 패턴입니다. 이는 마치 회사의 CEO가 한 명만 있는 것과 같습니다. 여러 곳에서 CEO를 참조할 수 있지만, 실제 CEO는 하나뿐입니다.

3. 기본 코드 예제

모듈 패턴 예제

const Counter = (function() {
    let count = 0; // private variable

    return {
        increment: function() {
            count++;
            console.log(count);
        },
        decrement: function() {
            count--;
            console.log(count);
        },
        getCount: function() {
            return count;
        }
    };
})();

// 사용 예
Counter.increment(); // 1
Counter.increment(); // 2
Counter.decrement(); // 1
console.log(Counter.getCount()); // 1

• const Counter = (function() {...}) : 즉시 실행 함수 표현식(IIFE)로 모듈을 생성합니다.
• let count = 0; : 외부에서 접근할 수 없는 프라이빗 변수를 생성합니다.
• return { ... } : 외부에서 사용할 수 있는 메서드들을 반환합니다.
• Counter.increment() : 카운터를 증가시키고 현재 값을 출력합니다.

싱글턴 패턴 예제

const Singleton = (function() {
    let instance;

    function createInstance() {
        const object = new Object("I am the instance");
        return object;
    }

    return {
        getInstance: function() {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();

// 사용 예
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();

console.log(instance1 === instance2); // true

• let instance; : 인스턴스를 저장할 변수를 선언합니다.
• createInstance() : 새로운 객체를 생성하는 함수입니다.
• getInstance() : 인스턴스가 없는 경우에만 새로 생성합니다.
• console.log(instance1 === instance2); : 두 객체가 동일한 인스턴스임을 확인합니다.

4. 실전 활용 예제

쇼핑몰 장바구니 구현 (모듈 패턴)

쇼핑몰에서 장바구니를 구현할 때, 모듈 패턴을 사용하여 장바구니의 기능을 캡슐화할 수 있습니다.

const ShoppingCart = (function() {
    let items = [];

    return {
        addItem: function(item) {
            items.push(item);
            console.log(${item} added to cart.);
        },
        removeItem: function(item) {
            items = items.filter(i => i !== item);
            console.log(${item} removed from cart.);
        },
        getItems: function() {
            return items;
        }
    };
})();

// 사용 예
ShoppingCart.addItem("Apple");
ShoppingCart.addItem("Banana");
console.log(ShoppingCart.getItems()); // ["Apple", "Banana"]
ShoppingCart.removeItem("Apple");
console.log(ShoppingCart.getItems()); // ["Banana"]

이 예제에서는 장바구니에 아이템을 추가하고 제거하는 기능을 모듈로 구현하여 코드의 재사용성과 관리 용이성을 높입니다.

설정 관리 객체 (싱글턴 패턴)

설정 관리 객체를 구현할 때, 싱글턴 패턴을 사용하여 애플리케이션 전역에서 한 번만 생성하도록 할 수 있습니다.

const ConfigManager = (function() {
    let instance;

    function createInstance() {
        const config = {
            apiUrl: "https://api.example.com",
            apiKey: "123456789"
        };
        return config;
    }

    return {
        getInstance: function() {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();

// 사용 예
const config1 = ConfigManager.getInstance();
const config2 = ConfigManager.getInstance();
console.log(config1 === config2); // true
console.log(config1.apiUrl); // "https://api.example.com"

이 설정 관리 객체는 애플리케이션의 API URL과 키를 전역에서 관리하고, 여러 곳에서 동일한 설정을 사용할 수 있게 합니다.

5. 흔한 실수와 주의사항

모듈 패턴

실수: 프라이빗 변수를 외부에서 수정하려는 시도

Counter.count = 10; // 잘못된 접근
// count는 외부에서 접근할 수 없으므로, 위 코드는 무시된다.

올바른 코드 프라이빗 변수를 사용하는 방법을 명확히 이해하고 사용해야 합니다.

싱글턴 패턴

실수: 인스턴스를 여러 번 생성하는 경우

const instance1 = Singleton.getInstance();
const instance2 = new Singleton(); // 잘못된 접근

올바른 코드 싱글턴 패턴을 사용할 때는 인스턴스를 직접 생성하지 않도록 주의해야 합니다.

6. 정리

• 디자인 패턴은 복잡한 소프트웨어 개발에서 코드의 구조와 유지보수성을 높여줍니다.
• 모듈 패턴은 코드 캡슐화를 통해 독립적 기능 관리를 가능하게 합니다.
• 싱글턴 패턴은 인스턴스를 하나만 생성하여 전역적으로 공유할 수 있도록 합니다.
• 다음에 학습할 주제로는 "팩토리 패턴"이나 "옵저버 패턴"을 추천합니다. 이들 또한 실무에서 자주 사용되는 강력한 패턴입니다.