Front‐end Architecture - 100-hours-a-week/16-team-katopia-fe GitHub Wiki

👔 FitCheck: Front-end Architecture Docs

"실제 서비스 수준의 기술적 안정성과 사용자 경험을 지향하는 패션 소셜 네트워크 서비스"

본 위키는 3개월간 진행되는 패션 SNS 프로젝트의 설계 명세서입니다. 단순히 기능을 구현하는 것을 넘어, 확장 가능한 아키텍처를 설계하고 실제 운영 환경에서 발생할 수 있는 기술적 난제들을 해결해 나가는 과정을 기록합니다.

🚀 설계 및 개발 단계 (Project Phases)

멘토님의 가이드에 따라 총 3단계의 체계적인 설계 과정을 거쳐 개발을 진행합니다. 각 항목을 클릭하여 상세 문서를 확인할 수 있습니다.

1️⃣ [Phase 1] 기술 스택 선정 및 전략 (Tech Stack)

  • 상세 문서 바로가기
  • 핵심 내용: 프로젝트 목적에 부합하는 프론트엔드 도구 선정 및 각 기술별 선택이유 정리

2️⃣ [Phase 2] 유저 플로우 차트 (User Flow)

  • 상세 문서 바로가기
  • 핵심 내용: 비즈니스 로직의 시각화, 예외 상황(Exception Handling)을 포함한 사용자 경험 설계 및 데이터 흐름 파악

3️⃣ [Phase 3] 도메인 테크 스펙 (Tech Spec)

3️⃣ [Phase 4] 프론트엔드 개발 표준 및 구조 설계서 (FE Architecture & Standards)

🏗️ 프로젝트 핵심 아키텍처 전략

실제 서비스를 개발한다는 관점에서 아래 세 가지 원칙을 고수합니다.

  1. 데이터 무결성: TypeScript와 Zod를 연동하여 프론트엔드 유입 데이터부터 API 응답까지 철저하게 검증합니다.
  2. 반응형 UX: TanStack Query의 Optimistic Update를 활용하여 좋아요, 투표 등 SNS 인터랙션의 반응 속도를 극대화합니다.
  3. 성능 최적화: 이미지 중심 서비스 특성을 고려하여 클라이언트 측 압축 및 지연 로딩 전략을 수립합니다.

📅 로드맵 및 진행 상황 (Roadmap)

단계 기간 주요 업무 상태
Step 1-3 2026.01.19 ~ 시스템 설계 및 도메인 테크 스펙 문서화 🔵 COMPLETE
Sprint 1 2026.01 ~ OAuth 로그인, 피드 UI 및 게시글 CRUD 🔵 COMPLETE
Sprint 2 2026.02 ~ 북마크, 팔로우, 투표 시스템 기능 확장 🔵 COMPLETE
Sprint 3 2026.03 ~ 알림 센터, 그룹채팅, 검색 고도화 및 최종 QA 🔵 COMPLETE

🔗 Quick Links