TwentyTwentyOne

📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 - 데이터 흐름 및 아키텍처 개요1. 데이터 흐름이란?데이터 흐름(Data Flow)이란 사용자가 애플리케이션을 이용하는 과정에서 데이터가 이동하는 경로를 의미합니다.쇼핑몰 애플리케이션에서는 사용자 → 프론트엔드 → 백엔드 → 데이터베이스의 흐름으로 데이터가 이동하며, 각 단계에서 데이터가 어떻게 처리되는지 이해하는 것이 중요합니다.✅ 데이터 흐름을 명확하게 정의하면:API 설계 및 데이터베이스 모델링이 수월해짐백엔드와 프론트엔드 간의 역할을 분명히 구분할 수 있음확장성과 유지보수성이 높은 시스템을 구축할 수 있음2. 쇼핑몰 프로젝트의 데이터 흐름2.1. 사용자 요청 및 응답 흐름💡 사용자가 ..

📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 - 프로젝트 요구사항 분석1. 프로젝트 요구사항 분석이란?요구사항 분석은 웹 애플리케이션에서 필요한 기능과 목표를 정의하는 과정입니다.쇼핑몰 프로젝트에서는 사용자가 어떤 기능을 필요로 하는지, 시스템이 어떤 역할을 해야 하는지를 명확하게 정리해야 합니다.✅ 요구사항 분석의 핵심 목표:사용자 니즈 파악 및 기능 정의시스템 아키텍처 설계 방향 결정우선순위 기반 MVP(최소 기능 제품) 선정2. 쇼핑몰 필수 기능 정의2.1.1. 사용자 관련 기능✔ 회원가입 및 로그인 (이메일, 소셜 로그인)✔ 사용자 프로필 관리 (비밀번호 변경, 정보 수정)✔ 장바구니 및 주문 내역 관리2.1.2. 상품 관련 기능✔..

📌  NestJS + Prisma + Next.js의 역할 및 장점1. NestJS + Prisma + Next.js의 조합이란?웹 애플리케이션을 개발할 때, 백엔드와 프론트엔드의 역할을 명확하게 분리하고, 효율적인 데이터 관리를 수행하는 것이 중요합니다.이 책에서는 NestJS(백엔드) + Prisma(데이터베이스) + Next.js(프론트엔드) 조합을 사용하여 확장 가능하고 유지보수하기 쉬운 쇼핑몰 애플리케이션을 개발할 것입니다.2. NestJS란? (백엔드 프레임워크)2.1. NestJS 개념 및 특징NestJS는 Node.js 기반의 진보된 백엔드 프레임워크로, 모듈 시스템을 활용하여 확장성과 유지보수성을 극대화할 수 있습니다.✅ TypeScript 기반 - 정적 타입 체크를 통한 안전한 개발 ..

📌 Monolithic vs. Microservices 아키텍처1. 소프트웨어 아키텍처란?소프트웨어 아키텍처는 애플리케이션의 구성 요소, 상호 작용 방식 및 데이터 흐름을 정의하는 구조입니다.웹 애플리케이션을 개발할 때 가장 중요한 선택 중 하나는 Monolithic(모놀리식)과 Microservices(마이크로서비스) 아키텍처 중 어느 것을 선택할지입니다.2. Monolithic 아키텍처란?2.1. Monolithic(모놀리식) 아키텍처 개념모놀리식 아키텍처는 애플리케이션의 모든 기능이 하나의 코드베이스와 하나의 애플리케이션 내에서 동작하는 구조입니다.즉, 클라이언트 요청을 처리하는 백엔드, 데이터베이스, API, 비즈니스 로직이 하나의 서비스에 포함됩니다. 2.2. Monolithic 아키텍처의 특..

📌 웹 애플리케이션의 기본 개념1. 웹 애플리케이션이란?웹 애플리케이션(Web Application)은 웹 브라우저를 통해 접근할 수 있는 소프트웨어를 의미합니다. 사용자는 별도의 설치 없이 인터넷을 통해 웹 애플리케이션에 접속할 수 있으며, 클라이언트(프론트엔드)와 서버(백엔드)로 구성됩니다.1.1. 웹 애플리케이션의 정의웹 애플리케이션은 인터넷을 통해 사용자와 상호작용하는 소프트웨어로, 브라우저 기반의 서비스입니다. 일반적으로 데이터베이스, 서버 로직, UI 렌더링을 포함하며, 사용자가 요청을 보내고 서버가 응답을 처리하는 구조를 가집니다.예제: Gmail, Facebook, Twitter, Amazon, Google Docs 등2. 웹 애플리케이션의 핵심 구성 요소2.1. 클라이언트 (Client..

로컬 LLM + RAG 기반 AI 채팅봇 만들기4.3 WebSocket을 활용한 실시간 채팅 기능 구현이제 프론트엔드에서 사용자가 입력한 메시지를 WebSocket을 통해 백엔드(Ktor)로 전송하고,AI 챗봇의 응답을 받아 실시간으로 화면에 표시하는 기능을 구현하겠습니다.1) WebSocket을 활용한 실시간 채팅 흐름1️⃣ [사용자] 웹 UI에서 메시지를 입력 2️⃣ [프론트엔드] WebSocket을 통해 메시지를 백엔드(Ktor)로 전송 3️⃣ [백엔드] AI 챗봇이 메시지를 받아 LLM 모델에 요청 4️⃣ [백엔드] LLM 응답을 받아 WebSocket을 통해 클라이언트로 전송 5️⃣ [프론트엔드] AI 응답을 받아 채팅 UI에 표시 2) WebSocket을 통한 메시지 전송 및 응답 처..

로컬 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) 실시간 대화 흐름 개..