TwentyTwentyOne

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

📌 스프린트 계획 및 일정 관리1. 스프린트란?스프린트(Sprint)는 애자일 개발에서 일정한 주기로 진행되는 짧은 개발 기간을 의미합니다.일반적으로 1~4주 단위로 진행되며, 특정 기능을 완성하는 것을 목표로 합니다.쇼핑몰 프로젝트에서는 "회원가입", "상품 검색", "장바구니" 같은 기능을 스프린트 단위로 개발하고, 주기적으로 배포합니다.✅ 스프린트의 핵심 목표:정해진 시간 내에 완료 가능한 작업 단위로 분할피드백을 반영하여 지속적으로 개선출시 가능한 기능을 점진적으로 추가2. 스프린트 주기 및 목표 설정2.1. 스프린트 주기 설정💡 일반적인 스프린트 주기:1주(초단기): 긴급 개선, 버그 수정2주(표준): 대부분의 애자일 팀이 사용하는 기본 주기4주(장기): 복잡한 기능 개발 시 활용🔹 우리의..

📌  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 채팅봇 만들기6.2 프론트엔드 배포 (Vercel)이제 SvelteKit으로 개발한 프론트엔드를 배포하여어디서나 AI 챗봇을 사용할 수 있도록 Vercel을 활용하여 배포하겠습니다.1) Vercel을 사용하는 이유✅ Vercel의 장점손쉬운 배포 → GitHub와 연동하여 자동 배포 가능서버리스(Serverless) 환경 지원 → API 호출만으로 백엔드와 통신 가능빠른 글로벌 배포 → CDN(Content Delivery Network) 적용2) Vercel 가입 및 환경 설정✅ ① Vercel 가입 및 프로젝트 생성Vercel 공식 사이트에 접속GitHub 계정과 연결"New Project" 버튼 클릭SvelteKit 프로젝트 선택 후 Import배포 설정 페이지에서..

로컬 LLM + RAG 기반 AI 채팅봇 만들기5.2 API 테스트 (Postman 사용)이제 RESTful API가 정상적으로 동작하는지 검증하기 위해,Postman을 활용하여 API 테스트를 진행하겠습니다.1) API 테스트의 중요성✅ API 테스트가 필요한 이유프론트엔드와 백엔드가 정상적으로 연동되는지 확인WebSocket과 RESTful API가 제대로 동작하는지 검증API 요청 및 응답 데이터를 예상대로 반환하는지 테스트2) Postman 설치 및 기본 설정✅ ① Postman 다운로드 및 설치Postman 공식 웹사이트: https://www.postman.com/운영체제에 맞는 버전을 다운로드하고 설치3) Postman을 이용한 API 테스트✅ ① AI 챗봇 메시지 전송 테스트 (POST /..

로컬 LLM + RAG 기반 AI 채팅봇 만들기4.2 챗봇 UI 설계 및 Tailwind CSS 적용이제 SvelteKit을 활용하여 사용자가 AI 챗봇과 직접 상호작용할 수 있는 UI를 설계하고 구현합니다.이번 단계에서는 채팅 인터페이스의 디자인을 정의하고, Tailwind CSS를 적용하여 스타일을 구성합니다.1) 챗봇 UI 설계 개요✅ 요구사항 정의1️⃣ 실시간 채팅 인터페이스 구현2️⃣ 사용자가 입력한 메시지를 WebSocket을 통해 서버로 전송3️⃣ 서버에서 AI 응답을 받아 채팅 화면에 표시4️⃣ Tailwind CSS를 활용하여 UI 스타일링✅ 챗봇 UI 와이어프레임┌──────────────────────────┐│ AI Chatbot │├──────────────..

로컬 LLM + RAG 기반 AI 채팅봇 만들기4.1 SvelteKit 소개 및 환경 설정이제 백엔드 구현을 완료했으므로,프론트엔드에서 사용자가 직접 AI 챗봇과 상호작용할 수 있도록 UI를 구축해야 합니다.이번 단계에서는 SvelteKit을 활용한 프론트엔드 환경 설정을 진행하겠습니다.1) SvelteKit이란?✅ SvelteKit 개요SvelteKit은 Svelte 기반의 풀스택 프레임워크로,빠른 성능과 간단한 코드 구조를 제공하여 인터랙티브 웹 애플리케이션을 쉽게 개발할 수 있도록 지원합니다.✅ 왜 SvelteKit을 선택했는가?컴파일 기반 프레임워크 → 실행 속도가 빠르고, 성능 최적화가 쉬움반응형(Reactivity) 지원 → 상태 관리가 간편하며, 사용하기 쉬움SSR(Server-Side Re..

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 만들기 – FastAPI 프로젝트 구조 및 설정이 글에서는 FastAPI 프로젝트 구조를 설계하고, 환경 변수 설정과 PostgreSQL 연결을 설정하는 과정을 다룹니다.✅ 프로젝트 폴더 구조 → .env 설정 → PostgreSQL 연결 → FastAPI의 Dependency Injection 활용 순서로 진행됩니다.📌 1. FastAPI 프로젝트 폴더 구조 구성FastAPI 프로젝트의 구조를 체계적으로 구성하면 유지보수와 확장성이 쉬워집니다.다음과 같은 폴더 구조를 사용합니다.fastapi-llm-chatbot/│── app/│ ├── api/ # API 라우터 관리│ │ ├── v1/│ │ │ ├..