TwentyTwentyOne

로컬 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 챗봇 – 4.1.1 JWT 기반 인증 방식이번 글에서는 JWT(JSON Web Token) 기반 인증 방식의 개념과 구조, 그리고 Next.js에서 JWT를 활용하는 방법을 다룹니다.✅ JWT의 기본 개념을 이해하고, Access Token과 Refresh Token의 차이를 학습합니다.✅ Next.js API Route에서 JWT 인증을 구현하는 방법을 실습합니다.📌 1. JWT란?✅ 1.1 JWT 개념 및 구조JWT(JSON Web Token)는 토큰 기반 인증 방식으로, 클라이언트와 서버 간 인증 정보를 안전하게 주고받을 수 있도록 설계되었습니다.📌 JWT는 3가지 주요 구성 요소로 이루어져 있습니다.Header.Payload.Signature예제..

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – React Query와 Zustand의 차이점 및 활용법이번 글에서는 Next.js에서 Zustand와 React Query를 비교하고, 각 라이브러리를 어떻게 활용하면 좋은지를 다룹니다.✅ Zustand와 React Query의 차이점을 이해하고, 함께 사용하는 방법을 학습합니다.✅ Next.js의 서버 상태와 클라이언트 상태를 효율적으로 관리하는 전략을 정리합니다.📌 1. Zustand vs React Query 비교Zustand와 React Query는 Next.js에서 상태를 관리하는 방식이 다릅니다.각각의 용도를 정확히 이해하면, 최적의 상태 관리 전략을 수립할 수 있습니다.✅ 1.1 주요 차이점 비교기능 Zustand React Que..

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Zustand를 활용한 전역 상태 관리이번 글에서는 Next.js에서 Zustand를 사용하여 전역 상태를 관리하는 방법을 다룹니다.✅ Zustand의 기본 개념을 이해하고, Next.js 프로젝트에서 적용하는 방법을 학습합니다.✅ 서버 컴포넌트와 클라이언트 컴포넌트 간 Zustand의 사용법을 익힙니다.📌 1. Zustand란?Zustand는 가볍고 빠른 전역 상태 관리 라이브러리로, Redux보다 간편하며 성능이 뛰어납니다.📌 Zustand의 주요 특징:✅ 사용이 간편 – Redux보다 코드가 간결함✅ 불필요한 리렌더링 최소화 – 성능 최적화✅ 서버 컴포넌트(SC) & 클라이언트 컴포넌트(CC)에서 모두 사용 가능✅ TypeScript 완벽..

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Next.js에서의 상태 관리 개요이번 글에서는 Next.js에서의 상태 관리 개념과 전역 데이터 관리 전략을 다룹니다.✅ 클라이언트 상태와 서버 상태의 차이를 이해하고, 전역 상태 관리가 필요한 이유를 살펴봅니다.📌 1. Next.js에서의 상태 관리 개요Next.js는 React 기반의 프레임워크이므로 **상태 관리(State Management)**가 필수적입니다.상태 관리는 크게 클라이언트 상태(Client State) 와 서버 상태(Server State) 로 나눌 수 있습니다.✅ 1.1 클라이언트 상태 (Client State)란?클라이언트 상태는 사용자의 인터페이스(UI)에서 즉시 반응해야 하는 상태를 의미합니다.📌 예제 – 클라이..

🚀 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에서는 서버 컴포넌트와 클라이언트 컴포넌트를 명확하게 구분해야 합니다.서버 사이드..

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 페이지 및 레이아웃 구성이번 글에서는 Next.js에서 페이지를 구성하는 방법과 layout.tsx를 활용한 공통 레이아웃 적용 방법을 다룹니다.✅ SEO 최적화를 위한 metadata 설정과 함께, layout.tsx를 사용하여 재사용 가능한 레이아웃을 구성합니다.📌 1. Next.js에서 페이지 구성하기Next.js는 파일 기반 라우팅 시스템을 사용하여 페이지를 자동으로 생성합니다.✅ app 디렉토리 내에 각각의 페이지 파일을 추가하면 해당 경로로 자동 매핑됩니다.✅ 1.1 기본적인 페이지 구성📌 예제 – 페이지 구조 (app 디렉토리 사용)/app ├── layout.tsx (공통 레이아웃) ├── page.tsx ..

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 3.2.1 Next.js의 라우팅 시스템 개요이번 글에서는 Next.js의 파일 기반 라우팅 시스템을 다룹니다.✅ Next.js의 pages 및 app 디렉토리를 비교하고, 동적 라우팅과 중첩 라우팅을 설명합니다.📌 1. Next.js의 파일 기반 라우팅 시스템Next.js는 기존의 React Router와 달리, **파일 기반 라우팅 시스템(File-based Routing System)**을 사용합니다.즉, 프로젝트의 pages 또는 app 디렉토리 내에 파일을 생성하면 자동으로 해당 경로에 맞는 페이지가 생성됩니다.✅ 1.1 Next.js 라우팅 방식 비교Next.js 13부터는 **새로운 App Router(app 디렉토리)**와 기존의 ..