Mutation Events - MutationObserver로 안전하게 마이그레이션하기

⚠️ DOMNodeInserted는 끝났다: MutationObserver로 안전하게 마이그레이션하기

DOMNodeInserted와 같은 이벤트는 deprecated(비표준)으로 처리되었습니다.

웹 개발을 하면서 한 번쯤은 들어봤을 DOMNodeInserted, DOMSubtreeModified, DOMNodeRemoved 같은 이벤트. jQuery를 사용하는 프로젝트나 레거시 코드에서는 아직도 종종 보이곤 합니다. 하지만 이제는 정말 끝입니다.

2024년 7월 23일, Chrome 127 정식 버전부터 해당 이벤트들은 완전히 제거됩니다. 

 

2025년 3월 Chrome 134 정식 버전 이후로는 chrome://flags/ 설정을 통한 허용도 막혀 MutationObserver로의 마이그레이션이 필요로 합니다.

 

Listener added for a 'DOMNodeInserted' mutation event. Support for this event type has been removed, and this event will no longer be fired. See https://chromestatus.com/feature/5083947249172480 for more information.

---

🚨 Mutation Events, 왜 사라지는 걸까?

이벤트 목록

DOMNodeInserted

DOMNodeRemoved

DOMSubtreeModified

DOMCharacterDataModified

DOMNodeInsertedIntoDocument

DOMNodeRemovedFromDocument

 

이 이벤트들은 DOM Level 2 시절부터 존재해왔지만, 사실 2011년부터 비표준(deprecated) 처리되었습니다.

그럼에도 불구하고 오랫동안 사용돼온 이유는 "간단하게 동적 DOM 변경을 감지할 수 있었기" 때문이죠.

 

하지만 이 이벤트들은 치명적인 단점이 있었습니다:

• 성능 저하: 요소 하나마다 이벤트가 발생해 너무 빈번하게 호출됨
• 브라우저 최적화 방해: 내부 구조 최적화가 어려움
• 충돌 위험: DOM 변경 중 또 다른 변경이 발생할 수 있어 예측 어려움

이러한 문제 때문에 드디어 Chrome 팀은 과감히 영구 삭제를 선언했습니다.

---

 

🔄 대안은? MutationObserver

다행히도 이 문제를 해결할 수 있는 공식적인 대체 API가 존재합니다. 바로 MutationObserver입니다.

 

✅ MutationObserver 기본 구조

const observer = new MutationObserver(function(mutationsList, observer) {
  // 변경사항이 감지될 때 실행될 코드
  console.log('DOM 변경됨', mutationsList);
});

observer.observe(targetElement, {
  childList: true,      // 자식 노드의 추가/삭제 감지
  subtree: true,        // 하위 모든 자식까지 감지
  attributes: true,     // 속성 변화 감지
  characterData: true   // 텍스트 내용 변경 감지
});

• 삭제할 때는 .disconnect() 

 

 

실제 적용 예시 JS

const observer = new MutationObserver((mutationList) => {
  mutationList.forEach((mutation) => {
   mutation.addedNodes.forEach((node) => {
      if (!(node instanceof HTMLElement)) return;

      // classList에 특정 내용이 포함된 필드를 찾음
      if (node.classList.contains('특정필드')) {
      	// 기존 Mutation Events를 활용한 동작 로직 
      }

      // 내부에 특정필드가 포함된 경우
      const nested = node.querySelector?.('.특정필드');
      if (nested) {
      	// 기존 Mutation Events를 활용한 동작 로직 
      }
    });
  });
});

// 문서 전체 감시 (또는 특정 영역을 설정)
observer.observe(document.body, {
  childList: true,
  subtree: true,
});

---

🛠 임시 대응: 정책 및 폴리필

아직 마이그레이션이 어려운 경우라면 다음과 같은 임시 조치를 고려할 수 있습니다.

1. Chrome Enterprise 정책 (MutationEventsEnabled)

기업 환경에서는 정책 설정을 통해 일정 기간 동안 이벤트를 유지할 수 있습니다.

2. Deprecation Trial 신청

구글에서 제공하는 임시 허용 정책입니다.

3. 폴리필 사용

레거시 이벤트를 감지해서 MutationObserver로 처리해주는 Polyfill도 존재합니다.

npm install mutation-events

import 'mutation-events';

• GitHub: mutation-events-polyfill

단, 성능 이슈가 있을 수 있으므로 단기적인 사용만 권장됩니다.

 

---

🔚 마무리

기술은 끊임없이 진화합니다. 이번 Mutation Events의 완전 제거도 더 나은 성능과 미래를 위한 필연적인 변화입니다.

혹시 아직도 DOMNodeInserted를 쓰고 있는 프로젝트가 있다면, 지금 바로 MutationObserver로 마이그레이션을 진행하세요.

 

이 글이 도움이 되셨다면 공유도 부탁드립니다. 🙌