AI 요약
본 가이드는 React 18 프론트엔드와 Node.js(Express) 백엔드를 결합하여 실제 서비스가 가능한 수준의 AI 채팅 웹 애플리케이션을 구축하는 과정을 상세히 다룹니다. 백엔드는 OpenAI SDK를 활용하여 DeepSeek-V3, DeepSeek-R1, Qwen-Max, Qwen-Turbo 등 중국 내 주요 대형 언어 모델(LLM) API를 통합 관리하며, 모델별 API 키와 베이스 URL 설정을 통해 손쉬운 모델 전환 기능을 제공합니다. 특히 사용자 경험(UX) 향상을 위해 SSE(Server-Sent Events) 프로토콜을 사용해 실시간 스트리밍 방식의 타자기 효과를 구현한 점이 특징입니다. 프론트엔드에서는 Vite를 기반으로 react-markdown과 react-syntax-highlighter를 적용해 Markdown 렌더링 및 코드 하이라이팅 기능을 완성했습니다. 전체 프로젝트 구조부터 API 프록시 설정, 다중 모델 클라이언트 구성까지 실무적인 코드를 포함하고 있습니다.
핵심 인사이트
- 다중 모델 지원: DeepSeek(api.deepseek.com) 및 Alibaba의 Qwen(dashscope.aliyuncs.com) 모델을 하나의 백엔드 인터페이스에서 통합 관리할 수 있는
MODEL_CONFIGS구조를 제시함. - 실시간 스트리밍 구현:
text/event-stream헤더와stream: true설정을 활용하여 응답 지연을 최소화하고 사용자에게 즉각적인 피드백을 제공하는 SSE 통신 방식을 채택함. - 최대 효율화 팁: 'TheRouter(therouter.ai)'와 같은 통합 API 입구를 사용할 경우, 백엔드 클라이언트 구성 코드를 50% 이상 단축할 수 있는 최적화 방안을 제안함.
주요 디테일
- 기술 스택: React 18, Vite, Node.js, Express, openai npm 패키지(DeepSeek/Qwen 호환), react-markdown 등을 사용하여 최신 풀스택 환경을 구성함.
- 백엔드 구성: 3001번 포트에서 실행되는 Express 서버는 CORS를 허용하며,
max_tokens: 2048설정을 통해 안정적인 텍스트 생성 길이를 확보함. - 프론트엔드 기능:
useChat커스텀 훅을 통해 대화 상태를 관리하며,ChatWindow,MessageItem,InputBar,ModelSelector등 컴포넌트 기반 아키텍처를 구현함. - 데이터 지속성: 대화 히스토리 유지 및 Markdown 기반의 가독성 높은 UI를 제공하며,
dotenv를 활용해 API 키와 같은 민감한 정보를 안전하게 관리함.
향후 전망
- 통합 API의 확산: 다양한 LLM을 하나의 인터페이스로 호출하는 구조가 보편화되면서 개발 효율성을 높이는 통합 게이트웨이 서비스의 활용이 증가할 것으로 보임.
- AI UX의 표준화: SSE를 통한 스트리밍 출력과 Markdown 기반의 코드 렌더링이 AI 채팅 서비스의 기본 사양으로 자리 잡으며 관련 라이브러리의 생태계가 더욱 견고해질 전망.
출처:juejin