chore(brain): ASTRA 성장 자산 동기화 — 기능 인벤토리·growth(약점프로필/학습큐)·일화기억·장기기억·회의록 원문

2026-06-12 16:37:41 +09:00
parent a97fc7be07
commit 89fb05a28a
781 changed files with 138546 additions and 47 deletions
@@ -0,0 +1,171 @@
+---
+id: wiki-2026-0508-dom
+title: DOM (Document Object Model)
+category: 10_Wiki/Topics
+status: verified
+canonical_id: self
+aliases: [DOM, Document Object Model, DOM Tree]
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.95
+verification_status: applied
+tags: [dom, web, browser, html, javascript]
+raw_sources: []
+last_reinforced: 2026-05-10
+github_commit: pending
+tech_stack:
+  language: javascript
+  framework: browser
+---
+
+# DOM (Document Object Model)
+
+## 매 한 줄
+> **"매 HTML/XML document 의 tree 표현, language-agnostic API"**. W3C 표준 (1998), 현재 WHATWG DOM Living Standard. 매 browser 매 internal representation; 2026 현재 React/Vue/Solid 매 abstraction layer 위에 있지만, performance/edge cases 매 직접 DOM 이해 매 essential.
+
+## 매 핵심
+
+### 매 구조
+- **Document** root.
+- **Element node** (`<div>`, `<p>`).
+- **Text node** (literal text).
+- **Attribute** (element 의 property; not separate child node since DOM4).
+- **Comment node**.
+- **DocumentFragment** — lightweight sub-tree, not connected.
+- **ShadowRoot** — encapsulated sub-tree (Web Components).
+
+### 매 traversal
+- `parentNode`, `childNodes`, `firstChild`, `lastChild`, `nextSibling`, `previousSibling`.
+- `children` (Element only), `firstElementChild`.
+- `querySelector` / `querySelectorAll` — CSS selector.
+- `closest(selector)` — ancestor matching.
+
+### 매 mutation
+- `appendChild`, `insertBefore`, `removeChild`, `replaceChild` (legacy).
+- `append`, `prepend`, `before`, `after`, `replaceWith`, `remove` (modern).
+- `cloneNode(deep)`.
+
+### 매 응용
+1. Vanilla JS DOM 조작.
+2. React reconciler 매 virtual DOM diff → real DOM mutation.
+3. Web Components Shadow DOM encapsulation.
+4. Server-side render (jsdom, happy-dom) 매 SSR.
+5. Browser automation (Playwright, Puppeteer).
+
+## 💻 패턴
+
+### Modern element creation (no innerHTML)
+```javascript
+const card = Object.assign(document.createElement('article'), {
+  className: 'card',
+});
+card.append(
+  Object.assign(document.createElement('h2'), { textContent: title }),
+  Object.assign(document.createElement('p'), { textContent: body }),
+);
+container.append(card);
+```
+
+### Event delegation
+```javascript
+list.addEventListener('click', (e) => {
+  const item = e.target.closest('.item');
+  if (!item || !list.contains(item)) return;
+  handleClick(item.dataset.id);
+});
+```
+
+### DocumentFragment — batch insert
+```javascript
+const frag = document.createDocumentFragment();
+for (const item of items) {
+  const li = document.createElement('li');
+  li.textContent = item.name;
+  frag.append(li);
+}
+list.append(frag); // single reflow
+```
+
+### MutationObserver
+```javascript
+const observer = new MutationObserver((mutations) => {
+  for (const m of mutations) {
+    if (m.type === 'childList') console.log('children changed');
+  }
+});
+observer.observe(target, { childList: true, subtree: true, attributes: true });
+```
+
+### Shadow DOM (Web Component)
+```javascript
+class CounterButton extends HTMLElement {
+  #count = 0;
+  connectedCallback() {
+    const root = this.attachShadow({ mode: 'open' });
+    root.innerHTML = `<style>button{padding:8px}</style><button>0</button>`;
+    root.querySelector('button').onclick = () => {
+      this.#count++;
+      root.querySelector('button').textContent = this.#count;
+    };
+  }
+}
+customElements.define('counter-button', CounterButton);
+```
+
+### Range & Selection
+```javascript
+const range = document.createRange();
+range.selectNodeContents(el);
+const text = range.toString();
+```
+
+### IntersectionObserver — lazy load
+```javascript
+const io = new IntersectionObserver((entries) => {
+  for (const e of entries) {
+    if (e.isIntersecting) {
+      e.target.src = e.target.dataset.src;
+      io.unobserve(e.target);
+    }
+  }
+});
+document.querySelectorAll('img[data-src]').forEach((img) => io.observe(img));
+```
+
+## 매 결정 기준
+| 상황 | Approach |
+|---|---|
+| App-level UI | React / Vue / Solid (don't touch DOM) |
+| Library / web component | Shadow DOM + custom element |
+| One-off page | Vanilla JS (`querySelector`, `append`) |
+| Test / SSR | jsdom / happy-dom |
+| Watch external mutations | MutationObserver |
+
+**기본값**: framework abstraction; vanilla DOM API for libraries / leaf optimization.
+
+## 🔗 Graph
+- 부모: [[Web Standards]]
+- 변형: [[Virtual_DOM과_Reconciliation|Virtual DOM]] · [[Shadow DOM]]
+- 응용: [[React]] · [[Web Components]] · [[Playwright]]
+- Adjacent: [[CSSOM]] · [[Reflow_and_Repaint|Reflow & Repaint]]
+
+## 🤖 LLM 활용
+**언제**: DOM snippet 생성, accessibility audit, querySelector 추천.
+**언제 X**: real-time interaction (LLM 매 round-trip 너무 느림).
+
+## ❌ 안티패턴
+- **innerHTML with user input**: XSS.
+- **Layout thrashing**: read-write-read-write 매 force reflow 매 loop.
+- **No event delegation**: 매 list item 매 listener → memory leak.
+- **Detached node leak**: removed but reference 보유 → GC 실패.
+- **Manipulate DOM in framework-controlled subtree**: React reconciler 와 충돌.
+
+## 🧪 검증 / 중복
+- Verified (WHATWG DOM Living Standard 2026, MDN).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — full canonical content with modern DOM APIs |