옵저버(Observer) 패턴과 Pub/Sub 아키텍처

유튜브 '구독' 버튼이 바로 이 패턴입니다. 내가 일일이 유튜버 채널에 들어가서 "새 영상 나왔어요?"라고 묻는 게 아니라, 유튜버가 영상을 올리면 나에게 알림이 오는 것이죠. 옵저버 패턴은 객체의 상태 변화를 관찰하는 관찰자(Observer)들에게 변화가 있을 때마다 자동으로 알림을 보내주는 패턴입니다.

1. 구조

• Subject (주체): 상태를 가진 놈. 유튜버. notify() 메서드로 알림을 쏩니다.
• Observer (관찰자): 알림을 받는 놈. 구독자. update() 메서드로 반응합니다.

2. Publish-Subscribe (Pub/Sub) 패턴과의 차이

비슷해 보이지만 다릅니다.

• Observer 패턴: Subject와 Observer가 서로를 알고 있습니다. (직거래)
• Pub/Sub 패턴: 중간에 **Message Broker (Event Bus)**가 있습니다. Publisher는 메시지를 브로커에 던지고, Subscriber는 브로커에서 메시지를 받아갑니다. 서로의 존재를 모릅니다. (택배 거래) -> 결합도가 더 낮습니다.

3. 프론트엔드에서의 활용

3.1 DOM 이벤트 리스너

button.addEventListener('click', func) 버튼(Subject)이 클릭되면 함수(Observer)가 실행됩니다. 가장 흔한 예시입니다.

3.2 React useEffect

상태(Dependency)가 변하면 이펙트(Observer)가 실행됩니다.

3.3 Redux / Zustand

Store의 상태가 변하면 이를 구독하고 있는 컴포넌트들만 리렌더링 됩니다.

이벤트 기반(Event-Driven) 시스템의 근간이 되는 아주 중요한 패턴입니다.