자바스크립트 이벤트 루프와 관련된 대표적인 디자인 패턴은 무엇인가요?

03 Oct 2023

javascript

Observer 패턴은 주로 이벤트 기반 프로그래밍에서 사용되며, 이벤트가 발생할 때마다 관찰자들은 등록된 이벤트 핸들러를 호출하게 됩니다. 이런 방식으로 이벤트와 그에 대한 처리 로직을 분리함으로써 코드의 유연성과 재사용성을 높일 수 있습니다.

예를 들어, 클릭 이벤트에 대한 처리를 위해 Observer 패턴을 사용할 수 있습니다. 클릭 이벤트가 발생하면 등록된 관찰자에게 클릭 이벤트를 전달하고, 관찰자들은 이벤트 핸들러를 실행하여 해당 클릭에 대한 동작을 수행합니다.

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

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

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

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

// 관찰자들을 생성
const clickObserver1 = function(event) {
  console.log(`Click Observer 1: ${event}`);
}

const clickObserver2 = function(event) {
  console.log(`Click Observer 2: ${event}`);
}

// 이벤트를 담당하는 객체 생성
const eventObserver = new EventObserver();

// 관찰자들을 등록
eventObserver.subscribe(clickObserver1);
eventObserver.subscribe(clickObserver2);

// 클릭 이벤트가 발생하면 이벤트를 관찰자들에게 알림
eventObserver.notify("click");

// 결과:
// Click Observer 1: click
// Click Observer 2: click

위의 예시에서는 EventObserver 클래스가 Observer 패턴을 구현한 것입니다. subscribe 메소드를 통해 관찰자들을 등록하고, unsubscribe 메소드를 통해 관찰자들을 제거할 수 있습니다. notify 메소드를 호출하면 등록된 관찰자들에게 이벤트를 전달하게 됩니다.

Observer 패턴은 이벤트 처리를 모듈화하고, 코드의 재사용성과 유지보수성을 높이기 위해 유용하게 사용될 수 있습니다.

#javascript #design-patterns