docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links

10_Wiki/Topics/Frontend_Mastery/성능 최적화(Performance Optimization).md

@@ -1,7 +1,7 @@
-# [[성능 최적화(Performance [[Optimization]])]]
+# [[성능 최적화(Performance Optimization)|성능 최적화(Performance Optimization]]
 
-## 📌[[ brief]] 코Summary
-성능 최적화([[Performance Optimization]])는 브라우저가 CSS를 처리하는 방식을 이해하고, 렌더링을 지연시키거나 불필요한 연산을 유발하는 요소를 최소화하여 웹 페이지의 로딩 속도와 반응성을 향상시키는 과정입니다 [1]. 주로 렌더링 블로킹(Render-[[Blocking]]) CSS 파일의 분할, 리플로우(Reflow)와 리페인트(Repaint)의 최소화, 그리고 효율적인 애니메이션 속성 사용 등을 포함합니다 [1-3]. 이를 통해 사용자 경험을 개선하고, 궁극적으로 코어 웹 바이탈([[Core Web Vitals]]) 및 SEO 순위를 높이는 데 기여할 수 있습니다 [4].
+## 📌Brief 코Summary
+성능 최적화([[Performance Optimization|Performance Optimization]])는 브라우저가 CSS를 처리하는 방식을 이해하고, 렌더링을 지연시키거나 불필요한 연산을 유발하는 요소를 최소화하여 웹 페이지의 로딩 속도와 반응성을 향상시키는 과정입니다 [1]. 주로 렌더링 블로킹(Render-Blocking) CSS 파일의 분할, 리플로우(Reflow)와 리페인트(Repaint)의 최소화, 그리고 효율적인 애니메이션 속성 사용 등을 포함합니다 [1-3]. 이를 통해 사용자 경험을 개선하고, 궁극적으로 코어 웹 바이탈([[Core Web Vitals|Core Web Vitals]]) 및 SEO 순위를 높이는 데 기여할 수 있습니다 [4].
 
 ## 📖 Core Content
 *   **렌더링 및 로딩 최적화**
@@ -13,7 +13,7 @@
 *   **리플로우(Reflow) 및 리페인트(Repaint) 관리**
     *   리플로우는 요소의 기하학적 구조(크기, 위치)가 변경될 때 발생하며, 해당 요소뿐만 아니라 자식, 상위 및 뒤따르는 요소들의 레이아웃까지 다시 계산하게 만들어 성능에 치명적입니다 [12, 13]. 리페인트는 레이아웃 변화 없이 배경색 등 시각적 요소만 바뀔 때 발생합니다 [3, 12].
     *   리플로우를 줄이기 위해서는 DOM 트리에서 가능한 가장 낮은 위치에 있는 노드의 클래스를 변경해 영향을 받는 범위를 최소화해야 합니다 [14].
-    *   [[JavaScript]]로 인라인 스타일을 여러 번 설정하는 대신 외부 클래스로 스타일을 조합하여 한 번만 변경되도록 처리해야 합니다 [15].
+    *   [[JavaScript|JavaScript]]로 인라인 스타일을 여러 번 설정하는 대신 외부 클래스로 스타일을 조합하여 한 번만 변경되도록 처리해야 합니다 [15].
     *   테이블 레이아웃은 콘텐츠에 따라 전체 레이아웃을 다시 계산하는 여러 번의 패스(pass)가 필요할 수 있으므로 레이아웃 목적으로는 피해야 합니다 [16, 17].
 
 *   **애니메이션 성능 최적화**
@@ -23,15 +23,15 @@
     *   애니메이션을 적용할 요소는 `position: fixed` 또는 `absolute`로 설정하여 문서 흐름에서 분리하면, 애니메이션 실행 시 전체 레이아웃의 리플로우 대신 리페인트만 발생시킬 수 있습니다 [15, 25].
     *   `will-change` 속성을 통해 변경될 요소를 브라우저에 미리 알려 최적화를 돕되, 남용하면 오히려 성능을 저하시킬 수 있으므로 최후의 수단으로 제한적으로 사용해야 합니다 [26, 27].
 
-*   **설계 구조([[CSS Architecture]])에 따른 성능 차이**
-    *   [[styled-components]] 및 Emotion과 같은 런타임 [[CSS-in-JS]] 도구는 런타임에 CSS 문자열을 파싱하고 생성하므로 CPU 사이클 소모와 JS 번들 크기 증가를 유발하여 렌더링 성능 오버헤드를 발생시킵니다 [28-31]. 
-    *   반면 [[CSS Modules]], [[Tailwind CSS]], 그리고 Vanilla Extract와 같은 [[Zero-Runtime CSS-in-JS]]는 빌드 타임에 정적 CSS를 생성하므로 런타임 오버헤드가 없어 성능에 유리합니다 [32-34].
+*   **설계 구조([[CSS Architecture|CSS Architecture]])에 따른 성능 차이**
+    *   [[styled-components|styled-components]] 및 Emotion과 같은 런타임 [[CSS-in-JS|CSS-in-JS]] 도구는 런타임에 CSS 문자열을 파싱하고 생성하므로 CPU 사이클 소모와 JS 번들 크기 증가를 유발하여 렌더링 성능 오버헤드를 발생시킵니다 [28-31]. 
+    *   반면 [[CSS Modules|CSS Modules]], Tailwind CSS, 그리고 Vanilla Extract와 같은 [[Zero-Runtime CSS-in-JS|Zero-Runtime CSS-in-JS]]는 빌드 타임에 정적 CSS를 생성하므로 런타임 오버헤드가 없어 성능에 유리합니다 [32-34].
 
 *   **CSS 컨테인먼트 (CSS Containment)**
     *   `contain` 및 `content-visibility` 속성을 활용하면 브라우저가 페이지의 특정 부분을 격리하여 해당 컨테이너 내부를 독립적으로 렌더링하도록 최적화할 수 있습니다 [35, 36]. 이를 통해 화면에 보이지 않는 요소의 렌더링을 지연시켜 초기 로드 성능을 높일 수 있습니다 [36].
 
 ## 🔗 Knowledge Connections
-- **Related Topics:** [[Reflow and Repaint]], [[CSS Animations]], [[Core Web Vitals]], [[Zero-runtime CSS-in-JS]], CSS Containment
+- **Related Topics:** [[Reflow and Repaint|Reflow and Repaint]], CSS Animations, Core Web Vitals, [[Zero-Runtime CSS-in-JS|Zero-runtime CSS-in-JS]], CSS Containment
 - **Projects/Contexts:** 대규모 프론트엔드 애플리케이션의 렌더링 속도 개선, 사용자 상호작용이 많은 애니메이션 UI 구축 및 반응형 디자인 적용
 - **Contradictions/Notes:** 애니메이션은 로딩 시간을 시각적으로 채워주고 사용자 인터페이스를 더 빠르게 느끼게(Perceived Performance) 만드는 긍정적 효과가 있지만 [37], 속성 선택을 잘못하거나 동시 애니메이션을 남발하면 오히려 프레임 드랍을 유발해 사용자 경험과 성능을 악화시킬 수 있습니다 [23, 38]. 또한 `will-change` 속성 역시 성능 향상 힌트를 주지만 과도하게 적용할 경우 브라우저 자원 낭비의 원인이 됩니다 [26, 27].