개요
데이터의 변화를 감지하고, 변경된 데이터를 다른 부분에 동기화하는 작업은 웹 개발에서 매우 중요합니다. 이를 위해 자바스크립트에서는 Observers(관찰자) 패턴을 활용할 수 있습니다. Observers 패턴은 데이터 변경에 대한 알림을 제공하고, 데이터의 상태를 업데이트하는 기능을 제공하여 데이터의 동기화 처리를 가능하게 합니다.
Observers 패턴
Observers 패턴은 주로 주체(Subject)와 여러 개의 관찰자(Observer) 객체로 구성됩니다. 주체 객체는 데이터의 상태를 갖고 있으며, 상태가 변경되면 관찰자 객체들에게 알림을 보내고 데이터 변화를 전달합니다. 관찰자 객체들은 주체 객체의 상태 변화를 감지하고 이에 따른 행동을 수행합니다.
자바스크립트 Observers 사용하기
자바스크립트에서는 Observers 패턴을 구현하기 위해 Object.observe와 같은 내장 API를 사용할 수도 있지만, 해당 API는 현재는 사용이 제한되어 있습니다. 따라서 대안으로, Proxy 객체를 사용하여 Observers 패턴을 구현할 수 있습니다.
const subject = {
data: {
message: "Hello, World!"
},
observers: [],
addObserver(observer) {
this.observers.push(observer);
},
removeObserver(observer) {
this.observers = this.observers.filter((obs) => obs !== observer);
},
notifyObservers() {
this.observers.forEach((observer) => observer.update(this.data));
},
setData(newData) {
this.data = newData;
this.notifyObservers();
}
};
const observerA = {
update(data) {
console.log("Observer A: ", data.message);
}
};
const observerB = {
update(data) {
console.log("Observer B: ", data.message);
}
};
subject.addObserver(observerA);
subject.addObserver(observerB);
subject.setData({ message: "Goodbye, World!" }); // 출력: "Observer A: Goodbye, World!" "Observer B: Goodbye, World!"
subject.removeObserver(observerB);
subject.setData({ message: "Hello again, World!" }); // 출력: "Observer A: Hello again, World!"
위의 코드에서 subject 객체는 주체 역할을 하고 있으며, observers 배열은 관찰자 객체들을 저장합니다. addObserver 메서드를 통해 관찰자를 추가하고, removeObserver 메서드를 통해 관찰자를 제거할 수 있습니다. notifyObservers 메서드는 관찰자들에게 데이터 변경을 알립니다.
setData 메서드는 주체 객체의 데이터를 업데이트하고, 변경된 데이터를 notifyObservers 메서드를 통해 관찰자들에게 전달합니다.
위의 예제 코드에서는 두 개의 관찰자 객체 observerA와 observerB를 생성하고, subject.addObserver 메서드를 통해 주체 객체에 등록합니다. 그 후, subject.setData 메서드를 호출하여 데이터를 변경하면, 등록된 관찰자 객체들은 update 메서드를 통해 데이터 변경을 처리합니다.
결론
자바스크립트 Observers 패턴은 데이터 동기화 처리를 위한 강력한 도구입니다. 이를 통해 데이터의 변화를 관찰하고, 이에 따른 작업을 수행할 수 있습니다. Proxy 객체를 사용하여 Observers 패턴을 구현하는 방법을 소개했는데, 이를 통해 더욱 세밀한 제어와 유연성을 가질 수 있습니다.