Frontend 기술 스택
Backoffice 아키텍처
핵심 구성 요소
UI Layer
| 기술 | 역할 |
|---|---|
| React 19 | Concurrent Features 활용, Custom Hooks 기반 컴포넌트 |
| Tailwind CSS v4 | Utility-first CSS, 다크 모드, 반응형 디자인 |
| Design System | 접근성(a11y) 보장된 Radix Primitives 기반 컴포넌트 라이브러리 |
State Management
상태를 3가지 영역으로 분리하여 관리합니다:
- Server State — API 데이터 캐싱, 백그라운드 동기화, 낙관적 업데이트
- Client State — UI 전용 상태 (사이드바, 테마, 명령 팔레트)
- URL State — 필터, 정렬, 페이지네이션 (URL 공유로 동일 뷰 재현)
API Integration
성능 최적화
| 영역 | 전략 |
|---|---|
| 빌드 최적화 | Code Splitting, Tree Shaking, Lazy Loading |
| 런타임 최적화 | 메모이제이션, 가상화, 디바운싱 |
| 캐시 전략 | Stale-While-Revalidate, 프리페칭, 낙관적 업데이트 |
반응형 디자인
4단계 브레이크포인트 기반 반응형 레이아웃:
| 크기 | 범위 | 레이아웃 |
|---|---|---|
| Mobile | ~640px | 스택 레이아웃 |
| Tablet | 768px~ | 사이드바 레이아웃 |
| Desktop | 1024px~ | 풀 레이아웃 |
| Large | 1280px~ | 확장 레이아웃 |
관련 문서: