로컬 LLM + RAG 기반 AI 채팅봇 만들기4.1 SvelteKit 소개 및 환경 설정이제 백엔드 구현을 완료했으므로,프론트엔드에서 사용자가 직접 AI 챗봇과 상호작용할 수 있도록 UI를 구축해야 합니다.이번 단계에서는 SvelteKit을 활용한 프론트엔드 환경 설정을 진행하겠습니다.1) SvelteKit이란?✅ SvelteKit 개요SvelteKit은 Svelte 기반의 풀스택 프레임워크로,빠른 성능과 간단한 코드 구조를 제공하여 인터랙티브 웹 애플리케이션을 쉽게 개발할 수 있도록 지원합니다.✅ 왜 SvelteKit을 선택했는가?컴파일 기반 프레임워크 → 실행 속도가 빠르고, 성능 최적화가 쉬움반응형(Reactivity) 지원 → 상태 관리가 간편하며, 사용하기 쉬움SSR(Server-Side Re..
로컬 LLM + RAG 기반 AI 채팅봇 만들기3.5.3 데이터 정규화 및 성능 최적화이제 PostgreSQL을 활용하여 대화 기록을 저장하고 조회하는 기능을 구현했습니다.하지만 데이터가 많아질수록 저장 및 검색 속도가 느려질 수 있기 때문에 성능 최적화가 필요합니다.이번 단계에서는 데이터 정규화 및 성능 최적화 기법을 적용하여보다 빠르고 효율적인 대화 기록 관리 시스템을 구축하겠습니다.1) 데이터 정규화란?데이터 정규화(Normalization)는 중복을 최소화하고 데이터 일관성을 유지하기 위한 데이터베이스 설계 기법입니다.이를 통해 데이터 저장 공간을 절약하고 검색 속도를 최적화할 수 있습니다.✅ 기존 대화 기록 테이블의 문제점user_id가 여러 테이블에 중복 저장됨 → 사용자 테이블과 참조 관계 ..
로컬 LLM + RAG 기반 AI 채팅봇 만들기3.5.2 대화 이력 저장 및 조회 API 구현이제 PostgreSQL에 저장된 대화 이력을 API를 통해 관리할 수 있도록대화 기록을 저장하고 조회하는 API를 구현하겠습니다.1) API 설계 개요✅ API에서 제공할 기능1️⃣ 대화 저장하기사용자가 WebSocket을 통해 메시지를 보낼 때 자동으로 DB에 저장2️⃣ 특정 세션의 대화 이력 조회사용자가 특정 세션에서 진행한 대화 목록을 조회3️⃣ 사용자별 전체 대화 세션 목록 조회사용자가 생성한 모든 대화 세션 리스트를 불러오기2) API 엔드포인트 설계HTTP 메서드엔드포인트설명POST/chat/save대화 메시지 저장GET/chat/{sessionId}특정 대화 세션의 대화 기록 조회GET/chat/s..
로컬 LLM + RAG 기반 AI 채팅봇 만들기3.5 PostgreSQL 연동 및 대화 기록 저장3.5.1 대화 기록 데이터 모델 설계AI 챗봇에서 대화 기록을 저장하는 기능은 매우 중요합니다.이 기능을 통해 사용자의 질문과 AI의 응답을 데이터베이스에 저장하고,향후 대화 분석, 추천 시스템 개선, 개인화된 서비스 제공 등에 활용할 수 있습니다.이번 단계에서는 PostgreSQL을 사용하여 대화 기록을 저장할 데이터 모델을 설계합니다.1) 대화 기록을 저장해야 하는 이유✅ AI 챗봇의 대화 기록 저장 필요성사용자 경험 개선 → 과거 대화를 기반으로 더 나은 AI 응답 제공 가능대화 이력 분석 → 인기 있는 질문 패턴 분석, 사용자 성향 파악 가능데이터 활용 확장성 → 추천 시스템, 피드백 학습, 질의응답..
로컬 LLM + RAG 기반 AI 채팅봇 만들기3.4.3 다중 사용자 지원WebSocket을 이용한 AI 챗봇을 구현하면 실시간으로 사용자와 대화할 수 있지만, 현재는 단일 사용자만 지원하는 구조입니다.이제 여러 사용자가 동시에 AI와 대화할 수 있도록 WebSocket을 확장하여 다중 사용자 지원 기능을 추가하겠습니다.1) 다중 사용자 지원이 필요한 이유✅ 기존 WebSocket 구조의 문제점현재 WebSocket은 단일 클라이언트 연결만 관리여러 사용자가 연결할 경우 각각의 세션을 분리하여 관리할 수 없음✅ 개선 목표각 사용자마다 독립적인 WebSocket 세션을 유지여러 사용자가 동시에 AI 챗봇과 대화 가능사용자의 WebSocket 연결이 끊어져도 정상적으로 처리 가능2) WebSocket을 이용..
로컬 LLM + RAG 기반 AI 채팅봇 만들기3.4.2 실시간 대화 데이터 처리이제 WebSocket을 이용한 실시간 채팅의 기본 구조를 구축했으므로,LLM과의 실시간 대화 데이터를 처리하는 로직을 추가해야 합니다.이를 통해 클라이언트가 메시지를 보내면, LLM이 이를 처리하고 응답하는 기능을 구현할 것입니다.1) 실시간 대화 데이터 처리 개요✅ 기존 WebSocket의 한계현재 WebSocket은 사용자가 보낸 메시지를 그대로 반환하는 방식LLM과 연결되지 않아 AI 응답이 동적으로 생성되지 않음✅ 개선 방향사용자가 보낸 메시지를 LLM에 전달 → AI가 응답 생성LLM 응답을 WebSocket을 통해 클라이언트에 실시간 전송대화 흐름을 유지하여 AI가 문맥을 인식하도록 설계2) 실시간 대화 흐름 개..
로컬 LLM + RAG 기반 AI 채팅봇 만들기3.4 WebSocket을 이용한 실시간 채팅 기능 구현3.4.1 WebSocket 기본 구조WebSocket은 클라이언트와 서버 간의 양방향 통신을 지원하는 프로토콜로, 실시간 채팅 시스템을 구현하는 데 최적화되어 있습니다.본 챕터에서는 Ktor에서 WebSocket을 설정하는 기본 구조를 구축하고, 실시간 메시지를 주고받는 방식을 설명합니다.1) WebSocket이 필요한 이유✅ 기존 HTTP 기반 요청/응답 방식의 한계HTTP는 요청(Request)-응답(Response) 구조로, 클라이언트가 요청을 보내야만 응답을 받을 수 있음실시간 데이터 전송이 어렵고, 대기 시간이 길어짐상태 유지가 어렵기 때문에 연속적인 대화 흐름을 관리하기 어려움✅ WebSoc..
로컬 LLM + RAG 기반 AI 채팅봇 만들기FAISS 기반 벡터 검색과 LLM 응답 결합을 성공적으로 구현했다면, 이제 검색 성능을 모니터링하고 최적화하는 단계로 넘어가야 합니다.이번 단계에서는 FAISS 및 LLM의 검색 성능을 측정하는 방법과 성능을 개선하는 기법을 다룹니다.1) 검색 성능 모니터링이 중요한 이유✅ 벡터 검색 성능을 측정해야 하는 이유검색 속도가 느려지면 실시간 응답이 어렵고 사용자 경험 저하대규모 데이터에서 FAISS 인덱스가 최적화되지 않으면 과부하 발생검색된 문서가 부정확하면 AI 응답의 신뢰도 하락✅ LLM 응답 속도 최적화 필요성LLM이 검색된 문서를 처리하는 속도가 사용자 경험에 직접적인 영향입력 문맥을 최적화하면 불필요한 LLM 처리 비용 감소검색 결과의 문맥 적합도를..
로컬 LLM + RAG 기반 AI 채팅봇 만들기FAISS를 활용하여 검색된 문서를 로컬 LLM (Llama 3)과 결합하여 더욱 정확한 응답을 생성하는 과정을 구현합니다.이 과정에서 RAG (Retrieval-Augmented Generation) 기법을 적용하여 검색된 문서를 기반으로 LLM이 답변을 생성하도록 만듭니다.1) 검색된 문서 + LLM 결합 방식✅ 기존 LLM 방식의 문제점LLM 단독으로 응답을 생성할 경우, 사전 학습된 데이터만 사용최신 정보가 포함되지 않아 정확성이 낮을 수 있음문맥과 관련 없는 답변이 생성될 가능성 있음✅ RAG 적용 후 기대 효과검색된 문서를 참고하여 LLM이 보다 정확한 응답 생성최신 정보를 포함할 수 있어 업데이트된 답변 제공 가능불필요한 환각(Hallucinat..
🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 3.2.3 Next.js의 데이터 페칭 전략 (App Router 방식)이번 글에서는 Next.js 13+ App Router에서 데이터를 가져오는 방법과 함께 React Query 사용 시 발생하는 No QueryClient set 오류를 해결하는 방법을 다룹니다.✅ 서버 컴포넌트 및 클라이언트 컴포넌트에서 데이터 패칭을 수행하는 최적의 방법을 설명합니다.✅ React Query에서 QueryClientProvider를 올바르게 설정하는 방법을 실습합니다.📌 1. Next.js 13+ App Router에서의 데이터 패칭 개요Next.js 13+ App Router에서는 서버 컴포넌트와 클라이언트 컴포넌트를 명확하게 구분해야 합니다.서버 사이드..
- Total
- Today
- Yesterday
- REACT
- kotlin
- 챗봇개발
- 로컬LLM
- rag
- 개발블로그
- 리액트
- 백엔드개발
- babel
- Next.js
- Ktor
- Webpack
- 관리자
- 페이지
- PostgreSQL
- nextJS
- Project
- Docker
- Page
- AI챗봇
- fastapi
- 백엔드
- Python
- 프론트엔드
- LangChain
- llm
- nodejs
- 웹개발
- til
- github
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |