# Observer Pattern

20개의 포스트
post-thumbnail

[디자인 패턴] 옵저버 패턴(Observer Pattern)

정의 옵저버 패턴(Observer Pattern) 은 한 객체의 상태가 바뀌면 그 객체에 의존하는 다른 객체에게 연락이 가고 자동으로 내용이 갱신되는 방식으로 일대다(ont-to-many) 의존성을 정의한다. > 주제(subject) + 구독자(observer) = 옵저버 패턴 > 구독자는 주제를 구독하고, 각 주제들은 각 주제의 구독자들에게 해당 주제를 준다. > > ex) 시청자가 유튜버를 구독하면, 유튜브가 올린 미디어가 구독자(시청자)에게 보여진다. >❗️ 주의 출판-구독(Publish-Subsribe) 패턴 이랑 다른 패턴이다. 출판-구독 패턴은 출판사와 구독자를 더 세세하게 분리할 수 있는 복잡한 패턴이다. 미들웨이 시스템에서 종종 쓰인다. 의도 옵저버 패턴은 여러 객체에 자신이 관찰 중인 객체에 발생하는 모든 이벤트에 대하여 알리는 구독 메커니즘을 정의할 수 있도록 한다. > 상호 작용하는 객체 사이에는 가

2023년 9월 5일
·
1개의 댓글
·

Redux Store의 디자인 패턴은? pub/sub과 observer

Publish-Subscribe Pattern 리덕스 스토어 자체의 상태 변화를 감지하기 위한 패턴으로는 발행/구독 패턴(Publish-Subscribe Pattern)을 따른다. 줄여서 펍섭패턴은 어떤 이벤트를 발생시키는 subject 객체와, 그 이벤트에 대한 알림을 받기 위해 관찰자 옵저버 객체가 존재한다. 하지만 옵저버 패턴과 다른 점은 그 사이에 이벤트를 처리하는 브로커가 존재한다는 점이다. 옵저버 패턴의 서브젝트는 자신이 직접 오브젝트를 받아 관리하고 이벤트에 대한 알림을 보내지만, 펍섭 패턴의 서브젝트(퍼블리시)는 이벤트 브로커에게 이벤트를 보내고 이벤트 브로커가 옵저버(서브스크라이버)들에게 알림을 보낸다. 중간의 한 단계의 구조가 더 생긴 것이다. 펍섭 패턴을 사용하면 발행자가 직

2023년 8월 27일
·
0개의 댓글
·
post-thumbnail

forceUpdate 함수를 이용해 수동으로 렌더링할 때 상태 공유에 대하여

질문 상태 변경 알림 부분에서 어떤 행위가 구독이 돼서 연결된 컴포넌트 를 지정하는지 이해가 가지 않습니다. 교재에는 다음과 같이 설명 되어 있습니다. > Store는 어떤 식으로든 action을 처리하고, 상태가 바뀌면 연결된 컴포넌트를 forceUpdate한다. 컴포넌트는 해당 Store에서 상태를 얻어서 UI를 업데이트 하게 된다. 강의에 따르면 forceUpdate를 Store에 넣지 않고 각 컴포넌트에서 useForceUpdate로 받아와서 실행하면, 상태가 공유되지 않아서 CounterControl 컴포넌트에서 store.count 값을 증가시켜도 Counter 컴포넌트에 반영되지 않았습니다. 그래서 해결 방법으로 forceUpdate를 Store에 넣고 Counter 컴포넌트에서 Store.forceUpdate에 할당하는 방법을 하셨는데 이 부분이 왜 해결 방법인지 이해되지 않습니다. 질문:1 Counter 컴포넌트와 CounterControl 컴

2023년 5월 21일
·
0개의 댓글
·
post-thumbnail

옵저버 패턴 (Observer Pattern) for JavaScript

옵저버 패턴 > 옵저버 패턴은 객체의 상태 변화를 관찰하는 디자인 패턴 중 하나입니다. 이 패턴에서는 객체 간의 일대다 의존 관계를 정의하며, 어떤 객체의 상태가 변할 때 해당 객체에 의존하는 다른 객체들에게 자동으로 알림을 보내는 방식을 사용합니다. 이때 상태를 보내는 객체를 주체(subject), 상태를 받는 객체를 옵저버(observer)라고 합니다. 주체 객체의 상태가 변하면 옵저버 객체에게 변화를 알리게됩니다. 주체와 옵저버는 서로 독립적으로 변경될 수 있으며 따라서 느슨한 결합을 유지할 수 있습니다. 느슨한 결합이 주는 이점은 싱글톤 패턴에서 살펴보았습니다. 역시 코드를 보고 살펴봅시다. 위의 코드에서 NewsAgency클래스가 Observer입니다. addObserver(), removeObserver(), notifyObservers() 메소드는 관측자 객체(Observer)를 등록, 제거, 알림을 위한 메소드입니다

2023년 4월 13일
·
0개의 댓글
·
post-thumbnail

[Design Pattern] Observer Pattern

✍ Observer Pattern 이란... > 주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴이다. 주로 분산 이벤트 핸들링 시스템을 구현하는 데 사용된다. 발행/구독 모델로 알려져 있기도 하다. => 아주 간단히 얘기하자면 어떤 객체의 상태가 변할 때 그와 연관된 객체 들에게 알림을 보내는 디자인 패턴이 옵저버 패턴이라고 할 수 있다. ✍ Observer Pattern의 특징 주체 객체와 옵저버 객체 : 옵저버 패턴에는 2 종류의 객체가 있는데, 주체 객체는 관찰을 당하는 대상이며 옵저버 객체는 상태가 변하는 주체로부터 알림을 받는 객체이다. 1대 다 관계 : 주체과 옵저

2023년 2월 17일
·
0개의 댓글
·
post-thumbnail

CustomEvent를 활용해서 Observer 패턴을 적용하기

서론 기존 프로젝트의 구조 우리 프로젝트의 핵심은 워크스페이스(화이트보드)이다. figjam처럼 사용자들이 포스트잇을 붙이거나 드로잉을 할 수 있는 기능이 핵심이다. 워크스페이스 구조는 간단하게 위와 같다. canvas와 canvas와의 상호작용을 담당하는 컴포넌트를 모아둔 layout으로 구성되어있다 Canvas(화이트보드) 컴포넌트에서는 Fabric.js canvas와 실시간 화이트보드 공유를 위한 socket 로직을 처리하는 custom hook들이 동작한다. 그리고 layout은 header와 Toolkit 컴포넌트가 포함되어 있다. Toolkit에서는 Canvas에 어떤 오브젝트를 놓고 어떤 상호작용을 할 것인지 결정할 수 있는 기능을 제공한다. header는 현재 참여중인 사용

2022년 12월 16일
·
0개의 댓글
·
post-thumbnail

Observer Pattern

🔎 What is Observer Pattern? 옵저버 패턴(Observer Pattern)은 한 객체의 상태의 변화 혹은 행위에 대하여 다른 객체들이 그에 따른 변화/행위를 인지하여야 하는 경우에 사용 가능한 패턴입니다. 제 나름대로의 말로 정리했을때는 위와 같은데 최대한 저의 입장에서 이해하기 쉬운 말로 표현했는데 의미전달이 잘 되었을지 의문이 남는군요. 위키백과에서는 다음과 같이 정의하고 있습니다. > 옵서버 패턴 (observer pattern)은 객체)의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객

2022년 10월 24일
·
0개의 댓글
·
post-thumbnail

옵저버 패턴 정리

소프트웨어 아키텍처 전공 수업을 듣다가 조교님께서 옵저버 패턴에 대해 설명해주셨는데, 과거에 공부했던 내용을 복습할겸 다시 정리하기로 하였다. '관찰자'라는 의미에서 스타크래프트의 '옵저버'와 동일한 의미를 갖는다고 볼 수 있다. 시작하기에 앞서, 관리가 용이한 객체지향 시스템을 설계하기 위해서는 "나중에 어떻게 바뀔 것인지"에 대해 생각하면서 추상화나 상속, 다형성 같은 개념을 적용하여 유연한 디자인을 만들어야 한다고 생각한다. 이 말을 새겨듣고 들어가보자. 📞 객체들에게 연락 돌리기 - 옵저버 패턴 옵저버 패턴은 마치 구독자와 유튜버로 이루어지는 유튜브 구독 시스템이라고 보면 됩니다. 하지만 정확한 정의를 보자면 다음과 같습니다. 사실 옵저버 패턴을 여러 가

2022년 9월 29일
·
0개의 댓글
·
post-thumbnail

옵저버패턴(Observer Pattern)

옵저버(Observer)패턴이란? > 어떤 '이벤트' 가 일어나는 것을 감시하는 패턴 > 옵저버 패턴에서는 한 객체의 상태가 바뀌면 그 객체에 의존하는 다른 객체들의 내용이 자동으로 갱신되는 방식으로 일대다(one-to-many) 의존성을 정의한다. > 데이터가 변경되었을 그 객체를 의존하는 다른 객체들은 데이터를 전달해주는 것을 기다려야 되기 때문에 의존성을 갖는다. 옵저버 패턴의 구조 > 옵저버 또는 리스너(listener)라 불리는 하나 이상의 객체를 관찰 대상이 되는 객체에 등록시킨다. > 옵저버들은 관찰 대상인 객체가 발생시키는 이벤트를 받아 처리한다. 옵저버 패턴의 장단점 > 느슨한 결합을 이용하면 > 다른 객체의 상태 변화를 별도의 함수 호출 없이 즉각적으로 알 수 있기 때문에, 이벤트에 대한 처리를 자주 해야 하는 프로그램이라면 매우 효율적인 프로그램을 작성할 수 있다. 느슨한 결합(Loose Coupling) > 다른

2022년 7월 15일
·
0개의 댓글
·
post-thumbnail

03. 옵저버 패턴

옵저버 패턴(Observer Pattern) 옵저버는 '감시자'라는 뜻을 가지고 있습니다. '감시'라는 건 어떤 상황이 일어나는지 계속 지켜보는 것이죠. 옵저버 패턴이란, 한 객체의 상태 변화에 따라 다른 객체의 상태도 연동되도록 일대다 객체 의존 관계를 구성 하는 패턴을 말합니다. 다시 말해, A 클래스와 B 클래스가 있다고 한다면, B가 수정되었을 때, 옵저버를 통해 A도 B가 수정된 사실을 알 수 있게 해주는 것입니다. >예를 들면, 감자 가격이 1% 올랐다고 가정해 봅시다. 그러면 감자를 재료로 하는 물건들도 가격이 따라 올라가겠죠. 각각 감자튀김 가격이 5%, 감자칩 가격이 3% 올랐습니다. 감자튀김이랑 감자칩이 감자의 가격이 오른 것을 어떻게 알았을까요? 가격을 찾아볼 수 있는 것도 아닐텐데 말이죠. 여기서 옵저버가 등장합니다. 감자와, 감자튀김/감자칩을 이어주는 역할을 옵저버가 맡음으로써 서로의 수정

2022년 7월 15일
·
0개의 댓글
·
post-thumbnail

옵저버 패턴에 대해

아래 그림처럼 유튜버가 구독자 한 명 한 명에게 구독자 알림을 보내지 않듯이 옵저버 패턴도 마찬가지로 구독자들에게 한 번의 명령을 통해서 여러 명의 구독자들에게 알림을 보낼 수 있도록 하게 한다. 옵저버 패턴이란?   옵저버패턴이란 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화 가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 알려주는 디자인 패턴입니다.   어떤 객체의 변경 사항이 발생하였을때 이와 연관된 객체들에게 알려주는 디자인 패턴

2022년 6월 8일
·
0개의 댓글
·
post-thumbnail

RxJS

RxJS 퀵스타트 | 어플리케이션 오류 정의 | RxJS 처리 관점 | |:----------|:----------:| | 1. 입력 데이타 오류 | Observable | | 2. 상태 전파 오류 | Observer | | 3. 로직 처리 오류 | Functional Programming | https://rxjs-dev.firebaseapp.com/guide/observable Observable Observables are lazy Push collections of multiple values. They fill the missing spot in the following table: | | SINGLE | MULTIPLE

2022년 5월 5일
·
0개의 댓글
·
post-thumbnail

Swift 5. 스위프트 일지 (2)

키보드의 Return key로 앱 동작하기 ViewController에 UITextFieldDelegate protocol 추가 UITextField에 속한 여러 메소드를 사용하기 위함 viewDidLoad()에 textfield IBOutlet의 delegate 추가 (textField.delegate = self) 이를 통해 textfield와 현재 viewcontroller 사이에 연결이 생김 자주 쓰이는 관련 함수/메소드 searchTextField.endEditing(true) -> 키보드를 dismiss하는 메소드 textFieldShouldReturn() -> 유저가 return 버튼을 누르는 이벤트 시 호출되는 함수 textFieldShouldEndEditing() -> endEditing(true)메소드 호출 직후 진짜 edit을 끝낼지 validate하는 함수 textFieldDidEndEditing() -> edit 상태

2022년 4월 6일
·
0개의 댓글
·

(번역) 자바스크립트에서의 옵서버 패턴 - 반응형 동작의 핵심

원문 : https://blog.bitsrc.io/the-observer-pattern-in-javascript-the-key-to-a-reactive-behavior-f28236e50e10 많은 신규 개발자들은 React와 같은 프레임워크를 마법과 같이 생각하는 경향이 있습니다. 왜냐하면 그들이 개발자가 되기까지 배웠던 모든 것들과 실제 데이터 흐름이 진행되는 방식이 너무 다르게 느껴지기 때문입니다. 물론, 내부적으로 어떤 일이 발생하는지 모른다면 마법처럼 느껴질 수 있습니다. 하지만 Arthur C. Clarke는 이렇게 말합니다. > “충분히 진보한 기술은 마법과 다름없습니다.” 따라서 지금부터 당신이 실제로 마주했던 반응형 동작에 대한 기본적인 원칙과 (1) 왜 그것이 마법이

2022년 2월 16일
·
0개의 댓글
·
post-thumbnail

[ Vanilla JS ] Observer 패턴으로 상태관리 하기 ( feat. state )

Observer Pattern. 한 줄로 요약 하자면, 상태의 변경을 관찰하겠다. 상태가 변경되면 미리 정의한 일련의 동작을 실행시키는 원리이다. 전체 코드. /core/State.js /core/index.js 패턴의 흐름. 상태를 정의한다. 구독를 추가한다. _subscribers은 Set을 활용하여 구독자를 관리한다. 상태변경시 실행시킬 작업을 등록한다. 상태를 변경한다. defineProperty를 사용하여 = 로 state에 새로운

2022년 2월 6일
·
0개의 댓글
·
post-thumbnail

LiveData를 이용하여 UI와 Data를 연결하기

1. LiveData란? 앱에서는 데이터의 변화가 끊임없이 일어납니다. 이때 마다 앱의 UI를 갱신시켜야 하는데 상당히 번거로운 작업입니다. 이때 LiveData를 사용한다면 UI를 자동으로 갱신해줄 수 있습니다. 자동으로 갱신되는 이유는 LiveData가 Observer Pattern을 사용하기 때문입니다. Observer Pattern Observer Pattern이란 관찰 대상(Observable)과 관찰자(Observer)로 구성된 디자인 패

2021년 9월 20일
·
0개의 댓글
·

[Android] LiveData

서론 이번 포스팅에서는 AAC 의 일부인 LiveData 에 대해 알아보고자 한다. 본론 LiveData 의 여러 특징 중 가장 핵심적이고 독보적인 특징을 하나 뽑자면 수명 주기를 인식한다는 것이다. LiveData 는 관찰자 패턴을 기반으로 만들어진 라이브러리로 STARTED, RESUMED 상태인 관찰자에게만 알림을 보내주고 DESTORYED 가 된 관찰자는 자동으로 삭제한다. 위의 특징과 함께 LiveData 는 여러 장점이 있다. 관찰 대상의 값이 바뀌면 관찰자에게 즉시 알리기 때문에 UI 데이터 상태의 일치를 항상 보장할 수 있다. DESTORYED 된 관찰자는 자동으로 삭제하기 때문에 메모리 누수가 없다. 백그라운드에서 포그라운드로 돌아오는 수명주기를 인식하기 때문에 최신 데이터를 항상 유지한다. (이는

2021년 9월 8일
·
0개의 댓글
·
post-thumbnail

[디자인패턴] 옵저버패턴(Observer Pattern)

옵저버패턴(Strategy Pattern) 옵저버패턴은 어떤 객체에 이벤트가 발생했을 때, 이 객체와 관련된 객체들(옵저버)에게 통지하도록 하는 디자인 패턴을 말한다. 즉, 객체의 상태가 변경되었을 때 특정 객체에 의존하지 않으면서 상태의 변경을 관련된 객체들에게 통지하는 것이 가능해진다. 유튜브를 예시로, 유튜브 채널은 발행자가 되고 구독자는 구독자(옵저버)가 되는 구조이다. 즉, 유튜버가 영상을 업로드하면 구독자(옵저버)는 영상이 업로드 되었다는 알림을 받을 수 있다. 왜, 옵저버패턴을 사용할까? 채팅방을 예로들면, 관리자는 채팅방에 말을 입력할 수 있고 채팅방은 이를 화면에 보여줄 수 있다. 이를 코드로 표현하면 다음과 같다. 해당 코드를 실행하면 admin객체가 setRoom메소드를 통해 입장할 방을 선택하고 talk메소드를 통해 Room 객체 내부의 receive메소드가 실행되어 "안녕하세요"를 출력할 것이다. 만약 여기서

2021년 9월 7일
·
0개의 댓글
·

Observer Pattern

옵저버 패턴(Observer Pattern) 동작 방식 옵저버 패턴(Observer Pattern)에서는 한 객체의 상태가 바뀌면 그 객체에 의존하는 다른 객체들한테 연락이 가고 자동으로 내용이 갱신되는 방식으로 일대다(one-to-many) 의존성을 정의합니다. code reference 주제 객체에 옵저버를 옵저버 목록에 추가합니다. 주제 객체의 값이 바뀌면 등록된 옵저버들에게 연락을 합니다. 데이터를 받을 필요가 없는 옵저버들은 옵저버 목록에서 삭제합니다. ![](https://images.velog.io/images/ye-geeee/post/fdb1012e-7070-4ee1-84d0-5742ebd6a2d5/Observe

2021년 5월 28일
·
0개의 댓글
·

옵서버 패턴

행위패턴 개요 생성패턴은 객체가 생성되는 방식이 중요 구조패턴은 객체와 클래스를 합쳐 더 큰 기능을 구현 행위패턴은 이름 그대로 객체의 역할에 초점을 둔다. 더 큰 기능을 구현하기 위한 객체간의 상호 작용을 중요시 한다. 옵서버 패턴 이해 옵서버 패턴에서 객체(서브젝트)는 자식(옵서버)의 목록을 유지하며 서브젝트가 옵서버에 정의된 메소드를 호출할 때마다 옵서버에 이를 알린다. 옵서버 패턴의 구성원 서브젝트(subject): 서브젝트는 옵서버를 관리한다. 옵서버는 Subject클래스의 register(), deRegister()메소드를 호출해 자신을 등록한다, 서브젝트는 여러 옵서버를 관리한다. 옵서버(observer): 서브젝트를 감시하는 객체를 위한 인터페이스를 제공한다. 서브젝트의 상태를 알 수 있도록 ConcreateObserver가 구현해야 하는 메소드를 정의한다. 간단한 옵서버 디자인 패턴 옵

2020년 8월 9일
·
0개의 댓글
·