Skip to content

[뮤테이션 옵저버] 번역#1900

Merged
Violet-Bora-Lee merged 2 commits into
masterfrom
translate-mutation-observer
Jul 18, 2026
Merged

[뮤테이션 옵저버] 번역#1900
Violet-Bora-Lee merged 2 commits into
masterfrom
translate-mutation-observer

Conversation

@Violet-Bora-Lee

Copy link
Copy Markdown
Member

요약

Part 2. Mutation observer(2-ui/99-ui-misc/01-mutation-observer/article.md) 본문을 번역했습니다.

  • 제목·본문 표기는 기존 용어집에 따라 '뮤테이션 옵저버'로 옮겼습니다.
  • syntax highlighting은 MDN 한국어 문서를 따라 '구문 강조'로 옮기고 첫 등장에서 한-영 병기했습니다.
  • 데모 문자열("Click and edit, please")은 기존 관례에 맞춰 현지화하고 이를 참조하는 mutationRecords 예시 출력·주석까지 일관되게 맞췄습니다.

연관 이슈

없음

Pull Request 체크리스트

TODO

  • 번역 규칙을 확인하셨나요?
    • 줄 바꿈과 단락을 '원문과 동일하게' 유지하셨나요? (원문과 동일한 273줄)
    • 맞춤법 검사기로 맞춤법을 확인하셨나요? (바른한글로 리브랜딩된 검사기로 본문 전체를 확인했습니다.)
    • 마크다운 문법에 사용되는 공백(스페이스), 큰따옴표("), 작은따옴표('), 대시(-), 백틱(`) 등의 특수문자는 그대로 두셨나요?
  • 로컬 서버 세팅 후 최종 결과물을 확인해 보셨나요?
  • PR 하나엔 번역문 하나만 넣으셨나요?
  • 의미 있는 커밋 메시지를 작성하셨나요?

🤖 Generated with Claude Code

https://claude.ai/code/session_01Ezn3Dq7aWbVPvWonrUn8YK

Violet-Bora-Lee and others added 2 commits July 19, 2026 01:44
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ezn3Dq7aWbVPvWonrUn8YK
Copilot AI review requested due to automatic review settings July 18, 2026 17:15
@javascript-translate-bot
javascript-translate-bot requested review from a team July 18, 2026 17:16
@Violet-Bora-Lee
Violet-Bora-Lee merged commit 6f33618 into master Jul 18, 2026
2 checks passed

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Part 2 UI Misc의 MutationObserver 문서를 한국어로 번역해, 용어(“뮤테이션 옵저버”), 문장/설명, 그리고 데모 문자열 및 주석까지 한국어로 현지화한 PR입니다.

Changes:

  • 문서 제목/본문을 한국어로 번역하고 용어를 용어집 기준으로 통일
  • “구문 강조(syntax highlighting)” 등 일부 용어를 첫 등장 시 한-영 병기
  • 데모 문자열 현지화에 맞춰 관련 예시 출력/주석도 함께 조정

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +131 to +133
가독성을 높이는 동시에 보기 좋게 꾸미기 위해 [Prism.js](https://prismjs.com/) 같은 자바스크립트 구문 강조(syntax highlighting) 라이브러리를 사이트에 사용해 본다고 가정하겠습니다. Prism에서 위 예시에 구문 강조를 적용하려면 `Prism.highlightElem(pre)`를 호출합니다. 이 메서드는 `pre` 요소의 내용을 검사해서 색을 입히는 특별한 태그와 스타일을 해당 요소 안에 추가합니다. 지금 보고 있는 이 페이지의 예시 코드와 비슷한 결과물이 만들어지죠.

When exactly should we run that highlighting method? Well, we can do it on `DOMContentLoaded` event, or put the script at the bottom of the page. The moment our DOM is ready, we can search for elements `pre[class*="language"]` and call `Prism.highlightElem` on them:
그렇다면 구문 강조 메서드는 정확히 언제 실행해야 할까요? `DOMContentLoaded` 이벤트에서 실행할 수도 있고 스크립트를 페이지 맨 아래에 넣을 수도 있습니다. DOM이 준비되면 `pre[class*="language"]`에 해당하는 요소를 찾아 `Prism.highlightElem`을 호출하면 됩니다.
Comment on lines +149 to +151
새로 받아온 `article` HTML엔 코드 예시가 들어 있을 수 있습니다. `Prism.highlightElem`을 호출하지 않으면 이 코드는 강조 표시되지 않습니다.

**Where and when to call `Prism.highlightElem` for a dynamically loaded article?**
**그럼 동적으로 불러온 글엔 `Prism.highlightElem`을 어디서, 언제 호출해야 할까요?**
Comment on lines 159 to 162
@@ -162,38 +162,38 @@ snippets.forEach(Prism.highlightElem);
*/!*
Comment on lines 89 to +92
}, {
type: "characterData"
target: <text node>
// ...mutation details depend on how the browser handles such removal
// it may coalesce two adjacent text nodes "edit " and ", please" into one node
// or it may leave them separate text nodes
// ...뮤테이션의 세부 내용은 브라우저가 이런 삭제를 어떻게 처리하는지에 따라 다릅니다.
Comment on lines +136 to 137
// 페이지에 있는 코드 예시를 전부 강조 표시합니다.
document.querySelectorAll('pre[class*="language"]').forEach(Prism.highlightElem);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants