오늘의 CS(디자인 패턴 - 옵저버 패턴)

1.1.4 옵저버 패턴

• 옵저버 패턴은 주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴이다. 
• 여기서 주체란 객체의 상태 변화를 보고 있는 관찰자이며, 옵저버들은 이 객체의 상태 변화에 따라 전달되는 메서드 드을 기반으로 "추가 변화 사항"이 생기는 객체들을 의미한다. 
• 예를 들어, 내가 공부하고 있을 때 엄마가 저녁 준비를 하고 있다. 엄마가 저녁 준비가 다 되면 "밥 먹어"라고 외친다. 그럼 관찰자인 나는 주체인 엄마가 얘기를 하니까 공부하는 것을 멈추고 식탁으로 가서 저녁을 먹는다. 
• 주체와 객체를 따로 두지 않고 상태가 변경되는 객체를 기반으로 구축하기도 한다. 
• 예를 들어, 트위터의 경우에는 내가 어떤 사람인 "주체"를 팔로우 했다면 주체가 포스팅을 올리면 알림이 "팔로워"한테 가게 된다.
• 옵저버 패턴은 주로 이벤트 기반 시스템을 이용해서 MVC(Model-view-controller) 패턴에도 사용된다.
  • 예를 들어 주체라고 볼 수 있는 모델에서 변경사항이 생겨서 update()메서드로 옵저버인 뷰에 알려주고 이를 기반으로 컨트롤러 등이 작동한다.
• 자바스크립트에서의 옵저버 패턴
  • 자바스크립트에서의 옵저버 패턴은 프록시 객체를 통해 구현할 수도 있다. 
  • 프록시란?
    • 예를 들어, 회사 CEO를 만나고 싶은데 CEO가 너무 바빠서 직접 만날 수가 없어서 비서를 자신의 프록시 또는 대리인으로 선정했다. 이제 CEO와 얘기하고 싶을 때 비서를 통해서 메시지를 전달할 수 있다. 그렇게하면 비서가 CEO한테 메시지를 전달하고 CEO가 답변을 비서한테 주면 비서를 통해서 최종적으로 답변을 받는다. 
    • 프록시 객체는 위에처럼 CEO가 너무 바빠서 비서가 그 일을 대신 할 수 있다고 한다면 비서가 대신 일을 처리해주며 비서가 CEO의 프록시 개체로서 실체 객체를 대신한다. 
    • 어떠한 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 작업을 가로챌 수 있는 객체를 뜻한다. 
    • 자바스크립트에서는 프록시 객체는 두 개의 매개변수를 가진다.
      • target: 프록시할 대상
      • handler: target 동작을 가로채고 어떠한 동작을 할 것인지가 설정되어 있는 함수 

const handler = {
    get: function(target, name) {
      return name === "name" ? `${target.a} ${target.b}` : target[name]
    
    }
 

}

const p = new Proxy({a: "haha", b: "hoho"}, handler)
// haha hoho
console.log(p.name)

• new Proxy()로 a와 b 속성을 가지고 있는 객체와 handler 함수를 매개변수로 넣고 p라는 변수를 선언했다. 이후 p의 name을 참조하니 a와 b라는 속성밖에 없는 객체가 handler의 name이라는 속성에 접근할 때 a와 b를 합쳐서 문자열을 만들라는 로직에 따라 어떤 문자열을 만든다. 이렇게 name 속성 등 특정 속성을 접근할 때 그 부분을 가로채서 어떠한 로직을 강제할 수 있는 것이 프록시 객체이다.