옵저버 패턴 ( Observer Pattern )

 

옵저버 패턴이란 ? 

주체가 어떤 객체(object)의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴입니다.

The Observer pattern, also known as the Publish/Subscribe pattern, facilitates communication between two entities: the subject (also called the observable) and the observers (or subscribers). The subject is responsible for maintaining a list of observers and notifying them when a change occurs. Observers, on the other hand, subscribe to the subject and receive updates whenever the subject's state changes.

옵저버 패턴은 Publish/Subscribe 패턴으로도 알려져 있으며, 두 개체인 주체(subject, 또는 observable)와 옵저버(subscriber) 간의 통신을 용이하게 만듭니다. 주체는 옵저버 목록을 유지하고, 상태가 변경될 때 옵저버들에게 알림을 보냅니다. 반면, 옵저버는 주체에 구독하고, 주체의 상태가 변경될 때마다 업데이트를 받습니다.

 

자바스크립트 코드로 보는 옵저버 패턴 예시 코드 

자바스크립트에서는 이벤트 기반 특성과 콜백 지원으로 인해 옵저버 패턴을 구현하기에 유연한 환경을 제공합니다.

 

// Subject (Observable)
class Subject {
  constructor() {
    this.observers = [];
  }
 
  subscribe(observer) {
    this.observers.push(observer);
  }
 
  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }
 
  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}
 
// Observer
class Observer {
  update(data) {
    // Handle the updated data
    console.log("Received data:", data);
  }
}
 
// Usage
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();
 
subject.subscribe(observer1);
subject.subscribe(observer2);
 
subject.notify("Hello, observers!");
 
// Output:
// Received data: Hello, observers!
// Received data: Hello, observers!

위쪽 코드에서는 우리는 옵저버 배열을 유지하고 있는 주체 클래스를 정의했습니다.  이 클래스에서는 구독, 구독취소, 알람을 보내는 메소드가 제공됩니다. 옵저버 클래스는 업데이트 받을때 개별 옵저버 동작이 정의되어 있어야합니다. 

 

또한 프록시 객체를 통해서도 구현을 해볼 수 있겠습니다. 

 

프록시 객체란 ? 

어떠한 대상의 기본적인 동작의 작업을 가로챌 수 있는 객체를 뜻하며, 자바스크립트에서 프록시 객체는 두개의 매개변수를 가집니다.

 

- target: 프록시 대상

- handler: 프록시 객체의 target 동작을 가로채서 정의할 동작들이 정해져 있는 함수

 

// 한 객체를 정의합니다.
const originalObject = {
  name: 'John',
  age: 30,
  city: 'New York'
};
 
// 프록시 객체를 정의합니다. 
const proxyObject = new Proxy(originalObject, {
  get: function(target, property) {
    console.log(`Getting ${property} value`);
    return target[property];
  },
  set: function(target, property, value) {
    console.log(`Setting ${property} value to ${value}`);
    target[property] = value;
  }
});
 
// 기존에 정의한 객체를 프로퍼티를 프록시 객체를 통해 접근합니다. 
console.log(proxyObject.name); // Output: Getting name value, John
console.log(proxyObject.age); // Output: Getting age value, 30
 
// 프록시 객체를 통해 기존 객체의 값을 변경합니다.
proxyObject.city = 'Los Angeles'; // Output: Setting city value to Los Angeles
 
// 기존 객체가 변경되었는지 검증합니다. 
console.log(originalObject.city); // Output: Los Angeles