[1장] 프레임워크에 대한 이야기

[Joie-Kim]

🧐 Question

• 간단한 질문 겸 얘기 해보면 좋을 거 같은 건데요..! (주절주절)
• 옵저버블(observable)에 대해 찾아보다가 옵저버 패턴, 이터레이터 패턴, 리액티브 프로그래밍에 대해 찾아보게 됐습니다.
• 여러분은 옵저버블에 대해 어떻게 이해하셨나요?
• 그리고 저런 디자인 패턴에 대해서 어떻게 이해하고, 실무에 적용하고 계신지 궁금합니다.

📝 Reference

• 앵귤러 공식 문서
• RxJS에 대해 정리한 블로그
• RxJS에 대해 정리한 블로그2
• 옵저버 패던
• 옵저버 패턴, 이터레이터 패턴, 리액티브 프로그래밍에 대해 정리한 블로그

[jasongoose]

여러분은 옵저버블에 대해 어떻게 이해하셨나요?

전 Observable 패턴 자체는 관찰자인 Observer와 관찰 대상인 Observable을 지정하면 Observable 내부적으로 무슨 변화가 있으면 Observer로 데이터가 전달되는, 뭔가 정겨 방식으로 어렴풋이 알고 있었어요.

근데 RxJS 문서랑 Angular 문서 설명을 보니까 제 생각보다는 더 깊은 의미가 있는 것으로 보여요.

Promise는 인스턴스가 한번 만들어지면 바로 연산을 시작하지만 Observable 내부 연산은 Observer가 subscribe할 때마다 실행되니까 언제 시작할지 시점을 제어할 수 있고,

EventListener와는 다르게 Observable에서 전달하는 데이터로 Observer에서 실행할 연산을 여러 번 실행할 수 있다는 점이 개인적으로 신기했던 것 같아요!

그리고 저런 디자인 패턴에 대해서 어떻게 이해하고, 실무에 적용하고 계신지 궁금합니다.

저희 회사에서 디자인 시스템을 담당하시는 분은 구조가 있는 공통 컴포넌트를 만드실 때 Compound 패턴을 자주 사용하세요. Vue에서 제공하는 slot이라는 기능이 이 패턴에 적합한 스펙이라고 하셨던 것 같아요.

[horang-e]

전 React의 contextAPI를 사용해서 컴포넌트들이 context를 "구독"한다는 개념이 Observable 패턴과 유사한 개념을 가지고 있다고 이해해서 호로록 지나갔던것같습니다.. 그런데 올려주신 참고자료들을 보니 제가 너무 가볍게 지나간게 아닌가 하는 생각을 했습니다 ! 혹시 참고가 될까 해서 제가 클로드한테 ContextAPI와 옵저버블 패턴을 비교한 내용을 공유해보겠습니도 👯

1. 옵저버블 패턴의 핵심 개념:

- 관찰 대상(Observable)이 있고, 이를 관찰하는 관찰자(Observer)들이 있습니다.
- 관찰 대상의 상태가 변경되면 모든 관찰자들에게 알림이 갑니다.
- 관찰자들은 이 알림을 받아 적절히 반응합니다.

2. React의 Context API:

- Provider가 관찰 대상(Observable)의 역할을 합니다.
- Consumer 또는 useContext 훅을 사용하는 컴포넌트들이 관찰자(Observer)의 역할을 합니다.
- Context의 값이 변경되면 이를 사용하는 모든 컴포넌트들이 자동으로 리렌더링됩니다.

3. 유사점:

- 중앙화된 상태 관리: 둘 다 여러 컴포넌트에서 공유되는 상태를 관리합니다.
- 자동 업데이트: 상태 변경 시 관련된 모든 부분이 자동으로 업데이트됩니다.
- 구독 메커니즘: 컴포넌트들이 Context를 "구독"하는 것과 유사하게, 옵저버들도 Observable을 구독합니다.