자바스크립트 Observers를 이용한 데이터 검증 및 유효성 검사

08 Nov 2023

javascript

자바스크립트는 동적이고 유연한 언어로써, 데이터의 유효성을 검사하고 검증하는 것이 매우 중요합니다. 이를 위해 자바스크립트 Observers를 활용하면 효과적으로 데이터 검증을 수행할 수 있습니다.

Observers란?

Observers 패턴은 객체 사이의 1:N 종속성을 처리하는 디자인 패턴입니다. 이 패턴은 데이터 변화를 감지하고 처리할 수 있도록 하며, 데이터의 규칙을 검증하고 유효성을 확인하는 데에 사용될 수 있습니다.

Observers 패턴의 구성 요소

Observers 패턴에는 다음과 같은 구성 요소가 있습니다.

Subject(주체): 데이터를 갖고 있는 객체.
Observer(관찰자): Subject의 데이터 변화를 감지하고 처리하는 객체.
Event(이벤트): Subject에서 Observer로 데이터 변화를 전달하는 메커니즘.

데이터 검증 및 유효성 검사에 Observers 활용하기

아래는 Observers 패턴을 활용하여 데이터를 검증하고 유효성을 검사하는 예시입니다.

// Subject (주체) 클래스
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
    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());
  }

  setName(name) {
    this.name = name;
    this.notifyObservers();
  }

  setAge(age) {
    this.age = age;
    this.notifyObservers();
  }
}

// Observer (관찰자) 클래스
class AgeValidator {
  constructor(user) {
    this.user = user;
  }

  update() {
    if (this.user.age < 18) {
      console.log("유효하지 않은 나이입니다.");
    }
  }
}

// Observer (관찰자) 클래스
class NameValidator {
  constructor(user) {
    this.user = user;
  }

  update() {
    if (this.user.name.length < 3) {
      console.log("유효하지 않은 이름입니다.");
    }
  }
}

// 데이터 검증 예시

const user = new User("John", 20);
const ageValidator = new AgeValidator(user);
const nameValidator = new NameValidator(user);

user.addObserver(ageValidator);
user.addObserver(nameValidator);

user.setName("Tom"); // 유효하지 않은 이름입니다.
user.setAge(15); // 유효하지 않은 나이입니다.

위 예시에서는 User 클래스가 Subject(주체)로서 동작하며, AgeValidator와 NameValidator 클래스가 Observer(관찰자)로서 동작합니다. 각 Observer는 update 메서드를 구현하여 데이터 변화를 감지하고 처리합니다.

위 코드에서는 User 객체의 setName 메서드와 setAge 메서드에서 데이터의 변화가 있을 때 Observers에게 변화를 알리는 notifyObservers 메서드를 호출하고 있습니다.

결론

자바스크립트 Observers를 활용하여 데이터 검증 및 유효성 검사를 수행할 수 있습니다. Observers 패턴은 데이터의 변화를 감지하고 처리하는 기능을 제공하여 유연하고 확장 가능한 코드 작성을 도와줍니다.

#JavaScript #Observers