[G1-Sync] Manual knowledge update

10_Wiki/Topics/Frontend_Mastery/리플로우(Reflow).md

@@ -1,6 +1,6 @@
 # [[리플로우(Reflow)]]
 
-## 📌 Brief Summary
+## 📌[[ brief]] Summary
 리플로우(Reflow)는 웹 페이지의 레이아웃이나 구조가 변경될 때, 브라우저가 전체 페이지 또는 일부 영역의 기하학적 구조(크기, 위치 등)와 레이아웃을 다시 계산하는 과정입니다 [1, 2]. 이는 브라우저의 렌더링 파이프라인 중 가장 리소스를 많이 소모하는 작업으로, 과도하게 발생할 경우 애니메이션이 끊기거나 스크립트 실행이 느려지는 등 프론트엔드 성능을 크게 저하시키는 주요 원인이 됩니다 [3, 4]. 따라서 유지보수 가능하고 확장성 있는 CSS 아키텍처 설계 시 리플로우를 최소화하는 것은 필수적인 최적화 과제입니다 [4, 5].
 
 ## 📖 Core Content
@@ -12,7 +12,7 @@
 
 * **성능에 미치는 영향**
   * 리플로우는 전체 페이지의 레이아웃을 다시 잡는 것과 맞먹을 정도로 성능 비용이 높습니다 [3].
-  * 특히 스크립트가 DOM의 값을 읽고 쓰는 작업을 반복하는 **레이아웃 스래싱(Layout Thrashing)**이 발생하면, 브라우저가 내부 레이아웃 큐를 강제로 비우고 동기적으로 리플로우를 수행해야 하므로 프레임 속도(FPS)가 급격히 떨어집니다 [9, 10].
+  * 특히 스크립트가 DOM의 값을 읽고 쓰는 작업을 반복하는 **레이아웃 스래싱([[Layout Thrashing]])**이 발생하면, 브라우저가 내부 레이아웃 큐를 강제로 비우고 동기적으로 리플로우를 수행해야 하므로 프레임 속도(FPS)가 급격히 떨어집니다 [9, 10].
 
 * **최적화 및 감소 기법**
   * **애니메이션 최적화:** 애니메이션에는 레이아웃 속성 대신 `transform`과 `opacity`를 사용해야 합니다. 이 속성들은 리플로우와 리페인트 단계를 건너뛰고 GPU 가속을 통해 Composite 단계만 거치므로 성능에 유리합니다 [7, 11].
@@ -24,7 +24,7 @@
 
 ## 🔗 Knowledge Connections
 - **Related Topics:** [[리페인트(Repaint)]], [[레이아웃 스래싱(Layout Thrashing)]], CSS 애니메이션 성능 최적화, DOM 조작(DOM Manipulation), [[렌더링 파이프라인(Rendering Pipeline)]]
-- **Projects/Contexts:** CSS 실전 설계, [[성능 최적화(Performance Optimization)]], 유지보수 가능한 프론트엔드 아키텍처
+- **Projects/Contexts:** CSS 실전 설계, [[성능 최적화(Performance [[Optimization]])]], 유지보수 가능한 프론트엔드 아키텍처
 - **Contradictions/Notes:** 리플로우는 성능 저하의 주범이므로 피하는 것이 일반적인 원칙이지만, 때로는 브라우저의 디스플레이 오류(예: 탭 전환 시 높이가 맞지 않거나 리스트 정렬이 깨지는 현상)를 바로잡기 위해 의도적으로 더미 클래스를 추가하거나 디스플레이를 토글하여 강제로 리플로우를 유발하는 기법이 사용되기도 합니다 [17, 18].
 
 ---