의존성 패키지 없이도 자바스크립트 기본 내장 옵저버를 소개한 글이 있어서 가져와봤습니다.
이 글에서 소개하고 있는 옵저버는 총 5지인데요.
- IntersercionObserver: 루트 영역(뷰포트) 와 대상 객체의 겹침을 감시
- ResizeObserver: 객체의 너비, 높이의 변화를 감시
- MutationObserver: 객체의 속성 변경을 감시
- PerformanceObser: 프로세스 성능 모니터링
- ReportingObserver: 웹 사이트의 표준 및 정책 준수 현황을 감시
이 중에 IntersectionObserver 는 스크롤을 내리면서 이미지를 로드 시킬 때 아주 유용할것 같네요.
(참고: 레진 기술 블로그 - IntersectionObserver를 이용한 이미지 동적 로딩 기능 개선)
그 외의 ResizeObserver를 통해서는 반응형에 대해 대응 할 수 도 있을것 같고, 나머지는 제가 잘 몰라서 그런지 잘 사용하지 않을 것 같아요.
한번 글을 읽어보면 더 자세한 기능 설명과 예제를 보실 수 있을것 같네요.
개발을 취미로 하는 개발자가 되고픔