2022-07-29 전략프로젝트팀, 문재범PD

현재 저희팀에서는 프론트엔드 프레임워크로 뷰 프레임워크를 사용하고 있습니다.

뷰 프레임워크를 이용하면 Data를 Element와 바인딩해서 상태가 변경되면 Element를 업데이트하거나, watch handler 를 호출해서 작업 한다던가.. computed Value를 return 한다던가.. 상태에 변화에 반응해서 기존 바닐라js와 다르게 빠르게 개발할 수 있습니다. dom을 직접 컨트롤하지 않아도 되구요.

뷰의 기능중 이런 데이터가 바인딩되는 기능은 분명히 Observer pattern 이 적용됬을 것이라고 생각했는데 역시나 공식 홈페이지를 찾아보니 맞는 것 같습니다. 제가 뷰의 기능 일부를 Observer pattern 으로 구현해본 것을 공유하려고 합니다.

1. (출처: Vue 공식 홈페이지)

2. (출처: Wiki)

3. 뷰의 작동방식입니다. 2) 옵저버 패턴 클래스 다이어그램입니다

코드를 설명하기 앞서, 먼저 Observer pattern 를 이해해야 합니다.

쉽게 설명하면 유투브 구독시스템과 비슷합니다.

유투브 채널(Subject)을 구독하고 채널이 업데이트(Subject 의 상태 변화)되면 사용자(Observer)에게 알람이 가는것 처럼.. Subject 객체는 특정 상태가 변경되면 등록된 Observer 객체들에게 상태가 변화됐음을 알립니다. 이게 Observer pattern 입니다.

클래스 다이어그램을 자세하게 살펴보면 Observer 클래스를 상속받는 구현체 A, B 클래스가 존재하고, Subject 와 Observer 는 상호 의존관계입니다. 그리고 클래스다이어그램에는 표현되어 있지 않지만 Subject 의 상태 변화시 notifyObservers 메서드를 통해서 ObserverCollection에 등록된 Observer 들에게 상태 변화를 통지하는 구조입니다.