1장-디자인 패턴) 옵저버패턴

1.1 Observer pattern 이란?

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

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

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

- 쉽게 말해 주체가 객체를 보고있다가 뭔가 바뀌면 옵저버들한테 뭐 하라고 알려준다.

- 주체와 객체를 따로 두지 않고 상태변경 객체를 기반으로 구축하기도 한다.

- 주로 이벤트 기반 시스템에 사용하며, MVC 패턴에도 사용된다. (리액트가 이거다)

- model : 주체

- view : 옵저버

- controller : 작동하는 것

MVC 패턴 Diagram

1.2 JavaScript에서의 Observer pattern

- Proxy 객체를 통해 구현할 수 있다. (vueJS가 이거다 - MVVM)

- 프록시객체 ? : 어떤 대상의 기본 동작을 가로챌 수 있는 객체를 말하며, 두개의 매개변수를 가진다

   target : proxy할 대상

   handler : proxy객체의 target 동작을 가로채서 정의할 동작들이 정해져 있는 함수

 

1.3 Proxy객체 구현 코드

Proxy 객체 구현 코드

- new Proxy로 선언한 객체의 a,b 속성에 특정 문자열을 답고, handler에 'name 속성에 접근 시 a,b 를 합쳐 문자열을 만들어' 라고 구현했다.

- p변수에 name 속성을 선언하지 않았는데도 p.name으로 name속성에 접근하려 할 때, 그 부분을 가로채 문자열을 만들어 반환한다.

 

1.4 Proxy객체를 이용한 Observer pattern

어렵다

프록시객체의 

- get() 함수는 속서오가 함수에 대한 접근을 가로챈다

- has() 함수는 in 연산자의 사용을 가로챈다.

- set()함수는 속성에 대한 접근을 가로챈다.

- set() 함수를 통해 속성에 대한 접근을 가로채서 자동차라는 속성이 BMW에서 JEEP로 되는 것을 감시할 수 있다.

- Vue.js 의 옵저버패턴은 proxyMap이라는 프록시 객체를 사용해, 내부의 get(), set() 메서드를 활용해서 만들었다.