게시-구독(PubSub) 패턴은 서로 직접 알 필요 없이 애플리케이션의 여러 부분 간 통신을 용이하게 하는 데 사용되는 인기 있는 디자인 패턴입니다. 이 패턴은 이벤트를 게시하고 구독자가 이러한 이벤트에 반응할 수 있는 대규모 애플리케이션에서 구성 요소를 분리하는 데 특히 유용합니다.

이 글에서는 객체 기반 접근 방식과 클래스 기반 접근 방식을 모두 사용하여 JavaScript에서 PubSub 패턴을 구현하는 방법을 살펴보겠습니다. 결국에는 자신의 프로젝트에서 이 패턴을 사용하는 방법을 확실하게 이해하게 될 것입니다.

객체 기반 구현
개체 기반 접근 방식은 단일 전역 이벤트 관리자로 충분한 시나리오에 대해 간단하고 효과적입니다. 이를 구현하는 방법은 다음과 같습니다.

pubsub.js
const PubSub = {
    subscribers: [],

    subscribe: function(subscriber) {
        this.subscribers.push(subscriber);
    },

    publish: function(payload) {
        this.subscribers.forEach(subscriber => {
            subscriber(payload);
        });
    }
};

export default PubSub;

객체 기반 PubSub 사용 방법
애플리케이션에서 필요할 때마다 PubSub 개체를 가져올 수 있습니다. 예는 다음과 같습니다.

// file1.js
import PubSub from './pubsub';

PubSub.subscribe((payload) => {
    console.log('File 1 received:', payload);
});

// file2.js
import PubSub from './pubsub';

PubSub.subscribe((payload) => {
    console.log('File 2 received:', payload);
});

// main.js
import PubSub from './pubsub';

PubSub.publish('Hello from main!');

클래스 기반 구현
유연성을 높이거나 PubSub 시스템의 여러 인스턴스가 필요한 경우 클래스 기반 접근 방식을 사용할 수 있습니다. 이를 통해 자체 구독자 목록을 사용하여 독립적인 PubSub 인스턴스를 생성할 수 있습니다.

class PubSub {
    constructor() {
        this.subscribers = [];
    }

    subscribe(subscriber) {
        this.subscribers.push(subscriber);
    }

    unsubscribe(subscriber) {
        this.subscribers = this.subscribers.filter(sub => sub !== subscriber);
    }

    publish(payload) {
        this.subscribers.forEach(subscriber => {
            try {
                subscriber(payload);
            } catch (error) {
                console.error('Error in subscriber:', error);
            }
        });
    }
}

export default PubSub;

클래스 기반 PubSub 사용 방법
다음은 애플리케이션에서 클래스 기반 PubSub 패턴을 사용하는 방법에 대한 예입니다.

import PubSub from './pubsub';

// Create an instance of PubSub
const pubSubInstance = new PubSub();

// Subscribe to events
pubSubInstance.subscribe((payload) => {
    console.log('Instance 1 received:', payload);
});

pubSubInstance.subscribe((payload) => {
    console.log('Instance 2 received:', payload);
});

// Publish an event
pubSubInstance.publish('Hello from instance!');

결론
PubSub 패턴은 애플리케이션의 여러 부분 간의 통신을 관리하기 위한 강력한 도구입니다. 객체 기반 구현을 사용할지 클래스 기반 구현을 사용할지는 특정 요구 사항에 따라 다릅니다. 객체 기반 접근 방식은 간단하고 간단하며 소규모 프로젝트 또는 단일 글로벌 이벤트 관리자로 충분할 때 이상적입니다. 반면 클래스 기반 접근 방식은 더 많은 유연성을 제공하며 PubSub 시스템의 여러 인스턴스가 필요할 수 있는 대규모 애플리케이션에 더 적합합니다.

이 예제를 자신의 프로젝트에 자유롭게 사용하고 필요에 맞게 수정하세요. 즐거운 코딩하세요!