Observer Pattern 디자인패턴 완벽정리

Observer Pattern의 핵심 개념부터 실전 활용까지 중급 개발자를 위한 완벽 가이드. 구독-발행 패턴의 원리와 실무 적용 방법을 단계별로 학습합니다.

---

---

들어가며

이 글에서는 Observer Pattern 디자인패턴 완벽정리에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. Observer_Pattern_기본_개념
2. Observer_구현하기
3. 실전_활용_예제
4. 구독_해지_기능
5. 이벤트_기반_Observer
6. 실무_활용_예제
7. WeakMap을_활용한_메모리_최적화
8. RxJS_스타일_Observable
9. Promise와_Observer_결합
10. Proxy를_활용한_반응형_Observer
11. 다중_Subject_관리
12. Observer_Pattern_장단점

---

1. Observer Pattern 기본 개념

개요

Observer Pattern은 객체의 상태 변화를 관찰하는 옵저버들에게 자동으로 알림을 보내는 디자인 패턴입니다. 일대다 의존성을 정의합니다.

코드 예제

class Subject {
  constructor() {
    this.observers = [];
  }
  subscribe(observer) {
    this.observers.push(observer);
  }
  notify(data) {
    this.observers.forEach(obs => obs.update(data));
  }
}

설명

Subject 클래스는 옵저버들을 관리하고, 상태 변화 시 모든 옵저버에게 notify 메서드로 알림을 전달합니다.

---

2. Observer 구현하기

개요

Observer는 Subject의 변화를 감지하고 반응하는 객체입니다. update 메서드를 통해 알림을 받습니다.

코드 예제

class Observer {
  constructor(name) {
    this.name = name;
  }
  update(data) {
    console.log(`${this.name} received: ${data}`);
  }
}

const observer1 = new Observer('User1');
const observer2 = new Observer('User2');

설명

Observer 객체는 update 메서드를 구현하여 Subject로부터 데이터를 받아 처리합니다.

---

3. 실전 활용 예제

개요

뉴스 구독 시스템을 Observer Pattern으로 구현한 예제입니다. 구독자들은 새 뉴스가 발행되면 자동으로 알림을 받습니다.

코드 예제

class NewsAgency extends Subject {
  publishNews(news) {
    console.log(`Breaking News: ${news}`);
    this.notify(news);
  }
}

const agency = new NewsAgency();
agency.subscribe(observer1);
agency.publishNews('Observer Pattern 완벽 정리!');

설명

NewsAgency가 뉴스를 발행하면 구독한 모든 Observer가 자동으로 업데이트를 받습니다.

---

4. 구독 해지 기능

개요

Observer를 동적으로 추가하고 제거할 수 있는 unsubscribe 기능입니다. 메모리 누수를 방지하는 중요한 기능입니다.

코드 예제

class Subject {
  unsubscribe(observer) {
    this.observers = this.observers.filter(
      obs => obs !== observer
    );
  }
}

agency.unsubscribe(observer1);
agency.publishNews('Observer1은 받지 못함');

설명

unsubscribe 메서드로 특정 옵저버를 제거하면 더 이상 알림을 받지 않습니다.

---

5. 이벤트 기반 Observer

개요

특정 이벤트 타입별로 구독할 수 있는 고급 Observer Pattern입니다. 이벤트 종류에 따라 선택적으로 구독 가능합니다.

코드 예제

class EventEmitter {
  constructor() {
    this.events = {};
  }
  on(event, callback) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(callback);
  }
  emit(event, data) {
    this.events[event]?.forEach(cb => cb(data));
  }
}

설명

이벤트 이름을 키로 사용하여 여러 종류의 이벤트를 독립적으로 관리하고 발행할 수 있습니다.

---

6. 실무 활용 예제

개요

사용자 인증 상태를 여러 컴포넌트가 관찰하는 실무 시나리오입니다. 로그인/로그아웃 시 모든 구독자가 업데이트됩니다.

코드 예제

class AuthService extends EventEmitter {
  login(user) {
    this.user = user;
    this.emit('login', user);
  }
  logout() {
    this.emit('logout');
    this.user = null;
  }
}

const auth = new AuthService();
auth.on('login', (user) => console.log(`Welcome ${user}`));

설명

인증 상태 변화를 여러 UI 컴포넌트가 동시에 감지하여 자동으로 업데이트할 수 있습니다.

---

7. WeakMap을 활용한 메모리 최적화

개요

WeakMap을 사용하여 메모리 누수를 방지하는 고급 기법입니다. 참조가 없어진 객체는 자동으로 가비지 컬렉션됩니다.

코드 예제

class OptimizedSubject {
  constructor() {
    this.observers = new WeakMap();
  }
  subscribe(observer, callback) {
    this.observers.set(observer, callback);
  }
  notify(data) {
    // WeakMap은 이터레이션 불가하므로 배열 병행 사용
  }
}

설명

WeakMap을 사용하면 옵저버 객체가 더 이상 참조되지 않을 때 자동으로 메모리에서 제거됩니다.

---

8. RxJS 스타일 Observable

개요

RxJS의 Observable 패턴을 간단히 구현한 예제입니다. 함수형 프로그래밍 스타일의 Observer Pattern입니다.

코드 예제

class Observable {
  constructor(subscribe) {
    this.subscribe = subscribe;
  }
  static create(producer) {
    return new Observable(observer => {
      producer(observer);
    });
  }
}

const obs = Observable.create(observer => observer.next(10));

설명

Observable은 구독 시점에 실행되는 함수를 캡슐화하여 지연 실행과 스트림 처리가 가능합니다.

---

9. Promise와 Observer 결합

개요

비동기 작업의 결과를 Observer Pattern으로 여러 구독자에게 전달하는 방식입니다. Promise와 Observer의 장점을 결합합니다.

코드 예제

class AsyncSubject {
  async fetchAndNotify(url) {
    const data = await fetch(url).then(r => r.json());
    this.notify(data);
  }
}

const asyncSub = new AsyncSubject();
asyncSub.subscribe({ update: d => console.log(d) });

설명

비동기 데이터를 가져온 후 모든 옵저버에게 자동으로 전파하여 상태 동기화를 유지합니다.

---

10. Proxy를 활용한 반응형 Observer

개요

JavaScript Proxy를 사용하여 객체의 속성 변화를 자동으로 감지하는 반응형 시스템입니다. Vue.js의 반응성 원리와 유사합니다.

코드 예제

function reactive(target, observer) {
  return new Proxy(target, {
    set(obj, key, value) {
      obj[key] = value;
      observer.update({ key, value });
      return true;
    }
  });
}

const state = reactive({}, { update: d => console.log(d) });

설명

Proxy로 객체를 감싸면 속성 변경을 자동으로 감지하여 옵저버에게 알릴 수 있습니다.

---

11. 다중 Subject 관리

개요

여러 Subject를 중앙에서 관리하는 패턴입니다. 복잡한 애플리케이션에서 이벤트를 체계적으로 관리할 수 있습니다.

코드 예제

class EventBus {
  constructor() {
    this.subjects = new Map();
  }
  getSubject(name) {
    if (!this.subjects.has(name)) {
      this.subjects.set(name, new Subject());
    }
    return this.subjects.get(name);
  }
}

설명

EventBus를 통해 여러 도메인의 이벤트를 네임스페이스별로 분리하여 관리할 수 있습니다.

---

12. Observer Pattern 장단점

개요

Observer Pattern의 실무 적용 시 고려해야 할 장단점입니다. 적절한 사용 시나리오를 판단하는 데 도움이 됩니다.

코드 예제

// 장점: 느슨한 결합, 동적 구독
// 단점: 메모리 누수 위험, 디버깅 어려움
// 해결책: unsubscribe 구현, 명확한 라이프사이클 관리

class ManagedSubject extends Subject {
  destroy() {
    this.observers = [];
  }
}

설명

Observer Pattern은 강력하지만 메모리 관리와 구독 해지를 명확히 해야 안정적으로 사용할 수 있습니다. ``` 이 카드 뉴스는 Observer Pattern의 기본 개념부터 실전 활용, 최적화 기법까지 12개의 카드로 구성되어 있습니다. 각 카드는 실제 작동하는 코드 예제와 함께 중급 개발자가 실무에 바로 적용할 수 있는 내용을 담고 있습니다.

---

마치며

이번 글에서는 Observer Pattern 디자인패턴 완벽정리에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#JavaScript #ObserverPattern #DesignPatterns #EventDriven #PubSub