[ 웹 개발 ] 대표적인 디자인패턴 3개를 알아보자

 

디자인 패턴은 소프트웨어 개발에서 반복적으로 발생하는 문제를 해결하는 일반적인 해결책을 제공한다. 여러 디자인 패턴들 중에서도 대표적인 3가지를 알아보자.

 

 

 

싱글톤 패턴 (Singleton Pattern)
싱글톤 패턴은 어떤 클래스가 오직 하나의 인스턴스만을 가지도록 보장하고, 이 인스턴스에 대한 전역적인 접근점을 제공하는 패턴입니다. 주로 리소스를 공유하거나 설정 정보 등을 한 번만 생성하고 유지해야할 때 사용됩니다.

class Singleton {
  private static instance: Singleton;
  private constructor() {}

  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }

  public someMethod(): void {
    console.log("Singleton method called.");
  }
}

// 사용 예시
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true
instance1.someMethod(); // Singleton method called.

 

팩토리 메서드 패턴 (Factory Method Pattern)
팩토리 메서드 패턴은 객체의 생성을 캡슐화하는 패턴으로, 인터페이스를 통해 객체를 생성하는 방식입니다. 서브 클래스에서 객체의 타입을 결정하게 하고, 클라이언트 코드는 구체적인 클래스를 알 필요가 없습니다.

 

// 제품 인터페이스
interface Product {
  operation(): string;
}

// 제품 구현 클래스
class ConcreteProductA implements Product {
  public operation(): string {
    return "ConcreteProductA operation.";
  }
}

class ConcreteProductB implements Product {
  public operation(): string {
    return "ConcreteProductB operation.";
  }
}

// 팩토리 클래스
abstract class Creator {
  public abstract factoryMethod(): Product;

  public someOperation(): string {
    const product = this.factoryMethod();
    return `Creator: ${product.operation()}`;
  }
}

class ConcreteCreatorA extends Creator {
  public factoryMethod(): Product {
    return new ConcreteProductA();
  }
}

class ConcreteCreatorB extends Creator {
  public factoryMethod(): Product {
    return new ConcreteProductB();
  }
}

// 사용 예시
function clientCode(creator: Creator) {
  console.log(creator.someOperation());
}

clientCode(new ConcreteCreatorA()); // Creator: ConcreteProductA operation.
clientCode(new ConcreteCreatorB()); // Creator: ConcreteProductB operation.

 

옵저버 패턴 (Observer Pattern)
옵서버 패턴은 객체의 상태 변화를 관찰하고, 상태 변화가 발생하면 관련된 객체들에게 알림을 보내는 패턴입니다. 주로 이벤트 처리, MVC 패턴에서 데이터와 뷰를 동기화하는 데 사용됩니다.

 

// 옵서버 인터페이스
interface Observer {
  update(message: string): void;
}

// 옵서버 구현 클래스
class ConcreteObserverA implements Observer {
  public update(message: string): void {
    console.log(`ConcreteObserverA received: ${message}`);
  }
}

class ConcreteObserverB implements Observer {
  public update(message: string): void {
    console.log(`ConcreteObserverB received: ${message}`);
  }
}

// 서브젝트 클래스
class Subject {
  private observers: Observer[] = [];

  public addObserver(observer: Observer): void {
    this.observers.push(observer);
  }

  public removeObserver(observer: Observer): void {
    const index = this.observers.indexOf(observer);
    if (index !== -1) {
      this.observers.splice(index, 1);
    }
  }

  public notifyObservers(message: string): void {
    this.observers.forEach((observer) => observer.update(message));
  }
}

// 사용 예시
const subject = new Subject();
const observerA = new ConcreteObserverA();
const observerB = new ConcreteObserverB();

subject.addObserver(observerA);
subject.addObserver(observerB);

subject.notifyObservers("Hello observers!"); // ConcreteObserverA received: Hello observers!
                                            // ConcreteObserverB received: Hello observers!

subject.removeObserver(observerA);

subject.notifyObservers("Observer A is removed."); // ConcreteObserverB received: Observer A is removed.