[뮤테이션 옵저버] 표현 다듬기와 맞춤법 교정

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ezn3Dq7aWbVPvWonrUn8YK

Author: Violet-Bora-Lee

2-ui/99-ui-misc/01-mutation-observer/article.md

@@ -7,7 +7,7 @@
 
 ## 문법
 
-`MutationObserver`는 사용법이 간단합니다.
+`MutationObserver` 사용법은 간단합니다.
 
 먼저 콜백 함수를 넘겨 옵저버를 만듭니다.
 
@@ -32,7 +32,7 @@ observer.observe(node, config);
 - `attributeOldValue` -- `true`이면 속성의 이전 값과 새 값을 모두 콜백에 전달하고(아래 참고) 그렇지 않으면 새 값만 전달함(`attributes` 옵션 필요)
 - `characterDataOldValue` -- `true`이면 `node.data`의 이전 값과 새 값을 모두 콜백에 전달하고(아래 참고) 그렇지 않으면 새 값만 전달함(`characterData` 옵션 필요)
 
-이후 변경이 생길 때마다 `callback`이 실행됩니다. 이때 첫 번째 인수로 [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) 객체 목록이, 두 번째 인수로 옵저버 자신이 전달됩니다.
+실제 변경이 생길 때마다 `callback`이 실행됩니다. 이때 콜백 함수의 첫 번째 인수로 [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) 객체 목록이, 두 번째 인수로 옵저버 자신이 전달됩니다.
 
 [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) 객체에는 다음과 같은 프로퍼티가 있습니다.
 
@@ -65,7 +65,7 @@ observer.observe(elem, {
 </script>
 ```
 
-위 코드를 브라우저에서 실행하고 `<div>`에 포커스를 준 다음 `<b>수정</b>` 안의 텍스트를 바꾸면 `console.log`에 뮤테이션 하나가 출력됩니다.
+우측 상단 재생 버튼을 눌러 코드를 브라우저에서 실행하고 `<div>`에 포커스를 준 다음 `<b>수정</b>` 안의 텍스트를 바꾸면 `console.log` 때문에 개발자 도구에 뮤테이션 하나가 출력됩니다.
 
 ```js
 mutationRecords = [{
@@ -76,7 +76,7 @@ mutationRecords = [{
 }];
 ```
 
-`<b>수정</b>`을 통째로 지우는 등 더 복잡하게 수정하면 뮤테이션 이벤트에 뮤테이션 레코드가 여러 개 담길 수 있습니다.
+`<b>수정</b>`을 통째로 지우는 등 더 복잡한 방식으로 수정을 하면 뮤테이션 이벤트에 뮤테이션 레코드가 여러 개 담길 수 있습니다.
 
 ```js
 mutationRecords = [{
@@ -103,9 +103,9 @@ mutationRecords = [{
 
 유용한 기능이 들어 있지만 원치 않는 동작도 하는 서드파티 스크립트를 추가해야 하는 상황을 상상해 봅시다. 이 스크립트는 `<div class="ads">원치 않는 광고</div>`같이 광고를 노출합니다.
 
-당연하게도 서드파티 스크립트엔 광고를 제거할 수단이 없습니다.
+당연하게도 서드파티 스크립트는 광고를 제거할 수단을 제공하지 않습니다.
 
-`MutationObserver`를 사용하면 원치 않는 요소가 DOM에 나타나는 순간을 감지해 제거할 수 있습니다.
+이럴 때 `MutationObserver`를 사용하면 원치 않는 요소가 DOM에 나타나는 순간을 감지해 제거할 수 있습니다.
 
 이 외에도 서드파티 스크립트가 문서에 무언가를 추가하는 시점을 감지해서 페이지를 조정하거나 특정 영역의 크기를 동적으로 조절하고 싶은 경우도 있습니다.
 
@@ -128,7 +128,7 @@ mutationRecords = [{
 ...
 ```
 
-가독성을 높이는 동시에 보기 좋게 꾸미기 위해 [Prism.js](https://prismjs.com/) 같은 자바스크립트 구문 강조(syntax highlighting) 라이브러리를 사이트에 사용해 보겠습니다. Prism에서 위 예시에 구문 강조를 적용하려면 `Prism.highlightElem(pre)`를 호출합니다. 이 메서드는 `pre` 요소의 내용을 검사해서 색을 입히는 특별한 태그와 스타일을 해당 요소 안에 추가합니다. 지금 보고 있는 이 페이지의 예시와 비슷한 결과물이 만들어지죠.
+가독성을 높이는 동시에 보기 좋게 꾸미기 위해 [Prism.js](https://prismjs.com/) 같은 자바스크립트 구문 강조(syntax highlighting) 라이브러리를 사이트에 사용해 본다고 가정하겠습니다. Prism에서 위 예시에 구문 강조를 적용하려면 `Prism.highlightElem(pre)`를 호출합니다. 이 메서드는 `pre` 요소의 내용을 검사해서 색을 입히는 특별한 태그와 스타일을 해당 요소 안에 추가합니다. 지금 보고 있는 이 페이지의 예시 코드와 비슷한 결과물이 만들어지죠.
 
 그렇다면 구문 강조 메서드는 정확히 언제 실행해야 할까요? `DOMContentLoaded` 이벤트에서 실행할 수도 있고 스크립트를 페이지 맨 아래에 넣을 수도 있습니다. DOM이 준비되면 `pre[class*="language"]`에 해당하는 요소를 찾아 `Prism.highlightElem`을 호출하면 됩니다.
 
@@ -148,9 +148,9 @@ articleElem.innerHTML = article;
 
 새로 받아온 `article` HTML엔 코드 예시가 들어 있을 수 있습니다. `Prism.highlightElem`을 호출하지 않으면 이 코드는 강조 표시되지 않습니다.
 
-**동적으로 불러온 글엔 `Prism.highlightElem`을 어디서, 언제 호출해야 할까요?**
+**그럼 동적으로 불러온 글엔 `Prism.highlightElem`을 어디서, 언제 호출해야 할까요?**
 
-다음처럼 글을 불러오는 코드 뒤에 호출을 덧붙일 수 있습니다.
+다음처럼 글을 불러오는 코드 뒤에 호출을 덧붙일 수 있을 겁니다.
 
 ```js
 let article = /* 서버에서 새 콘텐츠를 가져옴 */
@@ -162,7 +162,7 @@ snippets.forEach(Prism.highlightElem);
 */!*
 ```
 
-...그런데 글, 퀴즈, 게시판 글처럼 콘텐츠를 불러오는 곳이 코드 곳곳에 많다고 상상해 봅시다. 불러온 콘텐츠 속 코드를 강조 표시하려고 호출 코드를 모든 곳에 붙여야 할까요? 그다지 편리한 방법이 아닙니다.
+그런데 글, 퀴즈, 게시판 글처럼 콘텐츠를 불러오는 곳이 코드 곳곳에 많다고 상상해 봅시다. 불러온 콘텐츠 속 코드를 강조 표시하려고 위와 같은 코드를 모든 곳에 붙여야 할까요? 그다지 편리한 방법이 아닙니다.
 
 콘텐츠를 서드파티 모듈이 불러온다면 어떨까요? 예를 들어 다른 사람이 만든 게시판이 콘텐츠를 동적으로 불러오는데 여기에 구문 강조를 적용하고 싶을 수 있습니다. 서드파티 스크립트에 패치를 덧대는 일은 누구도 반기지 않습니다.
 
@@ -176,24 +176,24 @@ snippets.forEach(Prism.highlightElem);
 
 동작하는 예시를 봅시다.
 
-아래 코드를 실행하면 밑에 있는 요소를 관찰하기 시작해서 그곳에 나타나는 코드 예시를 강조 표시합니다.
+아래 코드를 실행하면 하위 요소를 관찰하기 시작해서 그곳에 나타나는 코드 예시를 강조 표시합니다.
 
 ```js run
 let observer = new MutationObserver(mutations => {
 
   for(let mutation of mutations) {
-    // 새 노드를 검사합니다. 강조 표시할 대상이 있을까요?
+    // 강조 표시할 새 노드가 있는지 검사합니다.
 
     for(let node of mutation.addedNodes) {
-      // 요소만 추적하고 다른 노드(예: 텍스트 노드)는 건너뜁니다.
+      // 요소(노드)만 추적하고 다른 노드(예: 텍스트 노드)는 건너뜁니다.
       if (!(node instanceof HTMLElement)) continue;
 
       // 삽입된 요소가 코드 예시인지 확인합니다.
       if (node.matches('pre[class*="language-"]')) {
         Prism.highlightElement(node);
       }
 
-      // 서브트리 어딘가에 코드 예시가 있을 수도 있습니다.
+      // 서브트리 어딘가에 코드 예시가 있을 수 있으니 확인합니다.
       for(let elem of node.querySelectorAll('pre[class*="language-"]')) {
         Prism.highlightElement(elem);
       }
@@ -209,7 +209,7 @@ observer.observe(demoElem, {childList: true, subtree: true});
 
 바로 아래에 HTML 요소가 하나 있고 `innerHTML`을 사용해 이 요소를 동적으로 채우는 자바스크립트가 있습니다.
 
-먼저 위 코드(해당 요소를 관찰함)를 실행한 다음 아래 코드를 실행해 보세요. `MutationObserver`가 코드 예시를 감지해 강조 표시하는 모습을 볼 수 있습니다.
+먼저 위 코드(해당 요소를 관찰함)를 실행한 다음 아래쪽 코드를 실행해 보세요. `MutationObserver`가 코드만 찾아내 강조 표시하는 모습을 볼 수 있습니다.
 
 <p id="highlight-demo" style="border: 1px solid #ddd"><code>id="highlight-demo"</code>가 붙은 데모 요소입니다. 위 코드를 실행해 이 요소를 관찰해 보세요.</p>
 
@@ -228,11 +228,11 @@ demoElem.innerHTML = `아래는 코드 예시입니다.
 `;
 ```
 
-이제 관찰 대상 요소나 `document` 전체에서 일어나는 강조 표시를 `MutationObserver`가 전부 추적합니다. 별다른 신경을 쓰지 않아도 HTML에 코드 예시를 추가하거나 삭제할 수 있게 되었죠.
+이제 관찰 대상 요소나 `document` 전체에서 일어나는 강조 표시를 `MutationObserver`가 전부 추적할 수 있게 되었습니다. 별다른 신경을 쓰지 않아도 HTML에 코드 예시가 추가되거나 삭제되어도 알아서 강조 표시가 됩니다.
 
 ## 기타 메서드
 
-노드 관찰을 중단하는 메서드가 있습니다.
+노드 관찰을 중단하는 메서드도 존재합니다.
 
 - `observer.disconnect()` -- 관찰을 중단함
 
@@ -245,7 +245,7 @@ demoElem.innerHTML = `아래는 코드 예시입니다.
 ```js
 // 처리되지 않은 뮤테이션 목록을 가져옵니다.
 // 최근 일어난 변경 중 미처리분까지 챙기려면
-// 관찰을 중단하기 전에 호출해야 합니다.
+// 관찰을 중단하기 전에 takeRecords를 호출해야 합니다.
 let mutationRecords = observer.takeRecords();
 
 // 변경 추적을 중단합니다.