Fix: Restore unified Topics folder and reorganize specialized category folders

10_Wiki/Topics/React Frontend Development.md

@@ -0,0 +1,42 @@
+## 📌 Brief Summary
+React 프론트엔드 개발은 컴포넌트 기반 아키텍처를 통해 현대적인 웹 사용자 인터페이스를 구축하는 공정이다. 비즈니스 기능 중심의 폴더 구조(FSD), 계층화된 상태 관리, 그리고 자동화된 성능 최적화와 에러 핸들링을 결합하여 유지보수 가능하고 확장성 있는 시스템을 구축하는 것을 목표로 한다.
+
+## 📖 Core Content
+1. **아키텍처 및 설계 원칙**
+   - **FSD (Feature-Sliced Design)**: 도메인 계층화와 단방향 의존성을 통해 시스템 결합도를 낮춘다.
+   - **SOLID & Clean Code**: 단일 책임 원칙(SRP)을 기반으로 비대해진 로직을 커스텀 훅으로 추출하여 캡슐화한다.
+2. **세분화된 상태 관리**
+   - 정적/글로벌 상태(Context), 빈번한 업데이트(Zustand), 서버 동기화(TanStack Query)로 역할을 분리하여 리렌더링 성능을 극대화한다.
+3. **성능 및 리소스 최적화**
+   - **React Compiler**: 빌드 타임 자동 메모이제이션을 통해 수동 최적화의 인적 오류를 줄인다.
+   - **Code Splitting**: `React.lazy`와 Vite 설정을 통해 번들 크기를 최적화하고 사용자 체감 로딩 속도를 개선한다.
+4. **안정성 및 관측성 (Observability)**
+   - **Error Boundaries**: 런타임 오류 격리로 시스템 복원력을 확보한다.
+   - **모니터링**: Sentry, LogRocket 및 브라우저 메모리 프로파일링을 통해 실시간 에러와 메모리 누수를 추적한다.
+
+## ⚖️ Trade-offs & Caveats
+- **기술 스택 파편화**: 상태 관리나 렌더링 방식(SSR vs CSR)에 따라 너무 많은 도구를 도입할 경우, 프로젝트의 복잡도가 기하급수적으로 상승하고 유지보수 비용이 증가한다.
+- **성능 최적화의 함정**: `useMemo`나 `useCallback`의 남발은 오히려 비교 연산 오버헤드를 발생시킬 수 있으므로, 실제 병목 지점을 프로파일링한 후 적용해야 한다.
+- **규격화의 인지적 비용**: 엄격한 네이밍 규칙과 아키텍처는 신규 개발자의 온보딩을 어렵게 만들 수 있으므로, 자동화된 린트 규칙과 문서화가 필수적이다.
+
+## 🔗 Knowledge Connections
+### Related Concepts
+- **Feature-Sliced Design (FSD)**: 확장 가능한 구조 설계 방법론 (관계: 구조적 가이드라인)
+- **Zustand & TanStack Query**: 성능 중심의 상태 관리 전략 (관계: 데이터 레이어 도구)
+- **React Compiler**: 차세대 자동 최적화 메커니즘 (관계: 성능 최신화)
+
+### Deeper Research Questions
+1. FSD 아키텍처에서 인증(Auth)과 같은 전역 관심사를 특정 레이어에 배치할 때 발생하는 의존성 딜레마를 어떻게 해결하는가?
+2. React Compiler 도입 시, 참조 안정성을 보장하지 않는 서드파티 라이브러리들과의 상호 운용성 한계는 무엇인가?
+3. Zustand의 외부 스토어 모델이 React의 Concurrent Rendering 모드와 충돌할 가능성과 그 해결책은?
+4. 모바일 및 저사양 기기에서 Hydration 비용을 최소화하기 위한 'Partial Hydration' 또는 'Islands Architecture'의 React적 구현 방안은?
+5. 프로덕션 환경에서 'Detached DOM nodes'로 인한 메모리 누수를 감지하기 위한 자동화된 회귀 테스트 구축이 가능한가?
+
+### Practical Application Contexts
+- **대규모 웹 앱 구축**: 수천 개의 컴포넌트를 가진 복잡한 대시보드나 SaaS 플랫폼의 안정적 개발.
+- **성능 중심 리팩토링**: 로딩 속도가 느리고 리렌더링이 빈번한 기존 프로젝트를 최신 아키텍처와 도구로 현대화.
+
+### Adjacent Topics
+- **Vite Build Optimization**
+- **Frontend Observability & Logging**
+- **Web Accessibility (A11y) & Core Web Vitals**