Observer Pattern 디자인패턴 완벽 가이드

Observer Pattern의 기초 개념부터 실전 활용까지 단계별로 학습합니다. 옵저버 패턴의 핵심 원리와 JavaScript로 구현하는 방법을 예제와 함께 배워봅니다.

---

---

들어가며

이 글에서는 Observer Pattern 디자인패턴 완벽 가이드에 대해 상세히 알아보겠습니다. 총 10가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. Observer_Pattern_기본_개념
2. 상태_변화_알림_구현
3. Observer_구현
4. 실전_예제_뉴스_구독_시스템
5. 구독_취소_기능
6. 실시간_주식_가격_모니터링
7. Event_Emitter_패턴
8. 사용자_인증_상태_관리
9. 데이터_바인딩_구현
10. 완전한_Observer_패턴_예제

---

1. Observer_Pattern_기본_개념

개요

Observer Pattern은 객체의 상태 변화를 관찰하는 관찰자들에게 자동으로 알림을 보내는 디자인 패턴입니다.

코드 예제

class Subject {
  constructor() {
    this.observers = [];
  }

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

설명

Subject 클래스는 관찰자들을 배열로 관리하며, subscribe 메서드로 새로운 관찰자를 등록합니다.

---

2. 상태_변화_알림_구현

개요

Subject의 상태가 변경되면 모든 관찰자에게 notify 메서드를 통해 알림을 전송합니다.

코드 예제

class Subject {
  notify(data) {
    this.observers.forEach(observer => {
      observer.update(data);
    });
  }
}

설명

notify 메서드는 등록된 모든 관찰자의 update 메서드를 호출하여 변경 사항을 전달합니다.

---

3. Observer_구현

개요

Observer는 Subject의 변화를 감지하고 반응하는 객체로, update 메서드를 구현해야 합니다.

코드 예제

class Observer {
  constructor(name) {
    this.name = name;
  }

  update(data) {
    console.log(`${this.name} received: ${data}`);
  }
}

설명

Observer 클래스는 update 메서드를 통해 Subject로부터 받은 데이터를 처리합니다.

---

4. 실전_예제_뉴스_구독_시스템

개요

뉴스 발행자와 구독자를 구현한 실전 예제입니다. 뉴스가 발행되면 모든 구독자가 알림을 받습니다.

코드 예제

class NewsAgency {
  constructor() {
    this.subscribers = [];
  }

  publish(news) {
    this.subscribers.forEach(sub => sub.update(news));
  }
}

설명

NewsAgency는 뉴스를 발행하면 모든 구독자에게 자동으로 알림을 전송하는 Subject 역할을 합니다.

---

5. 구독_취소_기능

개요

관찰자가 더 이상 알림을 받지 않으려면 구독을 취소할 수 있어야 합니다.

코드 예제

class Subject {
  unsubscribe(observer) {
    this.observers = this.observers.filter(
      obs => obs !== observer
    );
  }
}

설명

unsubscribe 메서드는 배열에서 해당 관찰자를 제거하여 더 이상 알림을 받지 않도록 합니다.

---

6. 실시간_주식_가격_모니터링

개요

주식 가격 변화를 여러 디스플레이에서 실시간으로 모니터링하는 예제입니다.

코드 예제

class Stock {
  setPrice(price) {
    this.price = price;
    this.notify({ price, time: Date.now() });
  }
}

const display = { update: (d) => console.log(d.price) };

설명

주식 가격이 변경되면 모든 디스플레이가 자동으로 업데이트되어 최신 가격을 표시합니다.

---

7. Event_Emitter_패턴

개요

Node.js의 EventEmitter처럼 이벤트 기반 Observer 패턴을 구현할 수 있습니다.

코드 예제

class EventEmitter {
  on(event, callback) {
    this[event] = this[event] || [];
    this[event].push(callback);
  }

  emit(event, data) {
    this[event]?.forEach(cb => cb(data));
  }
}

설명

이벤트 이름별로 콜백을 등록하고, emit으로 해당 이벤트의 모든 콜백을 실행합니다.

---

8. 사용자_인증_상태_관리

개요

사용자의 로그인/로그아웃 상태 변화를 여러 컴포넌트에서 관찰하는 예제입니다.

코드 예제

class AuthService {
  login(user) {
    this.currentUser = user;
    this.notify({ type: 'login', user });
  }

  logout() {
    this.notify({ type: 'logout' });
  }
}

설명

인증 상태가 변경되면 UI 컴포넌트들이 자동으로 업데이트되어 사용자 경험을 개선합니다.

---

9. 데이터_바인딩_구현

개요

Vue나 React처럼 데이터 변경 시 자동으로 뷰를 업데이트하는 간단한 데이터 바인딩을 구현합니다.

코드 예제

class Model {
  set(key, value) {
    this.data[key] = value;
    this.notify({ key, value });
  }
}

const view = { update: (d) => render(d.value) };

설명

모델의 데이터가 변경되면 관찰하고 있는 뷰가 자동으로 리렌더링됩니다.

---

10. 완전한_Observer_패턴_예제

개요

모든 기능을 포함한 완전한 Observer 패턴 구현 예제입니다.

코드 예제

class Observable {
  constructor() { this.observers = []; }
  subscribe(fn) { this.observers.push(fn); }
  unsubscribe(fn) {
    this.observers = this.observers.filter(o => o !== fn);
  }
  notify(data) { this.observers.forEach(fn => fn(data)); }
}

설명

Observable 클래스는 구독, 구독 취소, 알림 기능을 모두 제공하는 완전한 구현체입니다.

---

마치며

이번 글에서는 Observer Pattern 디자인패턴 완벽 가이드에 대해 알아보았습니다. 총 10가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#JavaScript #ObserverPattern #DesignPattern #EventDriven #PubSub