TwentyTwentyOne

🚀 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 디렉토리)**와 기존의 ..

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 프로젝트 설정 및 필수 패키지 설치이번 글에서는 Next.js 프로젝트를 설정하고 필수 라이브러리를 설치하는 과정을 다룹니다.✅ Next.js 개발 환경을 구성하고, Tailwind CSS 및 필요한 패키지를 설정하여 프로젝트를 시작합니다.📌 1. Next.js 개발 환경 구성✅ 1.1 Next.js 프로젝트 생성Next.js 프로젝트를 생성하려면 create-next-app을 사용합니다.아래 명령어를 실행하여 새로운 Next.js 프로젝트를 생성합니다.npx create-next-app@latest my-project --typescript --eslint --app설치가 완료되면 프로젝트 디렉토리로 이동합니다.cd my-project📌 2...

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Next.js 개요 및 특징이번 글에서는 Next.js의 개념과 특징, 그리고 React와의 차이점을 설명합니다.✅ Next.js가 무엇인지 이해하고, 기존 React와 비교하여 어떤 점이 다른지 살펴보겠습니다.📌 1. Next.js란?✅ Next.js 개념Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원하는 것이 핵심 특징입니다.Vercel에서 개발하였으며, SEO 최적화, 성능 개선, 개발 편의성을 강화한 React의 업그레이드 버전으로 볼 수 있습니다.✅ Next.js의 주요 특징서버 사이드 렌더링 (SSR) → 서버에서 데이터를 받아 페이지를 렌더링한 후 클라이언트에 전달정적..