🤖 GPT 채팅 애플리케이션

🌟 소개

이 프로젝트는 OpenAI의 GPT API를 활용한 실시간 스트리밍 채팅 애플리케이션입니다. React와 TypeScript를 기반으로 제작되었으며, 사용자 친화적인 인터페이스와 다크 모드를 지원합니다.

📱 동작 화면

💡 이 애플리케이션은 Express 백엔드 서버가 필요합니다. 아래는 로컬 환경에서 실행한 동작 화면입니다.

성능 비교

버퍼링 활성화 시 (권장)

• 첫 응답: 911ms
• 총 시간: 20850ms
• 청크 수: 455개
• 업데이트: 129회
• 평균 간격: 46ms
• 결과: 더 부드러운 화면 업데이트와 효율적인 리소스 사용

버퍼링 비활성화 시

• 첫 응답: 806ms
• 총 시간: 20195ms
• 청크 수: 468개
• 업데이트: 468회
• 평균 간격: 43ms
• 결과: 더 잦은 화면 업데이트로 인한 성능 부하 증가

💡 버퍼링을 활성화하면 업데이트 횟수가 약 72% 감소하면서도 동일한 응답 품질을 유지할 수 있습니다.

Before

After

✨ 주요 기능

• 💬 실시간 스트리밍 응답
• 📝 마크다운 형식 지원
• 💾 대화 내용 로컬 저장
• 🌓 다크 모드 자동 지원
• 📱 반응형 디자인
• 🔄 에러 처리 및 자동 재시도
• 📊 성능 측정 및 모니터링
• ⚡ 버퍼링 최적화 (토글 가능)

🛠 기술 스택

• ⚛️ React
• 📘 TypeScript
• ⚡ Vite
• 📝 react-markdown

📁 프로젝트 구조

src/
├── components/
│   ├── ChatInput.tsx    # 채팅 입력 컴포넌트
│   ├── ChatMessage.tsx  # 개별 메시지 컴포넌트
│   └── ChatMessages.tsx # 메시지 목록 컴포넌트
├── types/
│   └── chat.ts         # 타입 정의
├── utils/
│   ├── api.ts          # API 통신 유틸리티
│   └── storage.ts      # 로컬 스토리지 관리
├── App.tsx             # 메인 애플리케이션 컴포넌트
└── App.css             # 스타일링

🔍 주요 컴포넌트 설명

📱 App.tsx

• 애플리케이션의 메인 컴포넌트
• 상태 관리 및 메시지 처리 로직 포함
• 스트리밍 응답 처리
• 로컬 스토리지 연동
• 성능 측정 및 버퍼링 관리

⌨️ ChatInput

• 사용자 입력 처리
• 로딩 상태 표시
• 폼 제출 처리

💭 ChatMessage

• 개별 메시지 렌더링
• 마크다운 형식 지원
• 사용자/어시스턴트 메시지 스타일 구분

📜 ChatMessages

• 전체 메시지 목록 관리
• 스크롤 처리
• 로딩 및 에러 상태 표시

⚡ 성능 최적화

🔄 버퍼링 시스템

애플리케이션은 스트리밍 응답의 성능을 최적화하기 위한 버퍼링 시스템을 구현하고 있습니다.

🎯 작동 방식

1. 버퍼링 활성화 시:

   • ⏱️ 100ms 간격으로 응답 데이터를 일괄 처리
   • 🚀 useRef를 사용하여 데이터 누적
   • 🚀 불필요한 리렌더링 방지

2. 버퍼링 비활성화 시:

   • ⚡ 각 청크마다 즉시 화면 업데이트
   • 🔄 실시간 응답 처리

📊 성능 측정

다음 지표들을 실시간으로 모니터링:

• ⏱️ 첫 응답까지 걸린 시간 (ms)
• ⌛ 전체 응답 시간 (ms)
• 📦 총 청크 수
• 🔄 실제 업데이트 횟수
• ⚡ 평균 청크 간격 (ms)

🔄 상태 관리 전략

• useState: UI 관련 상태 관리

  • 💬 메시지 목록
  • ⌨️ 입력값
  • ⏳ 로딩 상태
  • ⚠️ 에러 상태
  • 📊 성능 측정 결과

• useRef: 실시간 데이터 처리

  • 📝 스트리밍 응답 누적
  • 🔄 버퍼링 처리
  • 🚀 불필요한 리렌더링 방지

⚙️ 환경 설정

환경 변수

# API 엔드포인트 설정
VITE_API_URL=http://localhost:3000

# 재시도 설정
VITE_MAX_RETRIES=3
VITE_RETRY_DELAY=1000

🚀 설치 및 실행

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

# 프로덕션 빌드
npm run build

🌟 특징

1. ⚡ 스트리밍 응답: 실시간으로 응답이 표시되어 사용자 경험 향상
2. 📝 마크다운 지원: 코드 블록, 목록, 인용구 등 다양한 마크다운 형식 지원
3. 💾 자동 저장: 모든 대화 내용이 자동으로 로컬에 저장
4. 🌓 다크 모드: 시스템 설정에 따라 자동으로 다크 모드 적용
5. 🔄 에러 복구: 네트워크 오류 시 자동 재시도 메커니즘
6. 📱 반응형 디자인: 다양한 디바이스에서 최적화된 경험 제공
7. ⚡ 성능 최적화: 버퍼링 시스템을 통한 리렌더링 최적화
8. 📊 성능 모니터링: 실시간 성능 지표 확인 가능

💡 성능 최적화 팁

1. 🔄 버퍼링 활성화 권장

   • 대부분의 경우 버퍼링을 활성화하는 것이 성능상 유리
   • 특히 긴 응답을 처리할 때 효과적

2. 📊 성능 모니터링 활용

   • 성능 패널을 통해 응답 처리 상태 확인
   • 버퍼링 효과 실시간 확인