디자인 패턴 - 옵저버 패턴

옵저버 패턴

주체가 어떤 객체의 상태변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴

트위터 처럼 새로운 트윗을 한명이 올리면 팔로우 하는 다른사람들에게 알림이 가는 형태

 

옵저버 패턴은 주로 이벤트 기반 시스템에 사용 MVC(Model-View-Controller) 패턴에도 사용됨

 

주체라고 볼수 있는 model에서 변경 사항이 생겨 update() 메서드로 옵저버인 view에 알려주고 이를 기반으로 controller등이 작동

 

import java.util.ArrayList;
import java.util.List;
interface Subject {
    public void register(Observer obj);     public void unregister(Observer obj);     public void notifyObservers();    public Object getUpdate(Observer obj);
}
interface Observer {
    public void update(); 
}
class Topic implements Subject {
    private List<Observer> observers;
    private String message;
    public Topic() {
        this.observers = new ArrayList<>();
        this.message = "";
    }
    @Override
    public void register(Observer obj) {
        if (!observers.contains(obj)) observers.add(obj);     }
    @Override
    public void unregister(Observer obj) {         observers.remove(obj); 
    }
    @Override
    public void notifyObservers() {        this.observers.forEach(Observer::update); 
    }
    @Override
    public Object getUpdate(Observer obj) {
        return this.message;
    } 
    
    public void postMessage(String msg) {
        System.out.println("Message sended to Topic: " + msg);         this.message = msg; 
        notifyObservers();
    }
}
class TopicSubscriber implements Observer {
    private String name;
    private Subject topic;
    public TopicSubscriber(String name, Subject topic) {
        this.name = name;
        this.topic = topic;
    }
    @Override
    public void update() {
        String msg = (String) topic.getUpdate(this); 
        System.out.println(name + ":: got message >> " + msg);     } 
}
public class HelloWorld { 
    public static void main(String[] args) {
        Topic topic = new Topic(); 
        Observer a = new TopicSubscriber("a", topic);         Observer b = new TopicSubscriber("b", topic);         Observer c = new TopicSubscriber("c", topic);         topic.register(a);
        topic.register(b);
        topic.register(c);
        topic.postMessage("amumu is op champion!!");     }
}
/*
Message sended to Topic: amumu is op champion!! a:: got message >> amumu is op champion!!
b:: got message >> amumu is op champion!! c:: got message >> amumu is op champion!! */

 

 

topic을 기반으로 옵저버 패턴 구현

topic은 주체이자 객체가됨

 

자바: 상속과 구현
잠시 앞의 코드에 나온 implements 등 자바의 상속과 구현의 특징과 차이를 보자면

 

상속

자식클래스가 부모 클래스의 메서드 등을 상속받아 사용하며 자식 클래스에서 추가 및 확장을 할 수 있는것

 

구현

구현은 부모 인터페이스를 자식 클래스에서 재정의하여 구현하는 것 상속과는 달리 반드시 부모 클래스의 메 서드를 재정의하여 구현

 

상속과 구현의 차이
상속은 일반 클래스, abstract 클래스를 기반으로 구현하며, 구현은 인터 페이스를 기반으로 구현

 

 

자바스크립트에서의 옵저버 패턴

 

프록시 객체
프록시(proxy) 객체는 어떠한 대상의 기본적인 동작(속성 접근, 할당, 순 회, 열거, 함수 호출 등)의 작업을 가로챌 수 있는 객체를 뜻하며, 자바스 크립트에서 프록시 객체는 두 개의 매개변수를 가짐

 

• target: 프록시할 대상
• handler: target 동작을 가로채고 어떠한 동작을 할 것인지가 설정되어 있는 함수

 

const handler = {
    get: function(target, name) { 
        return name === 'name' ? `${target.a} ${target.b}` : target[n ame]
    }
}
const p = new Proxy({a: 'KUNDOL', b: 'IS AUMUMU ZANGIN'}, handler) console.log(p.name) // KUNDOL IS AUMUMU ZANGIN

 

 

프록시 객체를 이용한 옵저버 패턴

function createReactiveObject(target, callback) { 
    const proxy = new Proxy(target, {
        set(obj, prop, value) {
            if (value !== obj[prop]) {
                const prev = obj[prop]
                obj[prop] = value 
                callback(`${prop}가 [${prev}] >> [${value}] 로 변경되 었습니다. `)
            }
            return true         }
    })
    return proxy } 
const a = {
    "형규" : "솔로"
} 
const b = createReactiveObject(a, console.log) b.형규 = "솔로"
b.형규 = "커플"
// 형규가 [솔로] >> [커플] 로 변경되었습니다.

 

 

DOM(Document Object Model)
문서 객체 모델을 말하며, 웹 브라우저상의 화면을 이루고 있는 요소들을 지칭한다.