디자인 패턴: 싱글톤, 팩토리, 옵저버

디자인 패턴은 주어진 문제를 해결하기 위해 따를 규칙을 정해놓은 것을 말한다. 어떤 식으로 객체를 생성하고 객체 간의 관계를 형성할지와 같은 질문을 토대로 특정 상황이나 목적에 알맞는 효율적인 코드 구조를 짠다.

Image by Bernd Hildebrandt from Pixabay

싱글톤 패턴

싱글톤 패턴에서는 하나의 클래스로부터 하나의 인스턴스만 생성해 사용한다. 인스턴스를 여러개 생성하지 않아서 인스턴스 생성에 드는 비용을 줄일 수 있다.

class Singleton () {
  constructor() {
    // 한 번만 실행되는 코드 (이후에는 항상 Singleton.instance가 존재할 것이기 때문)
    if (!Singleton.instance) {
      Singleton.instance = this; // 처음 생성하는 인스턴스(this)를 Singleton 클래스의 정적 속성으로 지정
    }
    return Singleton.instance;
  }
  
  getInstance() {
    return Singleton.instance;
  }
}

 

대신 하나의 인스턴스로 모든 작업을 하기 때문에 상황에 따라 독립적인 인스턴스를 둘 수 없어서 유닛 테스트하기 까다롭다. 테스트할 상태(state)가 모두 같아서 인스턴스의 상태가 한쪽 테스트에서 변하거나 하면 다른 테스트도 그 변경된 상태를 쓰게 되기 때문이다.

 

팩토리 패턴

팩토리 패턴은 객체를 공장처럼 체계적으로 찍어내는 패턴이다. 상위 클래스와 하위 클래스가 분리돼있고, 객체를 실제로 생성하는 작업은 하위 클래스에서 해결한다. 상위 클래스는 어떤 객체를 생성할지에 대한 주문만 처리한다.

// 하위 클래스가 생성하는 객체
class Cayenne {
  constructor() {
    this.name = "Cayenne";
  }
}

class Macan {
  constructor() {
    this.name = "Macan";
  }
}

// 하위 클래스
class CayenneFactory {
  static createCar() {
    return new Cayenne();
  }
}

class MacanFactory {
  static createCar() {
    return new Macan();
  }
}

// 상위 클래스 (하위 클래스가 생성하는 객체에 대한 세부상황은 알지 못함)
class CarFactory {
  static createCar(model) {
    const factory = factoryList[model];
    return factory.createCar();
  }
}

const factoryList = { CayenneFactory, MacanFactory };

 

옵저버 패턴

옵저버 패턴은 객체와 그 객체의 변화를 지켜보는 옵저버로 이루어져있다. 객체ㅡ옵저버뿐만 아니라 객체의 변화를 옵저버에게 전달해주는 미들맨이 껴있는 객체ㅡ주체ㅡ옵저버 구성도 있는데, 결론적으로 객체가 변하면 그것에 대응해 옵저버에도 뭔가 변화가 생긴다는 점은 동일하다.

 

옵저버 패턴의 예시로는 Vue 프레임워크의 reactive와 ref 상태가 있다. reactive나 ref를 사용해 저장한 변수를 DOM에 직접 그렸을 때, 해당 변수의 값이 변하면 DOM에 뜨는 컨텐츠도 변한다. reactive/ref 상태를 지켜보고 있다가 변동사항이 있으면 DOM도 대응하는 것이다.