Intersection Observer

스크롤 이벤트의 강력한 대안

Intersection Observer API는 특정 요소가 뷰포트(화면)나 부모 요소의 가시 영역에 들어오거나 나갈 때 비동기적으로 관찰할 수 있는 방법을 제공합니다. 과거에는 scroll 이벤트를 사용하여 이를 구현했지만, 성능 저하(Reflow/Repaint) 문제가 심각했습니다. Intersection Observer는 브라우저 자체적으로 최적화되어 동작하므로 매우 뛰어난 성능을 보장합니다.

주요 활용처:

기능/특징	설명
무한 스크롤(Infinite Scroll)	구현- 화면에 보일 때만 이미지 로딩 (Lazy Loading)- 스크롤에 따른 애니메이션 트리거- 광고 배너의 실제 노출 여부 추적

// NO_PREVIEW
// 무한 스크롤 또는 애니메이션 트리거를 위한 Observer 예제
/*
HTML 구조 예시:
<div id="target" style="margin-top: 100vh; height: 100px; background: red;">관찰 대상 요소</div>
*/

// 1. 관찰자 옵션 설정
const options = {
  root: null, // 브라우저 뷰포트를 기준으로 관찰
  rootMargin: '0px',
  threshold: 0.5 // 요소의 50%가 보일 때 콜백 실행
};

// 2. 콜백 함수 정의
const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('요소가 화면에 나타났습니다!');
      // TODO: 데이터 페치, 애니메이션 클래스 추가 등
      
      // 필요한 경우 관찰 중단 (예: 레이지 로딩 완료 후)
      // observer.unobserve(entry.target);
    } else {
      console.log('요소가 화면에서 사라졌습니다.');
    }
  });
};

// 3. Observer 인스턴스 생성 및 관찰 시작
// const observer = new IntersectionObserver(callback, options);
// const target = document.querySelector('#target');
// if (target) observer.observe(target);
console.log("Intersection Observer 설정 완료 (실제 돔 요소에 적용 시 활성화 됨)");

실행 결과