예시코드와 함께 알아보는 타입스크립트 디자인패턴: 옵저버 패턴

예시코드와 함께 알아보는 타입스크립트 디자인패턴: 옵저버 패턴

디자인 패턴은 소프트웨어 개발에서 자주 사용되는 문제 해결 방법을 정형화한 것입니다. 이러한 패턴은 코드의 재사용성, 유지보수성, 확장성을 향상시키는 데 도움이 됩니다. 타입스크립트는 자바스크립트의 상위 집합으로, 정적 타입을 지원하여 개발자가 코드를 더욱 안정적으로 작성할 수 있게 해줍니다. 이번 블로그 포스트에서는 타입스크립트에서 자주 사용되는 디자인 패턴 중 하나인 '옵저버 패턴'에 대해 알아보겠습니다.

1. 옵저버 패턴이란?

옵저버 패턴은 객체 간의 일대다 의존성을 정의하는 디자인 패턴입니다. 이 패턴은 한 객체의 상태가 변경되면, 그 객체에 의존하는 다른 객체들에게 자동으로 알림을 보내고 상태 변화에 대한 처리를 할 수 있도록 합니다. 이를 통해 객체 간의 결합도를 낮추고 유연한 설계를 할 수 있습니다.

2. 옵저버 패턴의 구성 요소

옵저버 패턴은 다음과 같은 구성 요소로 이루어져 있습니다.

• Subject (주체): 상태 변화를 감지하고 알림을 보내는 주체 객체입니다. 주체 객체는 옵저버 객체들을 등록하고, 상태 변화가 발생하면 등록된 옵저버들에게 알림을 보냅니다.
• Observer (옵저버): 주체 객체의 상태 변화를 감지하기 위해 등록되는 객체입니다. 옵저버는 주체 객체로부터 알림을 받으면 상태 변화에 대한 처리를 수행합니다.

3. 예시코드: 주식 시장 모니터링

옵저버 패턴을 이해하기 위해 주식 시장 모니터링 시스템을 예시로 살펴보겠습니다. 이 시스템은 다음과 같은 요구사항을 가지고 있습니다.

• 여러 개의 주식 종목을 모니터링할 수 있어야 합니다.
• 각 주식 종목의 가격이 변경되면, 해당 정보를 모니터링하는 사용자들에게 알림을 보내야 합니다.

이러한 요구사항을 옵저버 패턴을 사용하여 구현할 수 있습니다. 먼저, Subject와 Observer 인터페이스를 정의합니다.

interface Subject {   registerObserver(observer: Observer): void;   removeObserver(observer: Observer): void;   notifyObservers(): void; }  interface Observer {   update(price: number): void; } 

다음으로, Subject 인터페이스를 구현하는 StockMarket 클래스를 작성합니다.

class StockMarket implements Subject {   private observers: Observer[] = [];   private price: number = 0;    registerObserver(observer: Observer): void {     this.observers.push(observer);   }    removeObserver(observer: Observer): void {     const index = this.observers.indexOf(observer);     if (index !== -1) {       this.observers.splice(index, 1);     }   }    notifyObservers(): void {     for (const observer of this.observers) {       observer.update(this.price);     }   }    setPrice(price: number): void {     this.price = price;     this.notifyObservers();   } } 

마지막으로, Observer 인터페이스를 구현하는 User 클래스를 작성합니다.

class User implements Observer {   private name: string;    constructor(name: string) {     this.name = name;   }    update(price: number): void {     console.log(`${this.name}님, 주식 가격이 ${price}로 변경되었습니다.`);   } } 

위의 코드에서는 StockMarket 클래스가 Subject 인터페이스를 구현하고, User 클래스가 Observer 인터페이스를 구현합니다. StockMarket 클래스는 주식 가격이 변경되면 등록된 Observer들에게 알림을 보내기 위해 notifyObservers 메서드를 호출합니다. User 클래스는 주식 가격의 변경을 감지하고, 변경된 가격을 콘솔에 출력하는 update 메서드를 구현합니다.

4. 옵저버 패턴의 장점

옵저버 패턴은 다음과 같은 장점을 가지고 있습니다.

• 객체 간의 결합도를 낮춥니다. 주체 객체와 옵저버 객체는 서로 독립적으로 존재하며, 주체 객체는 옵저버 객체의 존재를 알지 못합니다. 이를 통해 유연하고 확장 가능한 설계를 할 수 있습니다.
• 새로운 옵저버를 추가하거나 기존 옵저버를 제거하기 쉽습니다. 주체 객체는 옵저버를 등록하거나 제거하는 메서드를 제공하므로, 동적으로 옵저버를 관리할 수 있습니다.
• 이벤트 기반 시스템에서 유용합니다. 옵저버 패턴은 이벤트 기반 시스템에서 주로 사용되며, 이벤트 발생 시 옵저버들에게 알림을 보내는 역할을 수행합니다.

5. 결론

옵저버 패턴은 객체 간의 일대다 의존성을 정의하는 디자인 패턴으로, 타입스크립트에서 유용하게 사용될 수 있습니다. 이 패턴을 사용하면 객체 간의 결합도를 낮추고 유연한 설계를 할 수 있습니다. 이번 포스트에서는 주식 시장 모니터링 시스템을 예시로 옵저버 패턴을 설명하였습니다. 이를 통해 옵저버 패턴의 개념과 구현 방법을 이해할 수 있었습니다.