IntersectionObserver & 스크롤

핵심 개념

IntersectionObserver는 요소가 뷰포트에 진입/이탈할 때 콜백을 실행합니다. 무한 스크롤, 지연 로딩, 스크롤 애니메이션에 활용합니다. threshold로 가시성 비율 기준을 설정합니다. ScrollIntersectionObserver를 지우면 스크롤 기반 기능이 사라집니다. 전통적인 scroll 이벤트보다 성능이 우수합니다.

코드 분석

JS📋 코드 (29줄)

<div style='font-family:monospace; padding:16px; background:#0d1117; color:#e8e8e8;'>
  <div id='scroll-container' style='height:200px; overflow-y:scroll; border:1px solid #333; padding:8px;'>
    <div style='height:150px; display:flex; align-items:center; justify-content:center; color:#333; font-size:12px;'>↓ 스크롤 하십시오</div>
    <div id='observe-target' style='padding:20px; background:#1a0000; border:1px solid #10b98144; color:#10b98166; text-align:center; font-size:12px; transition:all 0.5s;'>TARGET — 감지 대기중</div>
    <div style='height:100px;'></div>
  </div>
</div>
<script>
  const target = document.getElementById('observe-target');
  const container = document.getElementById('scroll-container');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        target.style.background = '#0a2200';
        target.style.borderColor = '#22c55e';
        target.style.color = '#22c55e';
        target.textContent = '[DETECTED] 타겟이 뷰포트에 진입했습니다';
      } else {
        target.style.background = '#1a0000';
        target.style.borderColor = '#10b98144';
        target.style.color = '#10b98166';
        target.textContent = 'TARGET — 감지 대기중';
      }
    });
  }, { threshold: 0.5, root: container });

  observer.observe(target);
</script>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 JS 'IntersectionObserver & 스크롤' 코드의 잠재적 버그와
메모리 누수·this 바인딩·비동기 경합 위험을
분석해서 프로덕션 수준으로 개선해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'IntersectionObserver & 스크롤'를 실제 서비스에서 어떻게 쓰는지
구체적 사례 3개와 복사 가능한 코드를
초보자가 이해할 수 있게 보여줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 JS 'IntersectionObserver & 스크롤' 관련 코드 전체의 실행 흐름을 분석하고
성능 병목과 최적화 방안을 우선순위로 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'IntersectionObserver & 스크롤'에서 개발자들이 가장 많이 하는
실수 Top 3을 솔직하게 알려주고
2026년 권장 패턴을 함께 알려줘.

⭐ 이것만 기억하세요

IntersectionObserver & 스크롤은 이 3가지만 확실히 잡으세요

1.scroll 이벤트로 요소 가시성을 체크하면 스크롤할 때마다 계산이 반복돼서 성능이 심하게 저하됩니다

2.IntersectionObserver는 대상 요소가 뷰포트에 진입/이탈할 때만 콜백을 실행해서 성능 부담이 거의 없습니다

3.다음 챕터에서 JavaScript 트랙의 모든 개념을 종합하는 최종 미션에 도전합니다

💬 이 챕터 질문 보기

JS · CH.33 — 질문하거나 답변을 확인하세요

→

진행도 33 / 34

← 커리큘럼으로 ← 목록으로 (JavaScript)