[AI 기반 챗봇 만들기] Chatory- readme

실제

세팅

• 참고할만한 프로젝트 구조를 참고하여 만들려고 했었다. bulletproof-react 프로젝트를 pork하여 세팅을 벤치마크 하였다.
  • 그 과정에서 storybook 이라는 유용한 라이브러리를 알게 되었다.
  • 서버 없이 데이터를 렌더링해볼 수 있는 Mocking 가능한 Mock API 를 알게 되었다.

구현 완료

• UI 최적화는 Cursor의 도움을 받아 작성하였다.
• Google OAuth 로그인으로 유저 정보를 조회하고 로그인처리하였고, 유저정보를 localStorage에 저장하였음.
• Gemini API를 사용하여 챗봇을 구현하였다.
  • Open AI를 사용하려고 했으나 질문 횟수에 제한이 있고, 실제로 사용하는데 어려움이 있었다. (대체하기로함)
  • 대화 내용 역시 localStorage에 저장하였음.
  • 챗봇이 입력중일때 입력중… 을 표시하도록함 *state 사용
• 모호하게 알던 리액트 개념을 적용해보고 개념을 정리하니 훨씬 이해가 잘 되었다. 

챗토리 기능 보완했으면 하는 요소

• 리액트 기본 개념을 익힐 수 있는 기능 두 가지 정도 추가
• UI 단 매끄럽게 개선하기(로그인전, 후 화면 나누고, 채팅이력)
• mocking api, 테스트코드까지 넣으면 더 좋을듯

 

준비-계획

📌 AI 챗봇 토이 프로젝트 명세서

🛠 기술 스택

• 프레임워크: ✅03.09완료 React (Next.js) + TypeScript
• 배포 환경: Vercel
• UI: ✅03.09완료 유료 구매한 프레임워크 사용
• 데이터 관리: ✅03.09완료 React Query + Zustand
• 스토리지: ✅03.09완료 localStorage
• API 연동: OpenAI API 또는 자체 구축 API

---

🚀 주요 기능

1. 로그인 (인증 처리)
   • ✅03.09완료 OAuth(Google, GitHub) 또는 JWT 기반 로그인 구현
   • ✅03.09완료 로그인 후 사용자 정보 저장 및 세션 유지
   • ✍️예정 로그인하지 않은 사용자의 대화 기록은 저장X
2. 챗봇 메시지 저장
   • 사용자와 AI의 대화 내용 상태 관리
   • ✅03.09완료 IndexedDB 또는 localStorage를 활용하여 로컬 저장
   • ✅03.09완료 assistant와 user를 구분하여 저장
   • ✍️예정 대화 내용 초기화 버튼 추가하기
3. 이전 메시지 불러오기
   • ✅03.09완료 페이지 새로고침 후에도 이전 대화 유지
   • ✅03.09완료 React Query를 활용하여 캐싱 및 API 요청 최적화
   • ✅03.09완료 (추가) 입력중일 경우 ‘입력중’ 메세지 보이도록 추가
   • ✍️예정 로그인한 사용자의 채팅 기록 불러오기
4. React 컴포넌트 분리✅03.09완료
   • ChatInput.tsx: 메시지 입력 필드
   • ChatMessage.tsx: 개별 메시지 렌더링
   • ChatContainer.tsx: 전체 채팅 UI 관리
   • ChatHistory.tsx: 이전 대화 불러오기
5. API 요청 최적화
   • ✅03.09완료 React Query 활용하여 AI 응답 요청 처리
   • ✍️예정 Debounce 적용하여 불필요한 API 호출 방지
6. UI/UX 개선
   • Framer Motion을 활용한 애니메이션 적용
   • Auto-scroll 및 스켈레톤 UI 적용

---

📌 배포 및 관리 방식

• Vercel을 통해 배포 자동화
• ✅03.09완료 환경 변수로 API 키 관리
• GitHub Actions을 활용한 CI/CD 고려 가능

---

✅ 1. 상태 관리 (State Management)

• ✅03.09완료 React useState & useEffect → 입력값, API 응답 상태 관리
• ✅03.09완료 zustand → 전역 상태로 채팅 기록 저장
• ✅03.09완료 React Query → API 데이터 캐싱 & 최적화

---

✅ 2. 비동기 데이터 처리 (Async API Handling)

• *~~fetch 또는 axios → OpenAI API 호출~~*
• ~~Optimistic UI → API 응답 전에 UI 먼저 업데이트~~
• ~~Debounce 처리 (lodash debounce) → 불필요한 API 요청 방지~~
• ✅03.09완료 react Query로 구현

---

✅ 3. UI & 렌더링 최적화 (Performance Optimization)

• Virtualized List (react-window) → 대량의 메시지를 렌더링할 때 성능 최적화
• Suspense & Lazy Loading (React.lazy()) → UI 지연 로딩 적용
• ✅03.09완료 Memoization (useMemo, useCallback) → 불필요한 리렌더링 방지

---

✅ 4. 라우팅 & 컴포넌트 구조 (Component Architecture)

• React Router → 여러 페이지(홈, 채팅, 설정 등)로 구성 가능
• ✅03.09완료 컴포넌트 분리 → ChatInput, ChatMessage, ChatContainer 등으로 나누기
• Context API 활용 → 전역 메시지 상태를 공유

---

✅ 5. UI 애니메이션 & 인터랙션

• Framer Motion → 채팅 입력 애니메이션, 메시지 슬라이드 효과
• ✅03.09완료 Auto Scroll (useRef) → 새로운 메시지가 오면 자동 스크롤

---

✅ 6. 로컬 데이터 저장 & 유지

• ✅03.09완료 localStorage / ~~IndexedDB~~ → 대화 내역을 저장하여 새로고침해도 유지
• ~~Service Worker (PWA) → 오프라인에서도 메시지 확인 가능~~

---

🎯 이 프로젝트를 하면 익힐 수 있는 React 요소들

✔ 상태 관리 → useState, useEffect, zustand, Recoil

✔ API 최적화 → React Query, Optimistic UI, Debounce

✔ 성능 최적화 → Virtualized List, useMemo, useCallback

✔ UI 애니메이션 → Framer Motion

✔ 데이터 저장 → localStorage, IndexedDB

✅ 추천하는 시작 순서

1️⃣ 상태 관리 → React Query / Vue Query

• API 데이터를 효율적으로 캐싱하고 상태를 관리하는 방법
• useState나 ref로만 관리하는 것보다 성능적으로 훨씬 유리

2️⃣ 성능 최적화 → Lazy Loading & Code Splitting

• ~~import()를 활용한 코드 스플리팅~~
• ~~IntersectionObserver를 이용한 Lazy Loading~~
• 큰 이미지, 무거운 데이터가 있을 때 효과적

3️⃣ OAuth 로그인 & JWT 토큰 관리

• Google, GitHub OAuth 연동 경험 쌓기
• JWT 토큰 저장 및 API 요청 시 인증 처리
• 로그인 기능이 있는 프로젝트에 바로 적용 가능

4️⃣ CI/CD & 자동 배포

• GitHub Actions을 활용해 PR마다 빌드 & 배포 자동화
• Vercel, Netlify, Firebase Hosting을 이용한 손쉬운 배포

5️⃣ 테스트 (Jest / Cypress / Playwright)

• 유닛 테스트 (Jest, Vitest): 함수 & 컴포넌트 단위 테스트
• E2E 테스트 (Cypress, Playwright): 로그인, 페이지 이동 자동화 테스트
• 테스트 경험이 있으면 협업에서 강점이 됨

🔥 첫 번째 목표 추천

👉 React Query (or Vue Query) + OAuth 로그인

• 데이터 상태 관리 + 인증을 한 번에 경험할 수 있어서 실무에서 바로 활용 가능
• API 호출 후 직접 데이터 캐싱 & 로딩 상태 관리하는 연습
• 로그인 API 연동하면서 JWT 인증 흐름까지 익히기

이 방식으로 시작하면 API 기반 개발 경험을 살리면서 상태 관리 & 인증을 자연스럽게 익힐 수 있어요.

어떤 걸 먼저 시도해보고 싶은지 고민해볼까요? 😊