자바스크립트 Observers를 이용한 멀티스레딩 처리 방법

08 Nov 2023

javascript

자바스크립트는 단일 스레드로 동작하는 언어로 알려져 있습니다. 그러나 최근에는 Web Worker와 SharedWorker를 통해 멀티스레딩을 지원하기 시작했습니다. 이러한 멀티스레딩 처리 방법 외에도, Observers를 활용하여 비동기적으로 작업을 수행하는 방법을 소개하고자 합니다.

Observers란?

Observers는 주어진 객체나 데이터의 변화를 감지하고 이에 대한 반응을 정의하는 디자인 패턴입니다. 주로 이벤트 처리 등에서 사용되며, 비동기적으로 작업을 수행하는 데에 적합합니다.

주요 메서드

Observers 패턴에서 사용되는 주요 메서드는 다음과 같습니다.

subscribe: 특정 이벤트에 대해 옵저버를 등록합니다.
unsubscribe: 등록된 옵저버를 제거합니다.
notify: 등록된 모든 옵저버에게 이벤트 발생을 알립니다.

멀티스레딩 처리 방법

멀티스레딩을 처리하기 위해 Observers 패턴을 활용할 수 있습니다. 다음은 이를 위한 간단한 예제 코드입니다.

// Observable 객체 생성
class Observable {
  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 {
  constructor(name) {
    this.name = name;
  }

  update(data) {
    console.log(`${this.name} received data: ${data}`);
    // 비동기 작업 수행
  }
}

// Observable 객체와 Observer 객체 생성
const observable = new Observable();
const observer1 = new Observer("Observer 1");
const observer2 = new Observer("Observer 2");

// 옵저버 등록
observable.subscribe(observer1);
observable.subscribe(observer2);

// 데이터 변경 시 옵저버에게 알림
observable.notify("New data");

// 옵저버 제거
observable.unsubscribe(observer2);

위 코드에서 Observable 클래스는 데이터 변경을 감지하고, 이를 등록된 옵저버에게 알리는 역할을 합니다. Observer 클래스는 Observable 객체로부터 데이터를 수신하고, 비동기 작업을 처리하는 역할을 합니다.

결론

자바스크립트에서 멀티스레딩 처리를 위해 Observers 패턴을 활용할 수 있습니다. Observers 패턴은 비동기 작업을 감지하고 이에 대한 반응을 정의하는 데에 유용한 디자인 패턴입니다.

더 자세한 내용은 아래 참고 자료를 참고하시기 바랍니다.

참고 자료

#javascript #멀티스레딩