[G1-Sync] Manual knowledge update

10_Wiki/Topics/Frontend_Mastery/Reflow와 Repaint.md

@@ -1,6 +1,6 @@
 # [[Reflow와 Repaint]]
 
-## 📌 Brief Summary
+## 📌[[ brief]] Summary
 Reflow(리플로우)는 요소의 크기나 위치 등 레이아웃 구조가 변경될 때 브라우저가 문서의 구조를 다시 계산하는 과정이며, Repaint(리페인트)는 레이아웃에 영향을 주지 않는 시각적 속성(색상 등)이 변경될 때 화면을 다시 그리는 작업입니다 [1, 2]. 두 과정 모두 브라우저의 연산 리소스를 많이 소모하므로, 쾌적한 사용자 경험과 웹 성능을 유지하려면 이를 최소화해야 합니다 [1, 3, 4]. 유지보수와 성능을 모두 고려한 CSS 실전 설계에서는 이러한 브라우저 렌더링 파이프라인의 특성을 이해하고 효율적인 스타일링과 애니메이션 전략을 채택해야 합니다 [3, 5].
 
 ## 📖 Core Content
@@ -9,7 +9,7 @@ Reflow(리플로우)는 요소의 크기나 위치 등 레이아웃 구조가
     *   **Repaint**: `color`, `background-color`, `outline`, `visibility` 등 요소의 레이아웃에는 영향을 주지 않으면서 겉모습만 변경될 때 발생합니다 [2, 3, 6]. 
 
 *   **성능 최적화 및 유지보수를 위한 CSS 설계 기법**
-    *   **레이아웃 스래싱(Layout Thrashing) 방지 및 DOM 조작 최소화**: JavaScript를 통해 다수의 인라인 스타일을 설정하면 개별적으로 Reflow가 발생합니다 [5, 8]. 변경 사항을 외부 CSS 클래스에 그룹화하여 한 번의 조작으로 DOM 트리의 클래스 속성을 변경하는 방식이 성능과 유지보수에 훨씬 유리합니다 [8, 9]. DOM을 읽고 쓰는 과정을 철저히 분리하여 레이아웃 스래싱을 방지해야 합니다 [10].
+    *   **레이아웃 스래싱([[Layout Thrashing]]) 방지 및 DOM 조작 최소화**: [[JavaScript]]를 통해 다수의 인라인 스타일을 설정하면 개별적으로 Reflow가 발생합니다 [5, 8]. 변경 사항을 외부 CSS 클래스에 그룹화하여 한 번의 조작으로 DOM 트리의 클래스 속성을 변경하는 방식이 성능과 유지보수에 훨씬 유리합니다 [8, 9]. DOM을 읽고 쓰는 과정을 철저히 분리하여 레이아웃 스래싱을 방지해야 합니다 [10].
     *   **클래스 변경의 범위 제한**: Reflow의 파급 범위를 줄이려면 DOM 트리에서 가능한 가장 낮은 위치(하위 노드)에 있는 요소의 클래스를 변경해야 합니다 [5, 11]. 
     *   **올바른 애니메이션(transition/keyframes) 전략**: `width`, `height`, `box-shadow` 등의 속성을 애니메이션으로 처리하면 지속적으로 Reflow와 Repaint를 유발해 화면이 끊길 수 있습니다 [6, 12, 13]. 대신 레이아웃을 다시 계산하지 않는 `transform`과 `opacity`, `filter` 속성만 사용하여 애니메이션을 작성해야 GPU 가속(Compositing)을 통한 부드러운 렌더링이 가능해집니다 [3, 13, 14].
     *   **요소의 위치 및 속성 분리**: 애니메이션이 들어간 요소에 `position: fixed` 또는 `absolute`를 적용하면 해당 요소가 문서의 흐름에서 분리되어 주변 요소의 레이아웃에 영향을 주지 않으므로, 비용이 큰 전체 Reflow 대신 Repaint만 발생시킬 수 있습니다 [5, 8, 15].