Observer APIs

• 비동기적으로 특정 객체나 요소의 변화를 감지
• 변화가 발생했을 때 콜백 함수를 실행하도록 설계된 API
• 무한스크롤, 반응형 웹 디자인, 웹 성능 분석 및 최적화, SPA 상태 감지 및 동작 렌더링에 주로 사용
• 대표적인 Observer APIs
  1. MutationObserver
  2. IntersectionObserver
  3. ResizeObserver
  4. PerformanceObserver

1. MutationObserver

• DOM 요소의 변경 사항(속성, 자식 요소, 텍스트 내용 등)을 감지하는 API
• 이벤트 리스너로 감지하지 못하는 비동기적 DOM 변경을 추적할 때 유용
• 요소의 속성(attribute) 변경 감지
• 요소의 자식 노드 추가 및 삭제 감지
• 요소의 텍스트 노드 변경 감지

const targetNode = document.getElementById('target');

// 감지 옵션
const config = { childList: true, attributes: true, subtree: true };

// 콜백 함수
const callback = (mutationsList, observer) => {
  mutationsList.forEach(mutation => {
    console.log(mutation);
  });
};

const observer = new MutationObserver(callback);

// 감지 시작
observer.observe(targetNode, config);

// 감지 중지
// observer.disconnect();

2. IntersectionObserver

• 특정 요소가 뷰포트 또는 특정 부모 요소에 얼마나 노출되었는지 감지하는 API
• 무한 스크롤, 이미지 지연 로딩, 애니메이션 트리거 등에 사용
• 요소의 화면 노출 여부 감지
• 요소가 화면에 어느 정도 비율로 노출되었는지 감지

const target = document.querySelector('.box');

const options = {
  root: null, // 뷰포트를 기준으로 감지
  threshold: 0.5 // 50% 이상 보이면 감지
};

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('요소가 화면에 나타났습니다!');
    }
  });
}, options);

observer.observe(target);

3. ResizeObserver

• 요소의 크기 변화를 감지하는 API
• 반응형 웹 디자인이나 반응형 컴포넌트 개발에 유용
• 요소의 너비 및 높이 변화 감지
• 뷰포트 크기 변화에 따른 동적 레이아웃 조정

const target = document.querySelector('.box');

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    console.log('크기 변경:', entry.contentRect);
  });
});

observer.observe(target);

4. PerformanceObserver

• 웹 애플리케이션의 성능 측정 및 모니터링을 위한 API
• 페이지 로딩 시간, 네트워크 요청, 사용자 상호작용 성능 등을 추적할 때 사용
• 페이지 로딩 성능 측정
• 리소스 로딩 시간 분석
• 사용자 상호작용 시간 측정

const observer = new PerformanceObserver(list => {
  const entries = list.getEntries();
  entries.forEach(entry => {
    console.log('성능 데이터:', entry);
  });
});

observer.observe({ entryTypes: ['paint', 'resource', 'mark', 'measure'] });

Observer APIs 비교

Observer API	감지 대상	주요 활용 사례
MutationObserver	DOM 변경 (속성, 텍스트, 자식 요소)	동적 UI 감지 및 데이터 바인딩
IntersectionObserver	요소의 화면 노출 여부 감지	무한 스크롤, 이미지 지연 로딩
ResizeObserver	요소의 크기 변화 감지	반응형 레이아웃 및 컴포넌트
PerformanceObserver	웹 성능 데이터 감지	페이지 로딩 시간 및 사용자 상호작용 분석