옵저버 패턴

옵저버 패턴(Observer Pattern)

객체의 상태 변화를 하나 이상의 관찰자(옵저버)들에게 자동으로 알리고 업데이트하는 일대다 관계 의존성을 정의하는 패턴

• 하나의 주제(서브젝트)와 하나 이상의 관찰자(옵저버)들 간의 일대다 관계

  • 상태(데이터)의 주인은 주제(Subject)

  • 옵저버는 데이터가 변경될 때 주제에서 갱신 해주기를 기다리는 입장이라 의존성을 가진다 할 수 있음

  • 주제는 상태가 변경될 때마다 옵저버들에게 변경사실을 통보

  • 의존하는 옵저버들은 그 통보를 받아 스스로 상태를 갱신

• 주제와 관찰자는 서로 상호작용하지만, 구체적인 구현은 모르는 느슨하게 결합되어있음

  • 주제는 관찰자의 구체적인 클래스에 대한 정보를 알 필요 없고, 오직 관찰자 인터페이스만 알고있으면 됨

  • 즉, 의존은 하되 다른 객체의 세세한 부분까지 다 알필요가 없다. ⇒ 느슨한 결합, 유연성 확보

• 한 주제의 상태 변화를 다수의 관찰자에게 자동으로 통지함으로써 시스템의 유연성과 확장성을 높임

  • 새로운 관찰자를 추가하거나, 기존 관찰자를 제거해도 주제는 코드를 수정하지 않아도 됨

• SOLID 원칙중 OCP(개방-폐쇄 원칙)을 준수한 패턴

옵저버 패턴은 여러 방법으로 구현할 수 있다.

느슨한 결합(Loose Coupling): 객체들이 상호작용 할 수 있지만, 서로를 잘 모르는 관계

• 느슨하게 결합하는 디자인을 사용하면 변경사항이 생겨도 무난히 처리할 수 있는 유연한 시스템을 구축할 수 있다.

• 상호 의존성 최소화

---

주제에 들어있는 데이터를 처리하는 방법

• push vs pull, 어느 하나를 선택하든 구현 방법의 문제

• 옵저버가 필요한 데이터를 골라서 가져가도록 만드는 pull 방식이 대체적으로 더 좋다고 한다.

Push 방식

주제가 관찰자로 데이터를 보내는 푸시(push)

• 주제가 관찰자에게 알림을 보낼 때 갱신된 데이터를 매개변수로 보내는 방식

Pull 방식

관찰자가 주제로부터 데이터를 당겨오는 풀(pull)

• 관찰자가 필요한 데이터를 골라서 가져가도록 만드는 방법

• 주제는 데이터를 제공하기 위해 게터 메서드를 제공해야함

• 주제 클래스에 새로운 상태가 추가되더라도 관찰자 인터페이스가 달라지지 않음

---

1. 주제 인터페이스 정의

관찰자들을 관리하고, 상태가 변경될 때 관찰자들에게 알리는 역할을 정의

interface Subject {
  registerObserver(o: Observer): void
  removeObserver(o: Observer): void
  notifyObserver(): void
}

2. 관찰자 인터페이스 정의

주제로부터 알림을 받았을때 수행할 업데이트 동작을 정의

interface Observer {
  updated(subject: Subject): void
}

3. 구체적인 주제 정의

class NewsAgency implements Subject {
  private observers: Observer[] = []
  private news: string
  
  registerObserver(observer) {
    if (this.observers.includes(observer)) return
    
    this.observers = [...this.observers, observer]
  }
  
  removeObserver(observer) {
    this.observers = this.observer.filter(obs => obs !== observer)
  }
  
  notifyObserver() {
    for (observer of observers) {
      observer.updated(this)
    }
  }
  
  setNews(news: string) {
    this.news = news
    notifyObserver()
  }
  
  getNews() {
    return this.news;
  }
}

4. 구체적인 옵저버 정의

class NewsChannel implements Observer {
  constructor(private name: string) {}
  
  updated(subject: Subject) {
    if (subject instanceof NewsAgency) {
      const news = subject.getNews();
      console.log(`${this.name} recived news ${news}`)
    }
  }
}

5. 클라이언트 코드

const newsAgency = new NewsAgency()
const channelA = new NewsChannel('A')
const channelB = new NewsChannel('B')

newsAgency.registerObserver(channelA)
newsAgency.registerObserver(channelB)
newsAgency.setNews('observer pattern example')

/*
  A recived news observer pattern example
  B recived news observer pattern example
*/

newsAgency.removeObserver(channelA);
newsAgecny.setNews('removeObserver example');

// B recived news removeObserver example;

---

관찰자가 자체적으로 구독 해지하는 방법

• 관찰자가 스스로 해지할 수 있게 하려면, 관찰자에게 해지를 요청할 수 있는 주제 객체에 대한 참조가 필요

• 즉, 관찰자가 등록될 떄 주제 객체의 참조를 필드로 저장

class newsChannel implements Observer {
  private name: string
  private subject: Subject
  
  constructor(name: string, subject: Subject) {
    this.name = name;
    this.subject = subject;
    this.subject.registerObserver(this); // 생성시 바로 구독
  }
  
  unSubsrcibe(): void {
    this.subject.removeObserver(this); // 구독 해지 요청
  }
}