JavaScript로 구현하는 Observer 디자인 패턴

Observer 디자인 패턴은 웹 개발에서 매우 유용한 패턴 중 하나입니다. 이 패턴을 이해하고 사용하면, 여러분의 웹 애플리케이션에서 다양한 이벤트를 효과적으로 관리할 수 있습니다. JavaScript에서 Observer 패턴을 구현하는 방법을 단계별로 살펴보겠습니다.

Observer 패턴이란?

Observer 패턴은 객체(Subject)가 이벤트가 발생했을 때 하나 이상의 관찰자(Observer)에게 알림을 보내는 디자인 패턴입니다. 이를 통해 객체 간의 결합도를 낮추면서도 이벤트에 대응할 수 있습니다.

JavaScript에서 Observer 패턴 구현하기

JavaScript로 Observer 패턴을 구현하는 것은 생각보다 간단합니다. 기본적으로는 Subject와 Observer를 만들고, Subject는 Observer에게 이벤트 발생을 알리는 역할을 합니다.

1. Observer 생성하기

먼저, Observer를 생성해야 합니다. Observer는 이벤트가 발생했을 때 실행될 함수를 가지고 있습니다.

class Observer {
    constructor(fn) {
        this.update = fn;
    }
}

2. Subject 생성하기

다음으로, Subject를 생성합니다. Subject는 Observer를 관리하고, 이벤트가 발생했을 때 모든 Observer에게 알립니다.

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

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

    removeObserver(observer) {
        const index = this.observers.indexOf(observer);
        if (index > -1) {
            this.observers.splice(index, 1);
        }
    }

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

3. Observer와 Subject 연결하기

이제 Observer와 Subject를 연결해야 합니다. Observer를 생성하고 Subject에 추가합니다. 그런 다음, 이벤트가 발생했을 때 Subject가 모든 Observer에게 알릴 수 있도록 합니다.

// Observer 인스턴스 생성
const observer1 = new Observer(data => console.log(`Observer 1: ${data}`));
const observer2 = new Observer(data => console.log(`Observer 2: ${data}`));

// Subject 인스턴스 생성
const subject = new Subject();

// Observer를 Subject에 추가
subject.addObserver(observer1);
subject.addObserver(observer2);

// 이벤트 발생 시뮬레이션
subject.notify('Hello, Observer Pattern!');

이 코드를 실행하면, 두 Observer 모두 Subject로부터 이벤트 알림을 받고, 각자의 update 함수를 실행하여 메시지를 출력합니다.

결론

JavaScript로 Observer 디자인 패턴을 구현하는 것은 애플리케이션에서 이벤트 기반의 통신을 구현할 때 매우 유용합니다. 이 패턴을 사용하면 객체 간의 결합도를 낮추고, 유지 보수성과 확장성을 높일 수 있습니다. 위의 예제를 참고하여 여러분의 프로젝트에 Observer 패턴을 적용해 보세요.