1.1 프로젝트 개요

• 기술 스택
  • 프론트엔드: React + TypeScript + Webpack/Babel
  • 백엔드: Node.js + Express
  • AI 엔진: Google Gemini API
  • 데이터 저장: localStorage → Firebase Firestore
  • 인증: Firebase Authentication
  • 상태 관리: Zustand
  • 배포: Render 또는 Vercel
• 주요 기능
  1. 사용자 입력 수집
  2. Express 서버에서 Gemini API 호출
  3. 응답을 SSE(Server‑Sent Events)로 스트리밍
  4. React 쪽 ReadableStream으로 부분 렌더링
  5. 메시지 기록을 Firestore에 저장 및 실시간 구독
  6. Firebase Auth 기반 로그인/회원가입
  7. 전역 상태(Zustand)로 로딩·모달·데이터 관리

1.2 학습 목표

1. 개발 환경 구성
   • Webpack/Babel 설정, .env 환경변수 주입
   • Express 서버 타입스크립트 빌드(tsc)
2. REST API & SSE 이해
   • /api/chat POST 요청 처리
   • /api/stream SSE 엔드포인트 구현
3. React 핵심 구현
   • 컴포넌트 구조 설계(채팅 리스트, 입력창, 헤더, 사이드바)
   • 상태관리: useState → global store(Zustand)
   • 스트리밍 응답 처리 및 중단(AbortController)
4. 데이터 영속화
   • 초기 localStorage 저장/읽기
   • Firestore 연동: setDoc, onSnapshot
   • 보안 규칙: 로그인 사용자만 자신 데이터 접근
5. 사용자 인증
   • Firebase Auth 이메일/구글 로그인
   • PrivateRoute 컴포넌트로 보호된 라우팅
6. 배포 및 최적화
   • 프로덕션 빌드(Webpack, tsc)
   • Render/Vercel 설정, 환경변수 관리
   • Lighthouse로 성능 점검, 번들 크기 최적화

1.3 기대 효과

• 풀스택 실전 경험
  • 클라이언트↔서버 통합 개발 및 배포
• AI 서비스 구현 능력
  • Gemini API 연동, 실시간 스트리밍 처리
• 최신 클라우드 DB 활용
  • Firestore 실시간 구독과 보안 규칙 설계
• 모던 상태관리 학습
  • Zustand를 통한 간단하고 확장 가능한 전역 상태 관리