개요

Angular의 RxJS를 이용한 Observer pattern은 RxJS의 기초이기도 하고, 주저하기 쉬운 포인트의 하나입니다.
대체로 쓴 직후라든지는 무엇을 하고 있는지 이해할 수 있지만, 잠시 후 같은 코드를 보면 "Subject는 무엇을 하고 있는 거야?""subscribe가 어디에도 보이지 않는데?"같은 상태가 되어 버려, 그것을 여러 번 반복해 버립니다(샘플수 1).
이 문서를 통해 Anbular의 Observer pattern에서 등장 인물이 무엇을하고 있고 서로 어떤 바람에 관련되어 있는지 정리를 해 가고 싶습니다.

Observer pattern?

Observer 패턴은 디자인 패턴의 일종입니다. wikipedia 로 쓰여져 있는 것은 「프로그램내의 오브젝트의 이벤트를 다른 오브젝트에 통지하는 처리」라고 하는 것. 자신은 이 설명을 들었을 때 구체적으로 무엇을 할 수 있는지 지금 상상할 수 없었습니다.
그보다 저는 publish/subscriber pattern 의 일부라고 불리는 편이 이미지가 쉬웠습니다.

publish/subscriber

publish/subscribe란 "메시지의 송신자(publisher)가 특정의 수신자(subscriber)를 상정하지 않고 메시지를 보내도록(듯이) 프로그램된 것이다."라고 wikipedia에 있습니다. 프로그램에 한하지 않고 이 모델은 여러 곳에서 이용되고 있어 메일링 리스트등은 제일 유명한 publish/subscribeer pattern의 이용 용도군요.
Observer pattern은 그 안에서 publisher가 관리하고 있는 객체의 변경의 통지를 subscriber가 구독(subscribe) 한다고 하는 특수한 용도의 하나가 아닐까라고 생각하고 있습니다.

전체도

이 Observable pattern에서 데이터가 어떻게 흐르는지에 대한 개략도는 다음과 같습니다.
Publisher가 감시하고 있는 Object에 변경이 있었을 경우에 하나의 Publisher로부터 복수의 Subscriber에 「데이터가 A에서 B로 바뀌었습니다」라는 데이터가 일방적으로 흐르는 것 같은 데이터의 흐름을 합니다. 이것은 데이터를 취득하고 싶은 Subscriber는 폴링 등 적극적으로 데이터의 변경을 검지하는 노력을 할 필요가 없고, 단지 Subscriber는 입을 열어 기다리고 있는 것만으로 Publisher가 「A에서 B로 변경했어」라고 한다 정보를 보내주는 것입니다. 좋네요. 그럼 도대체 어떻게 실현하고 있는 것일까요. 위의 그림보다 좀 더 내부 실장보다의 그림이 이하가 됩니다 이 그림을 바탕으로 데이터의 수신측(Subscriber)과 송신측(Publisher)이 무엇을 하고 있는지를 살펴보겠습니다. Subscriber (Consumer)는 무엇을하고 있습니까? 등장 인물 그 1. Subscriber는 결국 Publisher에서 값을 받고 싶습니다. 이렇게 하려면 다음 두 단계를 수행합니다. 1. observer 정의 2. 그 observer를 publisher에 등록(구독) observer란? observer는 next() , error , complete() 를 구현한 함수를 가진 객체입니다. next 는 변경 감지했다고 하는 데이터를 받아 Publihser 가 실행하는 핸들러로, 예를 들어 이 next 핸들러를 통해 SubscriberA 가 가지고 있는 Object 에 변경을 반영시킨다고 할 수도 있습니다. error 는 뭔가 에러가 발생했을 때에 실행하는 핸들러 (구현은 임의) complete 는 실행이 완료했을 때에 실행되는 핸들러 (구현은 임의) 이 정의한 핸들러는 값의 변경이 통지될 때 Subscriber가 그 값을 어떻게 하고 싶은지가 정의되고 있습니다. observer를 Publisher에 등록 (구독) 정의한 observer는 Publihser에 등록합니다. Angular(RxJS)에서 자주 보는 subscibe(observer)가 바로 그 구독 처리가 됩니다. Publisher는 무엇을하고 있습니까? 등장 인물 그 2. Publisher는 Subscriber가 등록한 핸들러를 모니터링하는 오브젝트를 트리거로 변경합니다. RxJS에서는 Observable이라는 인스턴스의 subscirbe 함수에 Subscriber가 정의한 observer를 전달함으로써 실현됩니다. Observable이란? Observable은 다음을 수행합니다. - 데이터를 흘리기 - 그 데이터를 흘렸을 때 실행할 함수(observer)를 등록한다. 데이터를 흘리다 이 데이터의 흐름은 여러 곳에서 얻을 수 있으며, 그것은 http요청이라든지, 이벤트이든, RxJS라면 Subject를 이용하면 next 함수로 데이터를 흘릴 수도 있습니다 Publisher는 다음을 수행합니다. - 모니터링 대상 객체의 변경을 감지 - 등록된 Subscriber 핸들러를 실행합니다. - 이 등록되는 함수는 몇 개라도 등록 가능하므로 1대N의 통신(일방적으로 데이터를 흘려 넘기는 것입니다만)이 가능 - 1은 Publisher이고 N은 Subscriber. Angular의 구현 TBD 왠지 문장량도 많아졌고, 따로 쓸지도