[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]. 이 두 과정은 처리 비용이 매우 높아 과도하게 발생할 경우 CSS 애니메이션과 자바스크립트의 성능을 저하시키고 화면의 버벅거림(Janky)을 유발한다 [3-5]. 따라서 효율적인 CSS 속성 선택과 DOM 조작의 최소화를 통해 Reflow와 Repaint의 발생을 줄이는 것은 유지보수 가능하고 확장성 있는 프론트엔드 아키텍처를 구축하기 위한 필수적인 렌더링 파이프라인 최적화 기법이다 [5-7].
 
 ## 📖 Core Content
@@ -16,7 +16,7 @@ Reflow는 브라우저가 문서의 레이아웃이나 요소의 기하학적
 
 * **DOM 조작 및 스크립트 실행 최적화**
   * **DOM 조작 최소화 및 일괄 처리:** `documentFragment`를 사용해 DOM 업데이트를 일괄로 처리하거나 노드를 복사하여 변경한 후 원본과 한 번에 교체하는 방식으로 Reflow/Repaint 횟수를 줄일 수 있다 [6, 19]. 또한 여러 개의 인라인 스타일을 반복해서 설정하기보다는 CSS 클래스 한 번의 변경으로 스타일을 적용해야 한다 [17, 19].
-  * **레이아웃 스래싱(Layout Thrashing) 방지:** DOM 읽기와 쓰기를 좁은 루프 안에서 번갈아 수행하면, 브라우저는 정확한 수치를 반환하기 위해 강제로 동기적인 Reflow를 실행하게 되어 심각한 병목 현상이 발생한다 [7, 10]. 이를 막기 위해 읽기/쓰기 작업을 분리하고, `requestAnimationFrame`을 사용하여 브라우저의 렌더링 주기에 맞추어 업데이트해야 한다 [7, 10].
+  * **레이아웃 스래싱([[Layout Thrashing]]) 방지:** DOM 읽기와 쓰기를 좁은 루프 안에서 번갈아 수행하면, 브라우저는 정확한 수치를 반환하기 위해 강제로 동기적인 Reflow를 실행하게 되어 심각한 병목 현상이 발생한다 [7, 10]. 이를 막기 위해 읽기/쓰기 작업을 분리하고, `requestAnimationFrame`을 사용하여 브라우저의 렌더링 주기에 맞추어 업데이트해야 한다 [7, 10].
 
 * **구조적 최적화 고려사항**
   * **DOM 트리 하단에서의 클래스 변경:** Reflow의 파급 범위를 최소화하기 위해, 상위 래퍼(wrapper) 요소보다는 DOM 트리에서 최대한 하단에 위치한 요소의 클래스를 변경하는 것이 유리하다 [20].