docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
# [[프론트엔드 성능 최적화(Frontend Performance Optimization)]]
|
||||
# [[프론트엔드 성능 최적화(Frontend Performance Optimization)|프론트엔드 성능 최적화(Frontend Performance Optimization)]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
프론트엔드 성능 최적화는 브라우저가 코드를 해석하여 화면에 렌더링하는 과정과 웹 애플리케이션의 작동 방식을 개선하여 사용자 경험을 극대화하는 과정입니다. 이는 브라우저의 중요 렌더링 경로(CRP) 최적화부터 불필요한 리플로우(Reflow)와 리페인트(Repaint) 최소화, 그리고 웹 렌더링 전략(CSR, SSR, SSG 등)의 올바른 선택을 아우릅니다. 최근에는 React의 Fiber 아키텍처, 상태 업데이트 자동 배칭, 컴파일러를 통한 자동 메모이제이션, 그리고 React 서버 컴포넌트(RSC) 도입을 통해 클라이언트 측 자바스크립트의 실행 및 번들 크기를 획기적으로 줄이는 방향으로 발전하고 있습니다.
|
||||
@@ -20,8 +20,8 @@
|
||||
- **React 서버 컴포넌트 (React Server Components, RSC):** 상호작용이 필요 없는 정적 컴포넌트를 서버에서만 실행하고 결과 HTML과 직렬화된 지침(React Flight 프로토콜)만을 클라이언트에 스트리밍하는 아키텍처입니다. 클라이언트로 전송되는 자바스크립트 번들 크기를 0으로 만들어 하이드레이션 자체를 생략하므로, 성능(INP 등)이 대폭 향상되며 클라이언트와 서버 간의 데이터 폭포(Waterfall) 현상을 서버 수준에서 병렬로 해결할 수 있습니다 [94-109].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[브라우저 렌더링 과정(Critical Rendering Path)]], [[가상 DOM 및 재조정(Virtual DOM and Reconciliation)]], [[React Fiber 아키텍처]], [[하이드레이션(Hydration)]], [[웹 렌더링 전략(CSR, SSR, SSG, ISR)]], [[React 서버 컴포넌트(React Server Components)]], [[React Compiler]]
|
||||
- **Projects/Contexts:** [[Next.js를 활용한 웹 애플리케이션의 하이브리드 렌더링 구축]], [[Core Web Vitals (LCP, INP, CLS) 지표 측정 및 개선]]
|
||||
- **Related Topics:** [[브라우저 렌더링 과정 (Critical Rendering Path)|브라우저 렌더링 과정(Critical Rendering Path)]], 가상 DOM 및 재조정(Virtual DOM and Reconciliation), [[React Fiber 아키텍처|React Fiber 아키텍처]], [[하이드레이션 (Hydration)|하이드레이션(Hydration)]], [[웹 렌더링 전략 (CSR, SSR, SSG, ISR)|웹 렌더링 전략(CSR, SSR, SSG, ISR)]], React 서버 컴포넌트(React Server Components), [[React Compiler|React Compiler]]
|
||||
- **Projects/Contexts:** Next.js를 활용한 웹 애플리케이션의 하이브리드 렌더링 구축, Core Web Vitals (LCP, INP, CLS) 지표 측정 및 개선
|
||||
- **Contradictions/Notes:** 서버 사이드 렌더링(SSR)은 클라이언트 사이드 렌더링(CSR)에 비해 초기 화면 렌더링 속도(FCP)가 빠르고 검색 엔진 최적화(SEO)에 매우 유리하다는 강력한 이점을 지니지만 [71, 110], 자바스크립트를 로드하고 HTML 요소에 이벤트 리스너 등을 부착하는 하이드레이션(Hydration) 과정을 거쳐야 하므로 실제 사용자가 상호작용할 수 있는 시간(TTI)은 CSR의 로드 직후 반응성보다 다소 지연될 수 있다는 트레이드오프가 존재합니다 [71, 84, 111, 112].
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user