feat: complete wikification of War Commander batch 1&2 and final grey dot cleanup

10_Wiki/Topics/Frontend_Mastery/실무에서의 프론트엔드 성능 최적화.md

@@ -13,8 +13,8 @@
 * **현대적인 렌더링 및 미디어 최적화 기법:** CSS Containment(`contain`, `content-visibility`, `contain-intrinsic-size` 속성)를 사용하면 브라우저가 DOM의 특정 부분에 대한 레이아웃과 렌더링을 뷰포트에 보일 때까지 연기하도록 지시하여 성능을 크게 높일 수 있다 [26, 27]. 또한 WebP나 AVIF 같은 차세대 이미지 포맷 사용, 지연 로딩(Lazy Loading) 적용, 적절한 크기의 터치 타겟(최소 44x44px 이상) 제공 등의 최적화는 LCP, CLS, INP와 같은 코어 웹 바이탈(Core Web Vitals) 성능 지표 개선과 직결된다 [28-30].
 
 ## 🔗 Knowledge Connections
-- **Related Topics:** [[Reflow 및 Repaint]], [[CSS Modules]], [[Tailwind CSS]], [[BEM 방법론]], [[Zero-runtime CSS-in-JS]], [[Core Web Vitals]]
-- **Projects/Contexts:** [[대규모 프론트엔드 아키텍처 설계]], [[반응형 웹 디자인(Responsive Web Design)]], [[디자인 시스템 개념]]
+- **Related Topics:** [[Reflow 및 Repaint]], [[CSS Modules]], [[Tailwind CSS]], BEM 방법론, [[Zero-runtime CSS-in-JS]], [[Core Web Vitals]]
+- **Projects/Contexts:** 대규모 프론트엔드 아키텍처 설계, 반응형 웹 디자인(Responsive Web Design), [[디자인 시스템 개념]]
 - **Contradictions/Notes:** 런타임 CSS-in-JS(styled-components, Emotion 등) 방식은 동적 스타일링 등 개발자 경험 측면에서 이점이 있으나, 성능 오버헤드와 특히 React Server Components(RSC)와의 비호환성 문제로 인해 2025/2026년 기준으로는 신규 프로젝트에서 권장되지 않으며, 대안으로 Tailwind CSS나 CSS Modules, 또는 정적 추출 방식의 Zero-runtime CSS-in-JS가 강력히 권장된다 [22, 24, 25, 31, 32].
 
 ---