자바스크립트 Observers를 활용한 실시간 데이터 업데이트 방법

08 Nov 2023

javascript

실시간 데이터 업데이트는 현대 웹 애플리케이션에서 매우 중요한 요소입니다. 사용자가 어떤 동작을 취한 경우, 해당 액션에 따라 데이터를 실시간으로 업데이트하여 사용자에게 최신 정보를 제공할 수 있습니다. 이를 위해 자바스크립트 Observers 패턴을 활용하는 방법을 알아보겠습니다.

Observers 패턴 이란?

Observers 패턴은 객체 간의 의존성을 최소화하면서 한 객체의 상태 변화를 다른 객체에게 알리는 디자인 패턴입니다. 일반적으로 Subject 객체는 Observer 객체들을 등록하고, Subject의 상태가 변화하면 Observer들에게 알리는 역할을 합니다. 이 패턴은 실시간 데이터 업데이트와 같이 객체 간의 상호작용이 필요한 경우에 사용됩니다.

자바스크립트 Observers 패턴의 구현

Subject 객체 생성

Subject 객체는 상태의 변화를 관찰하고, Observer 객체들에게 알리는 주체 역할을 합니다. Subject 객체에는 상태를 저장하고 변경하는 메서드, Observer 객체들을 등록 및 제거하는 메서드가 포함되어야 합니다.

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

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

  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  setState(newState) {
    this.state = newState;
    this.notifyObservers();
  }

  notifyObservers() {
    this.observers.forEach(observer => observer.update(this.state));
  }
}

Observer 객체 생성

Observer 객체는 Subject 객체의 상태 변화를 감지하고, 필요한 동작을 수행하는 역할을 합니다. Observer 객체에는 업데이트를 처리하는 메서드가 포함되어야 합니다.

class Observer {
  update(newState) {
    // 데이터 업데이트 로직 구현
    console.log(`새로운 상태: ${newState}`);
  }
}

사용 예시

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.registerObserver(observer1);
subject.registerObserver(observer2);

subject.setState("새로운 데이터");

subject.removeObserver(observer2);

subject.setState("업데이트된 데이터");

결론

자바스크립트 Observers 패턴을 활용하면 상태의 변화를 관찰하여 실시간으로 데이터를 업데이트할 수 있습니다. 이를 통해 사용자에게 최신 정보를 제공하고, 웹 애플리케이션의 사용성을 향상시킬 수 있습니다. Observers 패턴은 자바스크립트뿐만 아니라 다른 프로그래밍 언어에서도 활용될 수 있으며, 개발자들은 이를 활용하여 웹 애플리케이션을 더욱 동적이고 반응형으로 만들 수 있습니다.

참고 자료:

JavaScript Design Patterns

MDN web docs - Mutation Observer

#Observers #실시간데이터업데이트