Composite Pattern(컴포지트 패턴) 은 객체들을 트리 구조로 구성하여 부분-전체 계층 구조를 동일하게 다룰 수 있도록 하는 구조 디자인 패턴입니다. 개별 객체와 그 객체들의 집합을 동일한 방식으로 처리할 수 있어 유연하고 확장성 높은 설계를 가능하게 합니다.🧱 Composite Pattern이란?Composite Pattern은 단일 객체와 복합 객체를 같은 방식으로 다룰 수 있게 하는 구조입니다. 부모-자식 관계가 있는 UI 트리 구조나 파일 시스템 등 계층 구조가 필요한 상황에서 자주 활용됩니다.class Component { add(component) {} remove(component) {} display(indent = 0) {}}class Leaf extends ..

Chain of Responsibility Pattern(책임 연쇄 패턴) 은 요청을 처리할 수 있는 여러 객체들이 체인 형태로 연결되어, 요청이 처리될 수 있는 객체에게 전달되도록 하는 행동 디자인 패턴입니다. 요청자는 누가 그 요청을 처리하는지 알 필요가 없습니다.🧱 Chain of Responsibility Pattern이란?이 패턴은 여러 처리 객체(Handler)를 연결된 체인으로 구성하고, 요청을 순차적으로 전달하여 처리 가능한 객체가 처리하도록 합니다. 각 객체는 다음 처리자에 대한 참조를 가지고 있으며, 처리 불가능할 경우 이를 다음 객체로 넘깁니다.class Handler { setNext(handler) { this.next = handler; retur..

Iterator Pattern(이터레이터 패턴) 은 컬렉션의 내부 구조를 노출하지 않고도 요소들을 순차적으로 접근할 수 있도록 해주는 행동 디자인 패턴입니다. 자바스크립트의 for...of, next(), Symbol.iterator 등이 이 패턴을 잘 보여줍니다.🧱 Iterator Pattern이란?Iterator Pattern은 객체의 내부 데이터를 순회하는 책임을 별도의 반복자(iterator) 객체로 분리합니다. 이로써 컬렉션의 구조가 변경되더라도 순회 방식은 일관되게 유지할 수 있습니다.const collection = { items: [1, 2, 3], [Symbol.iterator]() { let index = 0; const items = this.it..

State Pattern(상태 패턴) 은 객체의 내부 상태에 따라 행동을 변경할 수 있게 만드는 행동 디자인 패턴입니다. 마치 객체의 클래스가 바뀌는 것처럼 동작을 전환할 수 있어, 복잡한 조건문 대신 명확한 상태 기반 구조를 설계할 수 있습니다.🧱 State Pattern이란?State Pattern은 상태를 별도의 객체로 추출하고, Context 객체가 상태 객체에 행동을 위임하는 구조입니다. 각 상태는 고유한 동작을 가지며, 상태 간 전환도 명확히 정의됩니다.// 상태 클래스들class RedLight { change(light) { console.log("빨간 불 → 초록 불"); light.setState(new GreenLight()); }}class Gr..

Strategy Pattern(전략 패턴) 은 알고리즘 군을 정의하고, 각 알고리즘을 캡슐화하여 필요 시 상호 교체할 수 있게 만드는 행동 디자인 패턴입니다. 동일한 문제를 다양한 방식으로 해결할 수 있도록 유연한 구조를 제공합니다.🧱 Strategy Pattern이란?Strategy Pattern은 동일한 문제를 해결하는 다양한 전략(알고리즘)을 정의하고, 런타임에 동적으로 전략을 선택할 수 있게 도와주는 구조입니다. 주로 조건문으로 분기되는 로직을 객체화하여 깔끔하게 정리할 때 유용합니다.// 전략 인터페이스 역할class PaymentStrategy { pay(amount) {}}// 구체적인 전략들class CardPayment extends PaymentStrategy { pay(a..

Command Pattern(커맨드 패턴) 은 요청을 캡슐화하여 호출자(Invoker)와 실행자(Receiver)를 분리하는 구조 디자인 패턴입니다. 명령을 객체로 만들기 때문에, 요청의 저장, 실행 취소(Undo), 재실행(Redo), 큐잉 등의 유연한 처리가 가능합니다.🧱 Command Pattern이란?Command Pattern은 명령(Command)을 하나의 객체로 추상화하여, 실행 로직과 요청을 분리하는 구조입니다. 이는 다양한 실행 요청을 일관된 방식으로 처리하거나, 실행 시점을 조정할 수 있는 장점을 제공합니다.// Receiver: 실제 로직을 수행하는 객체class Light { on() { console.log("조명이 켜졌습니다."); } off() {..

Mediator Pattern(미디에이터 패턴) 은 객체 간의 복잡한 의존 관계를 하나의 중재자 객체(Mediator)로 통합하여, 객체들이 직접 통신하지 않고 중재자를 통해서만 상호작용하도록 만드는 행동 디자인 패턴입니다.🧱 Mediator Pattern이란?Mediator Pattern은 객체 간의 상호작용을 캡슐화하여, 서로 직접 연결되지 않고 중앙 집중식 통신 방식으로 구조를 단순화합니다. 특히 많은 객체가 서로 메시지를 주고받는 UI 구성에서 유용하게 사용됩니다.class ChatMediator { constructor() { this.users = []; } register(user) { this.users.push(user); user...

Observer Pattern(옵서버 패턴) 은 객체 간의 일대다(1:N) 관계를 정의하여, 한 객체의 상태가 변경되었을 때 의존 객체들이 자동으로 알림을 받고 갱신되도록 하는 행동(Behavioral) 디자인 패턴입니다.🧱 Observer Pattern이란?Observer Pattern은 주체(Subject) 와 옵서버(Observer) 로 역할이 나뉘며, 주체는 자신의 상태 변화를 관찰자에게 통보합니다. 자바스크립트에서는 이벤트 시스템이나 상태 관리 로직에 널리 활용됩니다.class Subject { constructor() { this.observers = []; } subscribe(observer) { this.observers.push(observer..

Adapter Pattern(어댑터 패턴) 은 서로 다른 인터페이스를 가진 객체들이 함께 동작할 수 있도록 중간에서 변환해주는 구조 디자인 패턴입니다. 외부 라이브러리나 기존 시스템과의 호환성을 유지하면서 새로운 기능을 통합하고자 할 때 유용하게 사용됩니다.🧱 Adapter Pattern이란?Adapter Pattern은 기존 인터페이스를 클라이언트가 기대하는 다른 인터페이스로 변환하는 역할을 합니다. 어댑터는 기존 객체를 감싸(wrapper) 클라이언트가 원하는 방식으로 동작하게 만들어줍니다.// 기존 코드class OldPrinter { printOld(text) { console.log(`Old print: ${text}`); }}// 새로운 인터페이스를 기대하는 클라이언트..

Proxy Pattern(프록시 패턴) 은 다른 객체에 대한 접근을 제어하기 위해 대리 객체(프록시)를 사용하는 구조 디자인 패턴입니다. 자바스크립트에서는 ES6부터 도입된 Proxy 객체를 통해 이를 쉽게 구현할 수 있습니다.🧱 Proxy Pattern이란?Proxy Pattern은 원본 객체에 대한 접근을 가로채고, 그 앞단에서 행동을 제어하거나 로직을 추가하는 방식입니다. 보안, 로깅, 캐싱, 데이터 검증 등 다양한 용도로 활용됩니다.const user = { name: 'Alice', age: 25};const userProxy = new Proxy(user, { get(target, prop) { console.log(`프로퍼티 접근: ${prop}`); ..