React와 Gemini API로 챗봇 만들기 강의를 수강해주셔서 감사합니다.

강사 소개

• 경력 요약:
  • 5년차 프론트엔드 개발자
  • 현재 대기업 IT 서비스팀 AI 프로덕트 부문에서 프론트엔드 개발 담당
  • 이전 경력: 핀테크 스타트업 및 대기업에서 모빌리티 서비스를 개발, 런칭 및 유지 보수
  • 스타트업 전문 개발사에서 약 10여 개의 MVP를 신속하게 출시하여 실무 협업과 애자일 프로세스 경험 보유
  • 디자인 시스템 구축 및 Next.js 마이그레이션, 웹 성능 최적화, GraphQL 기반 BFF 설계를 통한 대규모 프로젝트 진행
• 강의 철학:
  • 문제 해결과 코드 리뷰를 통한 실무 역량 강화
  • 적극적인 학습과 기술 공유를 통한 성장과 지속적인 개선

만들어볼 서비스 소개

• 프로젝트 개요:

  • React & Gemini API 채팅 앱: https://react-gemini-mqqr.onrender.com/

    React를 프론트엔드로, Gemini API를 백엔드 AI 응답 엔진으로 활용하여 실시간 채팅 애플리케이션을 개발합니다.

    

• 주요 기능 및 특징:
  • 실시간 채팅 인터페이스:
    • 사용자의 메시지를 입력받고 Gemini API를 호출하여 AI 응답을 실시간으로 스트리밍(SSE) 처리
  • 사용자 인증 및 데이터 저장:
    • Firebase Authentication과 Firestore를 연동하여 사용자의 채팅 데이터와 채팅 스레드를 안전하게 관리
  • 전역 상태 관리:
    • Zustand를 활용하여 전체 애플리케이션의 상태(채팅 데이터, 모달, 로딩 등)를 중앙에서 관리
  • 배포:
    • Render를 사용하여 프론트엔드(React)와 백엔드(Express)를 같이 혹은 분리 배포
• 왜 Gemini API + React인가?
  • Gemini API: 최신 자연어 생성 모델을 활용해 사용자의 질문에 대해 뛰어난 문맥 이해 기반 응답을 생성
  • React: 컴포넌트 기반의 효율적인 UI 구성과 상태관리, 그리고 클라이언트 사이드 라우팅으로 사용자 경험을 극대화

학습 내용 및 커리큘럼 개요

3.1 환경 설정 및 초기 프로젝트 구성

• React 앱 셋업:
  • Webpack, Babel, TypeScript를 사용하여 개발 환경 구성
  • 환경 변수 관리 (.env 파일, DefinePlugin, Render Dashboard 등)
• Express 서버 구성:
  • 간단한 Node.js(Express) 서버 구현 및 API 라우팅 구성
• 빌드 시스템 이해:
  • 개발(webpack devServer)과 production(webpack, tsc) 빌드의 차이 및 설정