자바스크립트 Decorator Pattern

Decorator Pattern(데코레이터 패턴) 은 기존 객체에 새로운 기능을 동적으로 추가할 수 있게 해주는 구조 디자인 패턴입니다. 클래스나 함수를 수정하지 않고도 기능을 확장할 수 있어 유지보수성과 유연성이 매우 높습니다.

---

🧱 Decorator Pattern이란?

Decorator Pattern은 기존 객체를 감싸는(wrapper) 방식으로 기능을 확장하는 구조입니다. 자바스크립트에서는 고차 함수나 클래스 기반의 데코레이터를 통해 쉽게 구현할 수 있습니다.

function coffee() {
    return '커피';
}

function withMilk(beverage) {
    return function () {
        return beverage() + ' + 우유';
    };
}

function withSugar(beverage) {
    return function () {
        return beverage() + ' + 설탕';
    };
}

const milkCoffee = withMilk(coffee);
const sweetMilkCoffee = withSugar(milkCoffee);

console.log(sweetMilkCoffee()); // 커피 + 우유 + 설탕

---

✅ 장점

1. 유연한 기능 확장: 객체나 함수 자체를 변경하지 않고 기능 추가 가능
2. 조합 가능성: 여러 데코레이터를 조합하여 다양한 기능 생성 가능
3. 단일 책임 원칙 준수: 각 기능이 분리되어 있어 유지보수에 유리함

---

❌ 단점

1. 구조 파악이 어려움: 데코레이터가 많아질수록 실행 흐름을 파악하기 어려움
2. 디버깅 어려움: 디버깅 시 원본 객체와 감싸는 객체 사이를 추적하기 힘듦
3. 남용 시 복잡도 증가: 단순한 기능에도 과도한 래핑을 사용할 수 있음

---

🛠️ 실전 예시: 로그인 기능 데코레이터

function login(user) {
    return `${user} 로그인 완료`;
}

function logDecorator(fn) {
    return function (...args) {
        console.log('로그 기록:', ...args);
        return fn(...args);
    };
}

function authDecorator(fn) {
    return function (user) {
        if (user !== 'admin') return '접근 거부';
        return fn(user);
    };
}

const secureLogin = authDecorator(logDecorator(login));
console.log(secureLogin('admin'));  // 로그인 성공
console.log(secureLogin('guest'));  // 접근 거부

---

🧩 결론

Decorator Pattern은 기존 구조를 건드리지 않고도 기능을 추가할 수 있어 매우 강력한 패턴입니다. 특히 단일 책임 원칙(SRP) 을 지키면서도 조합 가능한 아키텍처를 만들 수 있는 장점이 있습니다. 다만 구조가 복잡해지기 쉬우므로, 기능 단위로 명확하게 분리해 사용하는 것이 중요합니다.