Observer pattern, Observer API

옵저버 패턴?

 

디자인 패턴에 대한 글을 읽어봤다면, 옵저버 패턴을 들어본 적 있을 것이다. 데이터 종속적인 인터페이스가 데이터의 변화를 감시하는 구조이다. 쉽게 말해서, 표의 정보를 읽어 차트를 그렸고, 표의 정보를 바꿨다면, 그 값을 관찰(Observe)하는 차트는 실시간으로 변경되는 것을 말합니다.

 

신속한 동기화를 위해 '관찰'한다는 이 디자인 패턴이 발전하여 Reactive Programming 패러다임이 되었고, 이를 실행하기 위한 구체적인 수단으로 마이크로소프트에서 발표한 ReactiveX 라는 프레임워크가 등장했습니다. reactivex.io/

 

React에서 state를 변경하면 해당 state를 참고하는 컴포넌트가 재 랜더링되는 것도 옵저터 패턴 ~ Reactive Programing으로 이어지는 흐름에서 나온 것입니다. 

 

 

RxJS 없이, 웹 브라우저에서 제공해주는 옵저버

 

브라우저 런타임에서 제공해주는 옵저버 API는 다섯가지가 있습니다.

당연히 아직도 RxJS가 생소한만큼 브라우저에 따라 지원하지 않는 경우도 많습니다. 특히 ReportingObserver는 작동을 안하는 곳이 더 많다네요.

이게 참 한 섹션에 모여있지 않고 다들 떨어져 있어서 번거롭습니다..

 

• IntersectionObserver: 루트 영역(뷰포트)와 대상 객체의 겹침을 감시
• MutationObserver: 객체의 속성 변경을 감시
• PerformanceObserver: 프로세스 성능 모니터링
• ReportingObserver: 웹 사이트의 표준 및 정책 준수 현황을 감시
• ResizeObserver: 객체의 너비, 높이의 변화를 감시

 

여기에서 자주 사용되는 것으로는 IntersectionObserver, MutationObserver, ResizeObserver 정도가 있습니다.

 

제가 사용했던 방법은 다음과 같습니다.

 

IntersectionObserver는 특정 DOM이 사용자의 가시적 영역에 들어왔을 때 로드하는 방식으로 사용합니다. 랜딩 페이지에서 스윽 올라오는 동작을 구현하는데 좋습니다. 예전에는 이 방법을 위해서 Wow.js를 사용했는데 이제는 사용하지 않아도 됩니다.

 

MutationObserver는 DOM 객체의 속성을 감시합니다. DOM에 무슨 변화가 생겼을 때 감지하는, 꽤나 광범위하게 사용할 수 있습니다. React가 아니라 일반 JAM 스택을 사용한다면 유용하게 사용할 수 있습니다.

 

ResizeObserver는 resize 이벤트를 감지하여 디바이스가 모바일인 것을 판단하는 비효율적인 방법에서, 효율적으로 디바이스 크기를 감지하는 방법으로 전환하는데 좋습니다.

 

 

Observer API를 이용한 기능 구현

 

1. Intersection Observer API를 활용한 scroll triggered animation hook

 

darrengwon.tistory.com/1179

custom hook (4) : intersection observer를 활용한 useScrollFadeIn hook

 

2. Intersection Observer API를 활용한 이미지 동적 로딩

 

darrengwon.tistory.com/1250

Intersection Observer를 활용한 이미지 동적 로딩

3. Intersection Observer API를 활용한 무한 스크롤

 

... 작성 예정

 

 

참고한 글)

Observer API 전체의 간단한 예시

www.huskyhoochu.com/js-observers/