| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Ezn3Dq7aWbVPvWonrUn8YK
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Ezn3Dq7aWbVPvWonrUn8YK
There was a problem hiding this comment.
Part 2 UI Misc의 MutationObserver 문서를 한국어로 번역해, 용어(“뮤테이션 옵저버”), 문장/설명, 그리고 데모 문자열 및 주석까지 한국어로 현지화한 PR입니다.
Changes:
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Sorry, something went wrong.
| 가독성을 높이는 동시에 보기 좋게 꾸미기 위해 [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`을 호출하면 됩니다. |
| 새로 받아온 `article` HTML엔 코드 예시가 들어 있을 수 있습니다. `Prism.highlightElem`을 호출하지 않으면 이 코드는 강조 표시되지 않습니다. | ||
|
|
||
| **Where and when to call `Prism.highlightElem` for a dynamically loaded article?** | ||
| **그럼 동적으로 불러온 글엔 `Prism.highlightElem`을 어디서, 언제 호출해야 할까요?** |
| @@ -162,38 +162,38 @@ snippets.forEach(Prism.highlightElem); | |||
| */!* | |||
| }, { | ||
| 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 | ||
| // ...뮤테이션의 세부 내용은 브라우저가 이런 삭제를 어떻게 처리하는지에 따라 다릅니다. |
| // 페이지에 있는 코드 예시를 전부 강조 표시합니다. | ||
| document.querySelectorAll('pre[class*="language"]').forEach(Prism.highlightElem); |
| Back | FazBrowse Home | New Git URL |
요약
Part 2. Mutation observer(2-ui/99-ui-misc/01-mutation-observer/article.md) 본문을 번역했습니다.
연관 이슈
없음
Pull Request 체크리스트
TODO
🤖 Generated with Claude Code
https://claude.ai/code/session_01Ezn3Dq7aWbVPvWonrUn8YK