옵저버 패턴을 이용한 자바스크립트 로그인 처리 방법

08 Nov 2023

javascript

개요

옵저버 패턴은 소프트웨어 디자인 패턴 중 하나로, 객체 간에 일대다 의존성을 정의할 수 있습니다. 이 패턴을 사용하여 자바스크립트에서 로그인 처리를 구현하는 방법을 살펴보겠습니다.

옵저버 패턴 설명

옵저버 패턴은 주체(Subject)와 옵저버(Observer)로 이루어져 있습니다. 주체는 상태가 변경되었을 때, 등록된 옵저버에게 알리는 역할을 합니다. 옵저버는 주체에 등록되어 있으며, 주체의 상태 변화에 따라 어떠한 동작을 취할지 정의합니다.

자바스크립트 로그인 처리를 위한 예제 코드

// 주체(Subject) 클래스
class LoginSubject {
  constructor() {
    this.observers = [];
  }

  // 옵저버 등록
  registerObserver(observer) {
    this.observers.push(observer);
  }

  // 옵저버 제거
  unregisterObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index > -1) {
      this.observers.splice(index, 1);
    }
  }

  // 로그인 상태 변경 시, 옵저버에게 알림
  notifyObservers(isLoggedIn) {
    this.observers.forEach(observer => {
      observer.update(isLoggedIn);
    });
  }
}

// 옵저버(Observer) 클래스
class LoginObserver {
  constructor(name) {
    this.name = name;
  }

  // 옵저버의 동작 정의
  update(isLoggedIn) {
    console.log(this.name + " - 로그인 상태 변경: " + isLoggedIn);
  }
}

// 주체와 옵저버 사용 예제
const loginSubject = new LoginSubject();

const user1 = new LoginObserver("user1");
const user2 = new LoginObserver("user2");

loginSubject.registerObserver(user1);
loginSubject.registerObserver(user2);

// 로그인 상태 변경 시, 옵저버에게 알림
loginSubject.notifyObservers(true);

// user1 - 로그인 상태 변경: true
// user2 - 로그인 상태 변경: true

loginSubject.unregisterObserver(user1);

loginSubject.notifyObservers(false);

// user2 - 로그인 상태 변경: false

위의 예제 코드에서는 주체(LoginSubject)와 옵저버(LoginObserver) 클래스를 정의하여 사용합니다. 로그인 상태가 변경될 때마다 등록된 옵저버들에게 알림을 보내기 위해 notifyObservers 함수를 호출합니다. 이를 통해 로그인 상태 변화에 따른 동작을 정의할 수 있습니다.

결론

옵저버 패턴을 사용하여 자바스크립트에서 로그인 처리를 구현할 수 있습니다. 이를 통해 로그인 상태 변화에 따른 동작을 모듈화하고, 코드의 유지보수성을 향상시킬 수 있습니다.

참고 자료: https://en.wikipedia.org/wiki/Observer_pattern