[JavaScript] 옵저버 패턴

1. 개요

JavaScript 옵저버 패턴은 **주체(Subject)**와 관찰자(Observer) 간의 **느슨한 결합(Loose Coupling)**을 통해, 이벤트 발생 시 여러 객체에 알림을 전파하는 디자인 패턴입니다. 이 패턴은 **이벤트 주도 프로그래밍(Event-Driven Programming)**에서 주로 사용되며, 주체의 상태가 변경되면 자동으로 관찰자에게 이를 알리는 구조를 가집니다.

---

2. 옵저버 패턴 개념

2-1. 옵저버 패턴이란?

옵저버 패턴(Observer Pattern)은 발행-구독(Pub-Sub) 모델의 기초가 되는 디자인 패턴으로, 객체 간의 강한 의존성을 제거하여 유연한 이벤트 처리를 가능하게 합니다.

2-2. 옵저버 패턴의 핵심 요소

• 주체(Subject): 상태를 가지고 있으며, 관찰자를 등록/제거하고 상태 변경 시 알림을 보냅니다.
• 관찰자(Observer): 주체를 구독하고 있다가, 주체의 상태가 변경되면 자동으로 업데이트됩니다.

---

3. JavaScript에서 옵저버 패턴 구현

3-1. 기본적인 옵저버 패턴 구현

// 1. 주체(Subject) 정의
class Subject {
    constructor() {
        this.observers = []; // 관찰자 목록
    }

    // 관찰자 추가
    addObserver(observer) {
        this.observers.push(observer);
    }

    // 관찰자 제거
    removeObserver(observer) {
        this.observers = this.observers.filter(obs => obs !== observer);
    }

    // 상태 변경 시 모든 관찰자에게 알림
    notifyObservers(data) {
        this.observers.forEach(observer => observer.update(data));
    }
}

// 2. 관찰자(Observer) 정의
class Observer {
    constructor(name) {
        this.name = name;
    }

    update(data) {
        console.log(`${this.name}가 알림을 받음:`, data);
    }
}

// 3. 옵저버 패턴 테스트
const subject = new Subject();

const observer1 = new Observer("Observer 1");
const observer2 = new Observer("Observer 2");

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notifyObservers("이벤트 발생!");

---

4. 실전 예제: 버튼 클릭 이벤트 구독 시스템

4-1. 이벤트 리스너를 활용한 옵저버 패턴

// 버튼 주체 정의
class ButtonSubject {
    constructor() {
        this.observers = [];
    }

    addObserver(observer) {
        this.observers.push(observer);
    }

    removeObserver(observer) {
        this.observers = this.observers.filter(obs => obs !== observer);
    }

    notifyObservers(event) {
        this.observers.forEach(observer => observer.update(event));
    }
}

// 클릭 이벤트를 관찰하는 객체 정의
class ClickObserver {
    constructor(name) {
        this.name = name;
    }

    update(event) {
        console.log(`${this.name}가 클릭 이벤트를 감지함:`, event.type);
    }
}

// 버튼 주체 및 관찰자 생성
const buttonSubject = new ButtonSubject();

const observerA = new ClickObserver("Observer A");
const observerB = new ClickObserver("Observer B");

buttonSubject.addObserver(observerA);
buttonSubject.addObserver(observerB);

// 버튼 클릭 이벤트 발생 시 알림 전파
document.getElementById("myButton").addEventListener("click", (event) => {
    buttonSubject.notifyObservers(event);
});

버튼 클릭 시:
Observer A가 클릭 이벤트를 감지함: click
Observer B가 클릭 이벤트를 감지함: click

---

5. 옵저버 패턴 vs 이벤트 버스 vs Pub-Sub

패턴	유형 특징	예시
옵저버 패턴	주체(Subject)와 관찰자(Observer) 간 1:N 관계	UI 이벤트 처리, 상태 변화 감지
이벤트 버스	중앙 이벤트 관리 시스템을 활용	Vue의 Event Bus, Node.js EventEmitter
Pub-Sub 패턴	발행자(Publisher)와 구독자(Subscriber) 간 중간 브로커 활용	Kafka, MQTT, Redis Pub/Sub

---

6. 결론 – 옵저버 패턴의 활용

• 옵저버 패턴은 객체 간 결합도를 낮춰 유지보수성과 확장성을 높입니다.
• DOM 이벤트 처리, 상태 변화 감지, 비동기 이벤트 처리 등에서 유용하게 사용됩니다.
• 이벤트 버스나 Pub-Sub 패턴과 비교하며, 목적에 맞는 패턴을 선택하는 것이 중요합니다.