웹 애플리케이션을 개발하다 보면 DOM 요소의 변화를 감지하고 대응해야 하는 상황이 자주 발생합니다. 과거에는 이벤트 리스너나 폴링 방식으로 이를 처리했지만, 현대 웹 브라우저는 더 효율적인 방법을 제공합니다. 바로 Observer API들입니다.
1. ResizeObserver
ResizeObserver는 DOM 요소의 크기 변화를 감지합니다. 반응형 웹 디자인이나 동적 레이아웃에서 특히 유용합니다.
기본 사용법
const observer = new ResizeObserver(entries => {
entries.forEach(entry => {
console.log('크기가 변경됨:', entry.target);
console.log('새로운 크기:', entry.contentRect);
});
});
// 관찰 시작
observer.observe(document.querySelector('.my-element'));실제 활용 예시
// 차트 크기 자동 조절
const chart = document.querySelector('.chart');
const resizeObserver = new ResizeObserver(entries => {
const [entry] = entries;
const { width, height } = entry.contentRect;
updateChartDimensions(width, height);
});
resizeObserver.observe(chart);2. IntersectionObserver
IntersectionObserver는 요소가 뷰포트나 특정 부모 요소와 교차하는 것을 감지합니다. 무한 스크롤, 이미지 지연 로딩 등에 활용됩니다.
기본 사용법
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('요소가 화면에 보임');
}
});
}, {
threshold: 0.5 // 50% 이상 보일 때
});
observer.observe(document.querySelector('.target'));실제 활용 예시: 이미지 지연 로딩
const lazyImages = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
imageObserver.unobserve(img);
}
});
});
lazyImages.forEach(img => imageObserver.observe(img));3. MutationObserver
MutationObserver는 DOM 트리의 변화를 감지합니다. 속성 변경, 자식 요소 추가/제거 등을 모니터링할 수 있습니다.
기본 사용법
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
console.log('변화 유형:', mutation.type);
console.log('변화된 요소:', mutation.target);
});
});
observer.observe(targetNode, {
attributes: true, // 속성 변화 감지
childList: true, // 자식 요소 변화 감지
subtree: true // 하위 요소 모두 감지
});실제 활용 예시: 동적 폼 검증
const form = document.querySelector('form');
const formObserver = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'attributes' &&
mutation.attributeName === 'data-valid') {
updateFormValidation(mutation.target);
}
});
});
formObserver.observe(form, {
attributes: true,
subtree: true,
attributeFilter: ['data-valid']
});4. PerformanceObserver
PerformanceObserver는 웹 애플리케이션의 성능 지표를 모니터링합니다. 페이지 로드 시간, 리소스 타이밍 등을 측정할 수 있습니다.
기본 사용법
const observer = new PerformanceObserver(list => {
const entries = list.getEntries();
entries.forEach(entry => {
console.log('성능 지표:', entry.name);
console.log('소요 시간:', entry.duration);
});
});
observer.observe({
entryTypes: ['navigation', 'resource']
});실제 활용 예시: 성능 모니터링
const performanceObserver = new PerformanceObserver(list => {
const entries = list.getEntries();
entries.forEach(entry => {
if (entry.entryType === 'largest-contentful-paint') {
console.log('LCP:', entry.startTime);
}
if (entry.entryType === 'layout-shift') {
console.log('CLS:', entry.value);
}
});
});
performanceObserver.observe({
entryTypes: ['largest-contentful-paint', 'layout-shift']
});브라우저 지원 현황
각 Observer API의 브라우저 지원 현황은 다음과 같습니다:
- ResizeObserver: Chrome 64+, Safari 13.1+, Firefox 69+
- IntersectionObserver: Chrome 51+, Safari 12.2+, Firefox 55+
- MutationObserver: Chrome 18+, Safari 6+, Firefox 14+
- PerformanceObserver: Chrome 52+, Safari 14+, Firefox 57+
결론
Observer API들은 웹 애플리케이션에서 다양한 변화를 효율적으로 감지하고 대응할 수 있게 해줍니다. 이벤트 기반 방식보다 성능이 좋고, 코드도 더 깔끔해집니다. 각 API의 특성을 잘 이해하고 적절한 상황에 활용한다면, 더 나은 웹 애플리케이션을 만들 수 있을 것입니다.
[이 포스트는 AI가 작성한 포스트 입니다.]