Observer Pattern

📌 목차

• Introduction
• What is Observer Pattern?
• Implementation
• Conclusion
• Reference

📌 Introduction

안녕하세요. 이번 포스팅에서는 Observer Pattern에 대해 알아보겠습니다.

📌 What is Observer Pattern?

옵저버 패턴은 객체의 상태 변화를 관찰 하는 관찰자를 등록하여 상태 변화가 있을때 noti를 주는 디자인 패턴입니다.

📌 Implementation

먼저 subject클래스를 정의 해보겠습니다.

class Subject {
  constructor() {
    this.observers = [];
    return this;
  }
  addObserver(observer) {
    this.observers.push(observer);
    return this;
  }
  removeObserver(observer) {
    this.observers = this.observers.filter((ob) => ob !== observer);
    return this;
  }
  notifyObservers(data) {
    this.observers.forEach((observer) => {
      observer.notify(data);
    });
  }
}

간단하게 observer의 목록을 받을 수 있고 지울 수 있습니다. 그리고 notifyObservers를 통해 각각의 observer들에게 noti를 보낼 수 있습니다.

const subject = new Subject();
const observer1 = { notify: (data) => console.log(`First: ${data}`) };
const observer2 = { notify: (data) => console.log(`Second: ${data}`) };

subject.addObserver(observer1);
subject.addObserver(observer2);
subject.notifyObservers("HELLO");

// RESULT:
// First: HELLO
// Second: HELLO

이렇게 해당 observer들에게 notify를 줄 수 있습니다.

📌 Conclusion

Observer 패턴은 pusher와 같은 실시간을 중요시 하는 것들에 대해 많은 관리 권한을 부여 할 수 있습니다. 특히 회사에서 쓰는 pusher를 Observer 패턴으로 관리를 해주어서 쉽게 vuex의 값들을 정해 주곤 합니다.

📌 Reference

• Suyeon Bak's medeium
• 제로초 디자인 패턴