Antigravity Agent
62 lines
4.1 KiB
Markdown
62 lines
4.1 KiB
Markdown
## 📌 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 (Auto-Linked)
|
|
* [[Accessibility]]
|
|
* [[Architecture]]
|
|
* [[Boundaries]]
|
|
* [[Code Splitting]]
|
|
* [[Concurrent_Rendering]]
|
|
* [[Core_Web_Vitals]]
|
|
* [[Error Boundaries]]
|
|
* [[Feature-Sliced_Design]]
|
|
* [[Frontend]]
|
|
* [[Frontend Observability & Logging]]
|
|
* [[Hydration]]
|
|
* [[Observability]]
|
|
* [[Optimization]]
|
|
* [[React]]
|
|
* [[React_Compiler]]
|
|
* [[Research]]
|
|
* [[SaaS]]
|
|
* [[Vite Build Optimization]]
|
|
|
|
### 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** |