CS 스터디

1.1.4 옵저버 패턴

3190024 2023. 6. 1. 00:59

참고한 책: 면접을 위한 CS 전공지식 노트 (http://www.yes24.com/Product/Goods/108887922)

1. 디자인 패턴과 프로그래밍 패러다임

    1.1. 디자인 패턴

        1.1.3. 옵저버 패턴

 

p.34

옵저버 패턴(observer pattern)

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

주체: 객체의 상태 변화를 보고 있는 관찰자

옵저버들: 이 객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 '추가 변화 사항'이 생기는 객체들

 

p.35

객체와 주체가 분리되어 있는 옵저버 패턴

-주체가 객체를 보고 있다가 객체에 변경이 있으면 옵저버들에 변화 생김

객체와 주체가 합쳐진 옵저버 패턴

-주체와 객체를 따로 두지 않고 상태가 변경되는 객체를 기반으로 구축(트위터..?)

 

p.36

옵저버 패턴 활용 서비스 예: 트위터

사용자가 주체를 '팔로우'했다면 주체가 포스팅을 올리면 '팔로워(사용자)'에게 알람이 간다.

 

책보고 그린 옵저버 패턴 구조

옵저버 패턴은 주로 이벤트 기반 시스템에 사용.

MVC(Model-View-Controller) 패턴에도 사용됨.

더보기 
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 Listt<Obsever> observers;
    private String message;

	public void register(Observer obj) {...}
    public void unregister(Observer obj) {...}
    public void notifyObservers() {
    	this.obeservers.forEach(Observer::update);
    }
    public Object getUpdate(Observer obj) {
    	return this.message;
    }
    
    public void postMessage(String msg) {
    	...
        this.message = msg;
        notifyObservers();
    }
}

class TopicSubscriber implements Observer {
	private String name;
    private Subject Topic;
    
    ...
    
    public void update() {...}
}

public class HelloWorld {
	public static void main(String[] args) {
    	Topic topic = new Topic();
        Observer a = new TopicSubscriber("a", topic);
        topic.register(a);
        
        topic.postMessage("~~");
    }
}

p.39

자바의 상속(extends)

자식 클래스가 부모 클래스의 메서드 등을 상속받고 자식 클래스에서 추가 및 확장 가능. 재사용성, 중복의 최소화

일반 클래스, abstract 클래스 기반으로 구현

자바의  구현(implements)

부모 인터페이스를 자식 클래스에서 재정의하여 구현. 반드시 부모 클래스의 메서드를 재정의해야함. 인터페이스는 메소드만 모인 클래스라고 생각하면 편함.

인터페이스 기반으로 구현

 

p.40

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

프록시 객체를 통해 구현 가능

 

프록시(proxy) 객체

어떠한 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 작업을 가로챌 수 있는 객체.

자바스크립트에서 프록시 객체가 갖는 두 개의 매개변수

-target: 프록시할 대상

-handler: target 동작을 가로채고 어떠한 동작을 할 것인지 설정되어 있는 함수

 

궁금한 점

더보기 
const handler = {
	get: function(target, name){...}
}

const proxy = new Proxy(target, {set(obj, prop, value){...}})

위의 두 코드에서 get: function의 target, name이나 set의 obj, prop, value 순서가 정해져 있는지?

 

p.40

Vue.js 3.0의 옵저버 패턴

Vue.js 3.0: 프런트엔드에서 많이 쓰는 프레임워크

Vue.js 3.0에서 ref나 reactive로 정의하면 해당값이 변경되었을 때 자동으로 DOM에 있는 값이 변경되는데, 이는 프록시 객체를 이용한 옵저버 패턴을 이용하여 구현한 것.

 

DOM(Document Object Model)

문서 객체 모델. 웹 브라우저상의 화면을 이루고 있는 요소들 저장. (from. 책)

웹 페이지(HTML or XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스.

(출처: https://www.codestates.com/blog/content/dom-javascript)