자바스크립트 + 리액트 디자인 패턴

155

Chapter 07_

자바스크립트 디자인 패턴

7.18.4

발행/구독 패턴 구현하기

발행/구독 패턴은 자바스크립트 생태계와 매우 잘 어울리는데, 왜냐하면

ECMAScript

의 구

현체가 본질적으로 이벤트 기반이기 때문입니다. 브라우저 환경에서는

DOM

을 스크립트를

위한 주요 상호작용

API

로써 사용하므로 이벤트 기반의 구조임이 더욱 뚜렷합니다.

이와는 별개로,

ECMAScript

와

DOM

모두 구현 코드에서 커스텀 이벤트 시스템을 만들기

위한 기본 객체나 메서드를 제공하지 않습니다 (

DOM3

CustomEvent

는 예외이기는 하나

DOM

에 한정되어 있기에 일반적으로 적용하기는 어렵습니다).

발행/구독 패턴 구현 예제

일반적인 자바스크립트 환경에서 사용되는 관찰자 패턴의 구현 방식을 더 잘 이해하기 위해,

제가 깃허브

Github

에 공개한 ‘

pubsubz

’

18

프로젝트를 참고하여 발행/구독 패턴의 간단한 예

제를 살펴봅시다. 해당 예제는 구독, 발행 그리고 구독 취소의 핵심 개념을 보여줍니다.

이 프로젝트를 예제로 참고한 이유는 자바스크립트의 관찰자 패턴에서 볼 수 있는 메서드명

과 그 구현 방식에 매우 가깝게 구현되어 있기 때문입니다.

class PubSub {

constructor() {

// 알림을 보내거나 받을 수 있는 토픽을 저장

this.topics ...