소개

모던 웹 애플리케이션은 대개 여러 개의 모듈로 구성되어 있습니다. 이러한 모듈들 간에는 종종 의존성이 있어서 한 모듈이 변경되면 의존하는 다른 모듈들도 그에 맞게 변경되어야 합니다. 이를 위해 자바스크립트에서는 Observers 패턴을 사용하여 모듈 간의 의존성을 관리하는 방법을 제공합니다.

Observers 패턴이란?

Observers 패턴은 한 객체의 상태 변화를 다른 객체에 통지하는 디자인 패턴입니다. 주체(Subject) 객체는 여러 개의 옵저버(Observer) 객체를 등록하고, 주체 객체의 상태 변화가 발생하면 등록된 옵저버들에게 알리는 것입니다. 이를 통해 객체 간의 결합도를 낮추고, 느슨한 결합을 유지할 수 있습니다.

모듈 의존성 관리 방법

자바스크립트에서 모듈 의존성을 관리하기 위해 Observers 패턴을 활용할 수 있습니다. 예를 들어, 한 모듈이 다른 모듈의 상태 변화에 반응해야 하는 경우, 주체 객체로는 상태를 갖는 모듈을 선택하고, 옵저버 객체로는 반응해야 하는 모듈을 선택합니다.

class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notifyObservers() {
    this.observers.forEach(observer => observer.update());
  }
}

class Module {
  constructor(name) {
    this.name = name;
    this.state = '';
  }

  setState(state) {
    this.state = state;
    this.subject.notifyObservers();
  }

  update() {
    console.log(`${this.name} 모듈이 업데이트되었습니다: ${this.state}`);
  }
}

const moduleA = new Module('A');
const moduleB = new Module('B');

const subject = new Subject();
subject.addObserver(moduleA);
subject.addObserver(moduleB);

moduleA.subject = subject;
moduleB.subject = subject;

moduleB.setState('B 모듈의 상태');

위 예시에서 Subject 클래스는 주체 객체를 나타내며, addObserver 메서드로 옵저버를 등록하고, removeObserver 메서드로 옵저버를 제거합니다. notifyObservers 메서드는 등록된 옵저버들에게 상태 변화를 알립니다.

Module 클래스는 상태를 가지게 되는 각 모듈을 나타내며, setState 메서드를 통해 상태를 변경하고, update 메서드로 상태 변화에 대한 처리를 합니다.

위 예시에서는 moduleA와 moduleB가 서로 의존성을 가지고 있습니다. moduleB의 상태가 변경되면 subject 객체의 notifyObservers 메서드가 호출되고, moduleA와 moduleB의 update 메서드가 실행됩니다.

결론

자바스크립트 Observers 패턴을 활용하여 모듈 간의 의존성을 관리하는 방법을 알아보았습니다. 이를 통해 모듈 간의 결합도를 낮추고, 유연하고 확장 가능한 코드를 작성할 수 있습니다. 의존성 관리가 필요한 프로젝트에서 Observers 패턴을 고려해보세요.

참고 자료:

• Wikipedia - Observer 패턴
• MDN Web Docs - Observers 패턴