요소 가시성 관찰하기
관찰자를 만들고 요소를 감시합니다.
요소 가시성 관찰하기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
Intersection Observer를 사용하는 이유
기존에는 요소가 뷰포트에 들어오는지 감지하려면 scroll을 수신하고 getBoundingClientRect를 계속 호출해야 했으며, 이 방식은 느리고 끊김이 발생했습니다.
교차 관찰자 API는 기본 스레드와 분리된 환경에서 가시성을 효율적이고 비동기적으로 관찰합니다.
관찰자 만들기
new IntersectionObserver(callback)으로 관찰자를 만듭니다. 관찰 중인 요소의 가시성이 임계값을 넘을 때마다 콜백이 실행됩니다.
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
console.log(entry.target, entry.isIntersecting);
});
});요소 관찰하기
observer.observe(element)를 호출하여 대상 관찰을 시작합니다. 하나의 관찰자로 여러 요소를 관찰할 수 있습니다.
const box = document.querySelector('.box');
observer.observe(box);
// Watch several at once:
document.querySelectorAll('.card')
.forEach(el => observer.observe(el));isIntersecting 플래그
각 항목에는 대상이 현재 root(기본값은 뷰포트)와 겹치는지를 알려 주는 불리언 isIntersecting이 있습니다.
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('element is now visible');
}
});
});항목 세부 정보
각 IntersectionObserverEntry에는 유용한 데이터가 포함되어 있습니다.
target— 관찰 중인 요소isIntersecting— root와 교차하는지 여부intersectionRatio— 표시되는 정도(0에서 1 사이)boundingClientRect— 대상의 사각형
(entries) => {
entries.forEach(e => {
console.log('visible portion:', e.intersectionRatio);
});
}threshold 옵션
threshold 옵션은 콜백이 실행되는 가시성 비율을 제어합니다. 0은 픽셀 하나가 보이는 즉시 실행되고, 1은 완전히 보일 때만 실행됩니다.
const observer = new IntersectionObserver(callback, {
threshold: 0.5 // fire when 50% visible
});
// You can pass an array for multiple steps:
// threshold: [0, 0.25, 0.5, 0.75, 1]root 옵션
기본적으로 관찰자는 브라우저 뷰포트를 기준으로 측정합니다. root를 스크롤할 수 있는 상위 요소로 설정하면 해당 컨테이너 안에서 가시성을 측정합니다.
const list = document.querySelector('.scroll-area');
const observer = new IntersectionObserver(callback, {
root: list // measure visibility inside this container
});rootMargin 옵션
rootMargin은 CSS 여백처럼 루트의 경계 상자를 늘리거나 줄입니다. 양수 값은 콜백을 더 일찍 실행하여 요소가 실제로 화면에 나타나기 전에 처리하도록 합니다.
const observer = new IntersectionObserver(callback, {
rootMargin: '200px' // start reacting 200px before visible
});관찰 중지
한 요소의 관찰을 중지하려면 observer.unobserve(element)를 호출하고, 모든 요소의 관찰을 중지하려면 observer.disconnect()를 호출합니다. 이는 정리 작업과 한 번만 실행되는 트리거에 중요합니다.
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
doSomething(entry.target);
observer.unobserve(entry.target); // fire once
}
});
});효율적인 이유
브라우저는 교차 상태를 내부적으로 계산하고 알림을 일괄 처리합니다. 따라서 모든 스크롤 프레임마다 JavaScript를 실행하지 않아도 됩니다. 이렇게 하면 레이아웃 교란을 방지하고 대상이 많아도 스크롤을 부드럽게 유지할 수 있습니다.
일반적인 사용 사례
Intersection Observer는 다음과 같은 다양한 실제 기능에 사용됩니다:
- 이미지와 iframe 지연 로딩
- 무한 스크롤
- 스크롤로 실행되는 애니메이션
- 광고 또는 콘텐츠 노출 추적
다음으로 이 중 몇 가지를 직접 만들어 보겠습니다.
빠른 확인
Intersection Observer의 기본 개념을 얼마나 이해했는지 확인해 보세요.
복습
Intersection Observer의 기본 개념을 배웠습니다:
new IntersectionObserver(callback, options)로 생성합니다.observe로 관찰을 시작하고,unobserve/disconnect로 중지합니다.- 각 항목은
isIntersecting과intersectionRatio를 제공합니다. threshold,root,rootMargin으로 실행 시점을 조정합니다.- 스크롤 리스너보다 훨씬 효율적입니다.
다음으로 이를 사용해 이미지를 지연 로딩하겠습니다.
자주 묻는 질문
“요소 가시성 관찰하기” 강의는 무료인가요?
네 — “요소 가시성 관찰하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“요소 가시성 관찰하기”에서 뭘 배우나요?
관찰자를 만들고 요소를 감시합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“요소 가시성 관찰하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 요소 가시성 관찰하기
- 이미지 지연 로딩
- 무한 스크롤
- 스크롤로 시작되는 애니메이션