FitCheck Frontend Wiki

Feature 기반 아키텍처와 상태 분리를 중심으로 한 프론트엔드 설계 문서

본 위키는 패션 SNS 서비스 FitCheck의 프론트엔드 개발을 위한
아키텍처 설계, 기술 선택, 상태 관리 전략, 도메인 구조를 정의한 문서입니다.

---

프로젝트 목표

• 이미지 중심 SNS 환경에서의 대용량 데이터 처리 성능 최적화
• 사용자 인터랙션이 많은 구조에서의 빠른 UI 반응성 확보
• 기능 확장과 유지보수를 고려한 Feature 기반 구조 설계
• 서버 상태와 클라이언트 상태 분리를 통한 데이터 정합성 확보

---

핵심 설계 원칙

Feature-Based Architecture

도메인 단위로 구조를 분리하여 응집도를 높이고 결합도를 낮춥니다.
각 기능은 독립적으로 확장 가능하도록 설계합니다.

---

Strict State Separation

서버 상태와 클라이언트 상태를 명확히 분리합니다.

• 서버 상태: TanStack Query
• 클라이언트 상태: Zustand

이를 통해 데이터 흐름을 단순화하고 예측 가능성을 확보합니다.

---

Performance-Oriented Rendering

SNS 특성에 맞춰 렌더링 성능을 최우선으로 고려합니다.

• 이미지 최적화 및 Lazy Loading
• Virtual List 기반 렌더링 최적화
• CDN 기반 이미지 서빙

---

Wiki 구조

Architecture

• Front-end Architecture
• Step 1 Tech Stack Selection
• Step 2 User FlowChart

프론트엔드 전반의 구조와 흐름을 정의합니다.

---

Domain Specifications

• Auth Profile 도메인 테크 스펙
• Post 도메인 테크 스펙
• Search 도메인 테크 스펙
• 공통 도메인 테크 스펙

도메인별 데이터 구조, API 계약, 상태 흐름, UI 책임을 정의합니다.

---

Engineering Standards

• 프론트엔드 개발 표준 및 구조 설계
• 상태 관리 전략
• API 연동 방식
• 에러 처리 정책
• 코드 컨벤션

개발 시 일관성을 유지하기 위한 기준을 제공합니다.

---

Quick Links

• Tech Stack
• User Flow
• Post Domain Spec
• Search Domain Spec
• Frontend Standards

---

대상 독자

• 프론트엔드 개발자
• 백엔드 개발자
• 기획 및 디자인 협업 인원

---

문서 목적

• 설계 기준을 사전에 정의하여 개발 방향을 명확히 합니다.
• 팀 내 컨벤션을 통일하여 협업 비용을 줄입니다.
• 유지보수 시 빠르게 구조를 이해할 수 있도록 돕습니다.