QnAi로깅

MutationObserver는 DOM 트리 내에서의 변경 사항을 감시하는 JavaScript API입니다. 특히 DOM 노드가 추가, 제거 또는 변경될 때 알림을 받습니다. 이를 통해 동적인 웹 애플리케이션에서 더욱 효율적인 대응이 가능합니다.

사용 예시는 다음과 같습니다:

htmlCopy code
<div id="myDiv">Hello, world!</div>

javascriptCopy code
// 대상 노드를 선택합니다.
const myDiv = document.getElementById('myDiv');

// 변경 사항을 감시하는 MutationObserver 객체를 생성합니다.
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type); // 어떤 타입의 변경사항인지 콘솔에 출력합니다.
  });
});

// 감시할 변경사항 타입을 설정합니다.
const config = { attributes: true, childList: true, characterData: true };

// 대상 노드와 감시할 변경사항 타입을 MutationObserver 객체에 등록합니다.
observer.observe(myDiv, config);

// 대상 노드를 변경합니다.
myDiv.textContent = 'Hello, universe!';

// 객체를 더 이상 사용하지 않을 때 MutationObserver 객체를 해제합니다.
observer.disconnect();

위 예시에서는 MutationObserver 객체를 생성하고 대상 노드(myDiv)와 감시할 변경사항 타입(config)을 등록합니다. 대상 노드가 변경될 때마다 MutationObserver 콜백 함수가 호출됩니다. 변경사항 타입은 attributes, childList, characterData 등 다양한 타입이 있으며, 필요에 따라 조합하여 사용할 수 있습니다. 마지막으로, 더 이상 객체를 사용하지 않을 때 MutationObserver 객체를 해제합니다.