docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
Antigravity Agent
@@ -1,4 +1,4 @@
|
||||
# [[Frontend Performance Debugging]]
|
||||
# [[Frontend Performance Debugging|Frontend Performance Debugging]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
프론트엔드 성능 디버깅(Frontend Performance Debugging)은 웹 애플리케이션의 메모리 누수, 불필요한 리렌더링, 잦은 가비지 컬렉션 등으로 인해 발생하는 성능 저하와 응답 지연을 식별하고 해결하는 과정입니다 [1-3]. 개발자는 브라우저의 내장 개발자 도구(Chrome DevTools)를 활용해 메모리 상태와 컴포넌트 렌더링 비용을 로컬에서 분석합니다 [4, 5]. 더 나아가 프로덕션 환경에서는 클라우드 기반 로깅 및 모니터링 도구를 사용하여 실제 사용자의 세션과 에러를 추적함으로써 복잡한 성능 병목의 근본 원인을 파악합니다 [6-8].
|
||||
@@ -25,23 +25,23 @@ React 애플리케이션에서는 상태(State), 프로퍼티(Props), 컨텍스
|
||||
### Related Concepts
|
||||
|
||||
#### [관계 유형 A (로컬 디버깅 및 분석 도구)]
|
||||
- [[Chrome DevTools Memory Profiler]]
|
||||
- Chrome DevTools Memory Profiler
|
||||
- 연결 이유: 자바스크립트 애플리케이션의 메모리 누수와 객체 보존 상태를 프로파일링하는 브라우저 내장 도구.
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: Heap Snapshots 비교, Allocation Timeline을 통한 메모리 할당 추적, Detached DOM tree 파악 기법 [9, 12, 33].
|
||||
- [[React DevTools Profiler]]
|
||||
- [[React DevTools Profiler|React DevTools Profiler]]
|
||||
- 연결 이유: React 특유의 렌더링 사이클과 성능 병목을 시각화하는 핵심 도구.
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 컴포넌트 렌더링 소요 시간, 렌더링 발생 원인(Props/State 변경 여부 판별) [5, 14].
|
||||
|
||||
#### [관계 유형 B (프로덕션 관측성 및 모니터링)]
|
||||
- [[Frontend Cloud Logging Tools]]
|
||||
- Frontend Cloud Logging Tools
|
||||
- 연결 이유: Sentry, LogRocket, Datadog RUM, SigNoz 등 배포 이후 발생하는 성능 저하와 버그를 추적하는 플랫폼.
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 프로덕션 레벨에서의 세션 리플레이, 자동 에러 그룹화, 엔드투엔드 분산 트레이싱, Core Web Vitals 추적 [7, 8, 20, 21, 34].
|
||||
|
||||
#### [관계 유형 C (아키텍처 및 안티패턴)]
|
||||
- [[JavaScript Memory Leaks]]
|
||||
- JavaScript Memory Leaks
|
||||
- 연결 이유: 애플리케이션 성능을 점진적으로 파괴하는 현상으로 메모리 팽창, 가비지 컬렉션 등과 연관.
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 클로저 잔류 참조(Closure-Retained References), 해제되지 않은 이벤트 리스너의 동작 메커니즘 [2, 10, 35].
|
||||
- [[React Re-render Optimization]]
|
||||
- React Re-render Optimization
|
||||
- 연결 이유: React의 렌더링 특성상 발생하는 메인 스레드 블로킹 문제를 해결하기 위한 코드 레벨 기법.
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 참조 안정성(Reference stability), 익명 함수의 부작용, `useMemo` 및 `useCallback`의 올바른 활용법 [36-38].
|
||||
|
||||
@@ -63,9 +63,9 @@ React 애플리케이션에서는 상태(State), 프로퍼티(Props), 컨텍스
|
||||
|
||||
### Adjacent Topics
|
||||
|
||||
- [[Core Web Vitals]]
|
||||
- [[Core Web Vitals|Core Web Vitals]]
|
||||
- 확장 방향: 프론트엔드 성능 최적화와 디버깅의 궁극적인 성과 지표이자 기준점이 되는 실제 사용자 체감 속도 지표(LCP, FID, INP, CLS 등) 심층 탐구 [8].
|
||||
- [[React Server Components (RSC)]]
|
||||
- [[React Server Components (RSC)|React Server Components (RSC)]]
|
||||
- 확장 방향: Next.js 환경에서 클라이언트 측 자바스크립트 번들 사이즈 자체를 줄이고 상호작용 없는 UI를 서버에서 렌더링함으로써 근본적인 클라이언트 디버깅 요소 및 리렌더링 비용을 제거하는 아키텍처 [42, 43].
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user