bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete wikification of War Commander batch 1&2 and final grey dot cleanup

Browse Source
This commit is contained in:
yesung
2026-04-27 18:58:22 +09:00
parent 3424166ea2
commit 6b86b0da4c
2706 changed files with 9074 additions and 7273 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topics/Frontend_Mastery/React 성능 최적화 (React Performance Optimization).md
+2 -2
View File
@@ -21,8 +21,8 @@ React 성능 최적화는 불필요한 연산과 재렌더링을 최소화하고
초기 로딩 속도(LCP)를 개선하려면 다운로드해야 할 JavaScript 번들 크기를 최소화해야 한다. `React.lazy()`를 활용한 라우트 레벨의 코드 스플리팅을 적용하면 초기 번들 크기를 30~50%가량 줄일 수 있다 [37]. 한 걸음 더 나아가 서버에서만 실행되는 React Server Components(RSC)를 활용하면 무거운 라이브러리나 정적 데이터 페칭 로직이 브라우저로 전송되지 않아 JavaScript 번들 크기를 '0 바이트'에 가깝게 줄이고 수화(Hydration) 비용을 완전히 제거할 수 있다 [38-40].
## 🔗 Knowledge Connections
- **Related Topics:** [[Virtual DOM (가상 DOM)]], [[Critical Rendering Path (중요 렌더링 경로)]], [[React Compiler (React 컴파일러)]], [[React Server Components (RSC)]], [[Concurrent Rendering (동시성 렌더링)]]
- **Projects/Contexts:** [[코어 웹 바이탈(Core Web Vitals) 개선 프로젝트]], [[프론트엔드 컴포넌트 기반 아키텍처(CBA) 구축]]
- **Related Topics:** Virtual DOM (가상 DOM), Critical Rendering Path (중요 렌더링 경로), React Compiler (React 컴파일러), [[React Server Components (RSC)]], Concurrent Rendering (동시성 렌더링)
- **Projects/Contexts:** 코어 웹 바이탈(Core Web Vitals) 개선 프로젝트, 프론트엔드 컴포넌트 기반 아키텍처(CBA) 구축
- **Contradictions/Notes:** React 18의 자동 배칭(Automatic Batching) 기능은 기본적으로 활성화되어 렌더링 최적화에 기여하지만, 사용자가 즉각적인 시각적 피드백(예: 입력 포커스, 폼 값 즉각 업데이트)을 필요로 하는 경우에는 `flushSync` API를 사용하여 의도적으로 배칭을 우회하고 동기적 렌더링을 강제해야 한다 [28, 41, 42]. 한편 기존 React 생태계에서는 `useMemo`와 같은 수동 최적화가 필수적이었으나, React 컴파일러 도입 이후에는 이들이 불필요해지며 의도적인 제어나 서드파티 라이브러리 대응과 같은 예외적 상황에서만 사용하는(Escape Hatch) 방식으로 패러다임이 바뀌고 있다 [19, 43-45].
---