[Design Pattern] PUB-SUB 패턴

📌 PUB-SUB 패턴

PUB-SUB 패턴은 Observer 패턴의 일종이며

다수의 consumer 가 자신이 관심 있는 이벤트를 비동기적으로 수신할 수 있도록 합니다.

(단, sender 와 receiver 는 coupling 되지 않아 서로의 존재를 모릅니다.)

 

📌 PUB-SUB vs Observer

Observer Pattern 동작 흐름

 

위는 Observer Pattern 의 동작 흐름입니다.

이러한 흐름을 구현한 애플리케이션은 Observer Pattern 을 구현했다고 말할 수 있습니다.

 

그렇다면 PUB-SUB 는 어떤 차이가 있는 것 일까요?

PUB-SUB 의 경우 Subject -> Publisher 그리고 Observer -> Subscriber 라는

명칭상의 변경만 존재할 뿐 눈에 띄는 차이점은 없어 보입니다.

그래서 많은 서적들이 Observer === PUB-SUB 라고 하는 경우가 존재하는 것이죠. 🤨

 

그래서 Observer 와 PUB-SUB 의 차이점이 뭔가요?

두 패턴의 장점이자 공통점은 두 객체 간의 상호 의존성을 느슨하게 해준다는 것입니다.

Observer Pattern 과 PUB-SUB Pattern 의 약간의 차이점은 바로
Topic/Event channel 의 존재 유무입니다.

 

 

이로써 Publisher 는 Subscriber 에 직접 메시지를 보내지 않으며 이 둘은 서로의 존재를 알지 못합니다.

Event Broker 혹은 Event Bus 라고 하는 것이 이 둘의 중간 다리 역할을 하여 메시지를 필터링 해줍니다.

 

메시지 필터링에는 Topic-based & Content-based 가 존재하는데
이 둘의 차이점은 다음 블로그 글을 참고하면 좋을 것 같습니다.

 

Publish-subscribe pattern

Publish–subscribe pattern - Wikipedia

 

📌 왜 필요할까?

여러 컴포넌트가 공통된 데이터를 저장하는 시나리오에서

깔끔하고 멋진 코드를 위해서는 관심사의 분리 가 필요합니다.

 

서비스 파일은 로컬 스토리지와 동기화를 하는 등의 메커니즘과 관심사를 다루고 나머지 컴포넌트는 UI 에 집중한다.

 

구독/발행을 통해 원하는 시점이 등록된 함수가 호출될 수 있도록 한다.

 

우리가 지금껏 사용한 다양한 API 들은 Publish & Subscribe 패턴과 유사한 동작 원리를 가지고 있습니다.

 

addEventListener	특정 이벤트에 함수를 구독 하고 DOM 요소에 의해 액션이 발행되면 해당 함수가 호출
Promise	특정 액션들이 완료되는 것을 구독하며 데이터가 준비되면 발행되는 패턴
React 의 state와 props	컴포넌트들이 데이터 변화를 구독하여 업데이트
Fetch API	마찬가지 입니다 😄

 

즉, 어떠한 비동기 처리 방법을 사용하든지 언제나 같은 패턴! (무언가는 구독하고 무언가는 발행)

또한 Loosing Coupling 은 각 모듈이 서로의 인터페이스에 의존하지 않아 모듈의 재사용성이 증가 합니다.

 

📌 단점은 없을까?

Observer Pattern 이나 PUB-SUB Pattern 모두 consumer 와 receiver 간의 느슨한 연결 때문에

애플리케이션 동작 시 crash 가 발생했을 때 시스템의 다른 부분에 영향을 주지 않는다는 것을 보장하거나

추적 및 디버깅하기 힘들 수 있습니다. (실제로 겪었습니다... 😭)

💡 주의하기
때로는 읽기 좋은 코드와 유지 보수를 위해 응집도를 높이는 것이 더 유리할 수 있으므로
PUB-SUB Pattern 을 남용하지 않도록 주의합시다

 

📌 PUB-SUB 를 구현한 JS 라이브러리 및 예시

Modern Web Best Practice: Pub/Sub | Modern Web

Modern Web Best Practice: Pub/Sub | Modern Web

Publisher subscriber pattern in React.js

Publisher subscriber pattern in React.js

 

📌 참고자료

Applying publisher subscriber design pattern in javascript

Observer vs Pub-Sub pattern | Hacker Noon

[번역] 초보 프론트엔드 개발자들을 위한 Pub-Sub(Publish-Subscribe) 패턴을 알아보기

Why would one use the Publish/Subscribe pattern (in JS/jQuery)?

The Publisher/Subscriber Pattern in JavaScript

JavaScript Design Patterns Part 2: The Publisher/Subscriber Pattern