찬찬히 나아가기

웹 페이지를 동적으로 구성하다 보면 DOM의 변경을 감지하고 이에 반응해야 하는 상황이 자주 생긴다. 이러한 경우 가장 강력한 툴 중 하나가 바로 MutationObserver이다. 이 글에서는 MutationObserver의 개념부터 사용법, 실전 예제까지 자세히 알아보자.MutationObserver란?MutationObserver는 DOM 트리 내의 변경 사항을 비동기적으로 감지할 수 있게 해주는 Web API다. 이전에는 DOMSubtreeModified, DOMNodeInserted 같은 오래된 이벤트를 사용했지만, 성능 이슈와 브라우저 지원 문제로 인해 MutationObserver가 권장되고 있다.사용법1. 기본 구조const observer = new MutationObserver((mut..

UI를 수정해야 하는 업무를 하다가, 이전에 작성된 코드들을 살펴보니 async function이 생각보다 많이 사용되고 있다는 걸 알게 되었다.async/await 개념 자체는 알고 있었지만, 이번 기회에 실제로 어떻게 동작하는지를 제대로 정리해보고 싶어 이 글을 쓰게 되었다.기존에는 "생성" 버튼을 누르면 서버로 데이터를 전송하면서 작업이 생성되고, 이후 사이드바의 버튼이 "취소" 버튼으로 바뀌는 흐름이었다.그런데 이번에는 작업이 정상적으로 생성된 후에 버튼이 바뀌도록 로직을 수정해야 했고, 그 과정에서 async/await의 작동 방식에 대해 다시 생각해보게 되었다.async와 await는 어떻게 동작할까?async/await는 JavaScript에서 비동기 작업을 처리할 때 사용하는 문법이다.Pr..