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 @@
|
||||
# [[Performance Optimization]]
|
||||
# [[Performance Optimization|Performance Optimization]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
성능 최적화(Performance Optimization)는 웹 애플리케이션의 로딩 속도를 단축시키고 사용자 상호작용을 매끄럽게 만들기 위해 브라우저 렌더링 과정과 리소스 처리 방식을 개선하는 일련의 기술적 과정입니다 [1-3]. 주로 초기 렌더링 시간(Fast First Paint)을 앞당기고, 프레임 드롭(Jank)을 방지하며, 최대 콘텐츠풀 페인트(LCP)와 같은 핵심 웹 바이탈(Core Web Vitals) 지표를 향상하는 것을 목표로 합니다 [2-6]. 모던 프론트엔드에서는 중요 렌더링 경로(CRP)의 최소화, React와 같은 프레임워크 수준에서의 불필요한 렌더링 방지, 그리고 적절한 서버/클라이언트 렌더링 전략(SSR, SSG 등)의 선택을 통해 이루어집니다 [1, 7-9].
|
||||
@@ -16,11 +16,11 @@
|
||||
|
||||
* **아키텍처 및 렌더링 전략 최적화**
|
||||
* 애플리케이션 특성에 맞춰 **CSR(클라이언트 사이드 렌더링)**, **SSR(서버 사이드 렌더링)**, **SSG(정적 사이트 생성)**, **ISR(점진적 정적 재생성)** 등을 적절히 선택하거나 혼합(Hybrid)하여 사용합니다 [42-60].
|
||||
* 최근 도입된 **[[React Server Components]] (RSC)**는 브라우저로 전송되는 자바스크립트 번들 크기를 '0 바이트'로 줄이고 서버 측 자원(DB 등)에 직접 접근하여 렌더링 된 HTML만을 스트리밍 형태로 클라이언트에 전달하므로, 클라이언트 측의 렌더링 및 하이드레이션(Hydration) 부하를 혁신적으로 제거합니다 [61-66].
|
||||
* 최근 도입된 **[[React Server Components|React Server Components]] (RSC)**는 브라우저로 전송되는 자바스크립트 번들 크기를 '0 바이트'로 줄이고 서버 측 자원(DB 등)에 직접 접근하여 렌더링 된 HTML만을 스트리밍 형태로 클라이언트에 전달하므로, 클라이언트 측의 렌더링 및 하이드레이션(Hydration) 부하를 혁신적으로 제거합니다 [61-66].
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
- **Related Topics:** [[Critical Rendering Path]], [[Reflow and Repaint]], [[Automatic Batching]], [[React Compiler]], [[Virtual DOM]], [[Server-Side Rendering (SSR)]], [[React Server Components]]
|
||||
- **Projects/Contexts:** [[React 18 Concurrent Features]], [[Next.js App Router]]
|
||||
- **Related Topics:** [[Critical Rendering Path|Critical Rendering Path]], [[Reflow and Repaint|Reflow and Repaint]], [[Automatic Batching|Automatic Batching]], [[React Compiler|React Compiler]], [[Virtual DOM|Virtual DOM]], [[Server-Side Rendering (SSR)|Server-Side Rendering (SSR)]], [[React Server Components|React Server Components]]
|
||||
- **Projects/Contexts:** [[React 18 Concurrent Features|React 18 Concurrent Features]], [[Next.js App Router|Next.js App Router]]
|
||||
- **Contradictions/Notes:** 과거에는 개발자가 수동으로 `useMemo`나 `useCallback`, `React.memo`를 삽입하여 불필요한 리렌더링을 최적화해야 했으나, 최근 안정화된 **React Compiler**는 빌드 타임에 코드와 데이터 흐름을 분석하여 이러한 메모이제이션 경계를 자동으로 삽입해 줍니다. 따라서 이제 수동 메모이제이션은 컴파일러의 자동 처리에 의존하게 되어 대부분 제거될 수 있으나, 효과적인 의존성 제어나 서드파티 라이브러리 통합 등 특수한 예외 상황의 '비상 탈출구(Escape Hatch)' 용도로만 제한적으로 남게 됩니다 [25, 67-72].
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user