네이티브 JavaScript API 소개: MutationObserver, IntersectionObserver 및 History API

최신 웹 애플리케이션은 응답성, 효율성 및 동적 상호작용성을 요구합니다. MutationObserver, IntersectionObserver 및 History API와 같은 기본 JavaScript API를 사용하면 개발자가 외부 라이브러리 없이도 이러한 문제를 직접 처리할 수 있습니다. 이러한 API를 자세히 살펴보고, 사용 사례를 이해하고, API의 강력한 기능을 효과적으로 활용하는 방법을 알아보세요.

돌연변이 관찰자

개요:

MutationObserver 인터페이스는 DOM 트리의 변경 사항을 모니터링하여 현재 더 이상 사용되지 않는 Mutation Events를 대체합니다. 노드가 추가, 제거 또는 수정되는 시기를 감지할 수 있으므로 동적 애플리케이션에 필수적인 도구입니다.

주요 기능:

• DOM 트리의 변경 사항을 모니터링합니다.
• 속성, 하위 노드 및 텍스트 콘텐츠에 대한 수정 사항을 감지합니다.
• 비동기식으로 작동하여 성능에 미치는 영향을 최소화합니다.

Q. MutationObserver는 어떻게 작동하나요?

MutationObserver 인스턴스는 DOM에서 지정된 변경이 발생할 때마다 트리거되는 콜백 함수로 생성됩니다.

MutationObserver의 옵션

• 하위 트리: 대상 노드와 모든 하위 노드를 관찰합니다.

• childList: 하위 노드의 추가 또는 제거를 감시합니다.

• 속성: 대상 노드의 속성에 대한 변경 사항을 추적합니다.

• attributeFilter: 지정된 속성으로 모니터링을 제한합니다.

• attributeOldValue: 속성이 변경되기 전에 속성의 이전 값을 캡처합니다.

• characterData: 노드의 텍스트 콘텐츠 변경 사항을 관찰합니다.

• characterDataOldValue: 수정 전 텍스트 콘텐츠의 이전 값을 캡처합니다.

HTML 구문

<div>



<p><strong>JS Syntax</strong><br>
</p>

<pre class="brush:php;toolbar:false">
const target = document.querySelector('#something')

const observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
    console.log('Mutation detected:', mutation)
  })
})

const config = {attributes:true, childList:true, characterData:true, subtree:true}

observer.observe(target,config)

//observer.disconnect() - to stop observing

사용 사례:

• UI 요소를 동적으로 업데이트합니다.
• DOM 변경에 대한 사용자 정의 동작 구현
• 타사 라이브러리 수정 사항을 모니터링합니다.

교차점 관찰자

개요:

IntersectionObserver는 루트 컨테이너 또는 뷰포트를 기준으로 대상 요소의 가시성 변화를 비동기적으로 관찰하는 인터페이스입니다. 일반적으로 지연 로딩, 무한 스크롤 및 분석에 사용됩니다.

주요 기능:

• 요소 가시성을 효율적으로 추적합니다.
• 스크롤 이벤트 리스너에 대한 의존도를 줄입니다.
• 임계값을 세밀하게 제어할 수 있습니다.

Q. 교차점 관찰자는 어떻게 작동하나요?

Intersection Observer API는 다음 상황 중 하나가 발생할 때 호출되는 콜백을 트리거합니다.

1. 타겟 요소는 기기의 뷰포트 또는 지정된 루트 요소와 교차합니다.

2. 관찰자가 처음으로 대상 요소를 관찰하기 시작합니다.

교차로 관찰자 옵션

• root: 가시성을 확인하기 위한 뷰포트로 사용되는 요소입니다. 지정하지 않으면 기본값은 브라우저의 뷰포트입니다.

• rootMargin: 루트 주위의 여백으로, 문자열로 지정됩니다(예: "10px 20px"). 관찰 가능한 영역을 확대하거나 축소합니다.

• 임계값: 콜백을 트리거하는 데 필요한 가시성 비율을 나타내는 0과 1 사이의 값(또는 값 배열).

Q. 교차점은 어떻게 계산되나요?

Intersection Observer API는 직사각형을 사용하여 교차 영역을 계산합니다.

• 불규칙한 모양의 요소는 요소를 완전히 둘러싸는 가장 작은 직사각형 내부에 맞는 것으로 간주됩니다.

• 부분적으로 보이는 요소의 경우 보이는 모든 부분을 포함하는 가장 작은 직사각형이 사용됩니다. 이를 통해 요소 모양이나 가시성에 관계없이 측정의 일관성이 보장됩니다.

기본 구문

<div>



<p><strong>JS Syntax</strong><br>
</p>

<pre class="brush:php;toolbar:false">
const target = document.querySelector('#something')

const observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
    console.log('Mutation detected:', mutation)
  })
})

const config = {attributes:true, childList:true, characterData:true, subtree:true}

observer.observe(target,config)

//observer.disconnect() - to stop observing

사용 사례:

• 지연 로딩되는 이미지 또는 동영상.
• 무한 스크롤을 구현합니다.
• 특정 요소에 대한 사용자 참여를 추적합니다.

고급 기능:

• 다중 임계값: 임계값 배열을 사용하여 부분적인 가시성을 관찰합니다.
• 루트 마진: 조기 감지를 위해 뷰포트 경계를 확장합니다.

히스토리 API

개요:

History API를 사용하면 웹 애플리케이션이 브라우저의 세션 기록을 조작할 수 있습니다. 단일 페이지 애플리케이션(SPA)의 초석인 페이지를 다시 로드하지 않고도 항목을 추가, 교체 또는 수정할 수 있습니다.

주요 기능:

• pushState 및 replacementState를 사용하여 기록 스택을 관리합니다.
• popstate를 사용하여 탐색 이벤트를 수신합니다.
• 전체 페이지를 다시 로드하지 않고도 브라우저의 주소 표시줄을 업데이트합니다.

기본 구문:

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element is visible in the viewport.')
      // Optionally stop observing
      observer.unobserve(entry.target)
    }
  })
})

// Target elements to observe
const targetElement = document.querySelector('.lazy-load')

// Start observing
observer.observe(targetElement)

사용 사례:

• 동적 라우팅으로 SPA 구축
• 브라우저 탐색으로 애플리케이션 상태 관리
• 맞춤형 탐색 환경 만들기
• 중요 사항:
• 이전 브라우저에 대한 적절한 대체를 보장하세요.
• 더 나은 SEO를 위해 URL 매개변수와 결합하세요.

이러한 API 결합

이러한 API를 함께 사용하여 정교한 웹 애플리케이션을 만들 수 있습니다. 예:

• MutationObserver를 사용하여 동적 DOM 변경을 모니터링하세요.
• DOM 변경으로 추가된 지연 로드 콘텐츠에 IntersectionObserver를 구현합니다.
• History API를 활용하여 애플리케이션 내에서 원활한 탐색을 제공하세요.

사용 사례:

블로그 애플리케이션은 사용자가 아래로 스크롤할 때(무한 스크롤) 게시물을 동적으로 로드합니다. 또한 페이지를 다시 로드하지 않고도 현재 게시물을 반영하도록 URL을 업데이트하여 더 나은 사용자 경험과 향상된 SEO를 보장합니다.

<div>



<p><strong>JS Syntax</strong><br>
</p>

<pre class="brush:php;toolbar:false">
const target = document.querySelector('#something')

const observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
    console.log('Mutation detected:', mutation)
  })
})

const config = {attributes:true, childList:true, characterData:true, subtree:true}

observer.observe(target,config)

//observer.disconnect() - to stop observing

결론

MutationObserver, IntersectionObserver 및 History API는 동적 및 대화형 웹 애플리케이션을 위한 강력한 기본 솔루션을 제공합니다. 기능을 이해하고 효과적으로 통합함으로써 개발자는 외부 라이브러리에 크게 의존하지 않고도 성능이 뛰어나고 기능이 풍부한 애플리케이션을 구축할 수 있습니다.