옵저버 패턴

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

 

주체란 객체의 상태 변화를 보고 있는 관찰자, 옵저버들이란 이 객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 '추가 변화 사항'이 생기는 객체들을 의미

객체와 주체가 분리될 수도 있고 객체와 주체가 합쳐진 패턴도 존재한다.

옵저버 패턴을 활용한 서비스로는 대표적으로 트위터가 있다.

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

 

 

- 옵저버 패턴의 예

 

유명인사의 SNS와 이를 팔로워 하는 구독자들이 있다면

유명인사가 글을 올리면 유명인사의 변경사항이 팔로워들에게 전해진다.

 

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

자바스크립트에서의 옵저버 패턴은 프록시 객체를 통해 구현 가능하다.

• 프록시 객체
  프록시 객체는 어떠한 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거,함수 호출 등)의 작업을 가로챌 수 있는 객체. 자바스크립트에서 프록시 객체는 두개의 매개변수를 가진다.
  • target: 프록시할 대상
  • handler: 프록시 객체의 target할 동작을 가로채서 정의할 동작들이 정해져 있는 함수

Vue.js 3.0의 옵저버 패턴

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

 

 

https://velog.io/@soceu/CS%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8C%A8%ED%84%B41

[CS]디자인 패턴_1