[Design Pattern] Observer Pattern

✍ Observer Pattern 이란...

주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴이다. 주로 분산 이벤트 핸들링 시스템을 구현하는 데 사용된다. 발행/구독 모델로 알려져 있기도 하다.

=> 아주 간단히 얘기하자면 어떤 객체의 상태가 변할 때 그와 연관된 객체 들에게 알림을 보내는 디자인 패턴이 옵저버 패턴이라고 할 수 있다.

✍ Observer Pattern의 특징

1. 주체 객체와 옵저버 객체 : 옵저버 패턴에는 2 종류의 객체가 있는데, 주체 객체는 관찰을 당하는 대상이며 옵저버 객체는 상태가 변하는 주체로부터 알림을 받는 객체이다.

2. 1대 다 관계 : 주체과 옵저버 사이에서 1대 다 관계를 주로 가지고 있기에 주체의 상태 변화가 감지 될 시 대상 옵저버들에게 동시에 그 변화를 알려 줄 수 있다.

3. 약한 관계 : 객체들 사이에 연결 고리가 약하기 때문에 언제든지 연결 고리가 변할 수 있다.

4. 알림 시스템 : 위에서도 언급하였듯이 주체의 상태가 변함에 따라 사용된 메서드에 의해 알림이 옵저버에게 전달된다.

5. 동적 바인딩 : 객체들 사이에 동적 바인딩이 허용되기에 서로에게 영향을 주지 않고 옵저버가 추가 되거나 줄어 들 수 있다.

6. 밀당 모델 : Pull 모델에서는 옵저버가 알림을 받았을 시 주체의 상태를 요청할 수 있으며, Push 모델에서는 알림을 받았을 때, 주체가 자신의 상태를 옵저버에게 전달 할 수 있다.

✍ Observer Pattern In JavaScript

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

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

  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index !== -1) {
      this.observers.splice(index, 1);
    }
  }

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

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

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

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

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

subject.notify("State changed");

자바스크립트를 사용하여 간단하게 Observer Pattern을 구현해보았다.

보면 Subject이라는 클래스 내부에 notify 메서드가 존재하는데, 이는 알림이 실행될 때마다 알림의 값을 매개변수로 받아 Subject 객체를 주시하고 있는 옵저버들에게 값들을 전달함으로 써 Subject에 어떤 변화가 있었는지를 전달해 주고 있다.

그리고 addObserver 과 removeObserver 이라는 메서드가 실행될 때 마다 Subject을 지켜보는 Observer를 쉽게 추가 또는 삭제 할 수 있다.

✍ Observer Pattern의 실생활 예제

실생활 예제를 통해 Observer Pattern을 조금 더 쉽게 이해해보자.

1. 기상청 : 기상청이 주체이고 기상 정보를 보여주는 스크린과 모바일 어플이 옵저버가 될 수 있다. 기상청이 기상 정보를 업데이트 할 때 마다 어플들에게 알림이 가고 그러한 정보들이 어플에 반영된다.

2. 주식 시장 : 주식 시장이 여기서는 주체가 되고 투자자들이나 주식 거래자들이 옵저버가 되는데, 주식 시장에 변화가 감지될 때 마다 옵저버들이 귀신 같이 알아챈 후 자신들의 행동을 결정한다.

3. SNS 알림 : 너무나 당연하지만, 유투브를 예를들면, 유투버가 주체 구독자가 옵저버이며, 유투버가 스트리밍 시작, 게시글 작성, 동영상 업로드와 같은 특정 행위를 할 때 마다 구독자들에게 알림이 가게 된다.

구독 및 좋아요 그리고 알림 서비스...그게 바로 옵저버 패턴이다!