🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – 프로젝트 설정 및 필수 패키지 설치

🚀 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. Tailwind CSS 설치 및 설정

반응형

✅ 2.1 Tailwind CSS 설치

Next.js에서 Tailwind CSS를 사용하려면 관련 패키지를 설치해야 합니다.
아래 명령어를 실행하여 @tailwindcss/postcss 및 필수 패키지를 설치합니다.

npm install tailwindcss @tailwindcss/postcss postcss

---

✅ 2.2 PostCSS 플러그인 설정

Tailwind CSS를 적용하려면 PostCSS 설정 파일을 생성해야 합니다.
프로젝트 루트에 postcss.config.mjs 파일을 만들고 아래 내용을 추가합니다.

📌 postcss.config.mjs

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

---

✅ 2.3 Tailwind CSS 가져오기

Tailwind CSS를 프로젝트에 적용하려면 전역 CSS 파일에서 Tailwind를 가져와야 합니다.
📌 src/app/globals.css 파일을 열어 아래 내용을 추가합니다.

📌 globals.css

@import "tailwindcss";

✅ 이제 Tailwind CSS를 사용할 준비가 완료되었습니다! 🚀

---

📌 3. 필수 패키지 설치

✅ 3.1 API 요청을 위한 Axios 설치

Next.js에서 FastAPI 백엔드와 연동하기 위해 Axios를 설치합니다.

npm install axios

📌 Axios 기본 설정 파일을 생성 (lib/axios.ts)

import axios from "axios";

const api = axios.create({
  baseURL: "http://localhost:8000/api/v1", // FastAPI 백엔드 주소
  headers: {
    "Content-Type": "application/json",
  },
});

export default api;

✅ 이제 백엔드 API와 연동할 준비가 되었습니다!

---

✅ 3.2 Zustand를 활용한 상태 관리 라이브러리 설치

Next.js에서는 전역 상태 관리를 위해 Zustand를 사용할 수 있습니다.

npm install zustand

📌 Zustand를 사용할 때 default export 오류 발생 해결 방법

🚀 `Module '"zustand"' has no default export 오류 해결

Zustand 최신 버전에서는 import create from 'zustand' 대신 명시적인 이름으로 import해야 합니다.

📌 전역 상태 관리 예제 (store/useStore.ts) 수정

import { create } from "zustand";

interface AppState {
  theme: "light" | "dark";
  setTheme: (theme: "light" | "dark") => void;
}

export const useStore = create<AppState>((set) => ({
  theme: "light",
  setTheme: (theme) => set({ theme }),
}));

✅ 이제 Zustand의 상태 관리 기능을 올바르게 사용할 수 있습니다! 🚀

---

✅ 3.3 ESLint 및 Prettier 설정 (코드 스타일 유지)

Next.js는 기본적으로 ESLint를 지원하지만, Prettier와 함께 사용하여 코드 스타일을 통일하는 것이 좋습니다.

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

📌 .eslintrc.json을 수정하여 Prettier와 함께 사용하도록 설정합니다.

{
  "extends": ["next", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  }
}

📌 prettier.config.js 파일을 생성합니다.

module.exports = {
  singleQuote: true,
  semi: false,
  trailingComma: "es5",
  printWidth: 80,
};

✅ 이제 코드 스타일이 자동으로 포맷팅됩니다! 🚀

---

📌 4. 프로젝트 실행 및 확인

✅ 4.1 개발 서버 실행

아래 명령어를 실행하여 Next.js 프로젝트를 실행합니다.

npm run dev

✅ http://localhost:3000에서 Next.js 애플리케이션이 실행됩니다.

---

📌 5. Tailwind CSS 테스트하기

Tailwind CSS가 정상적으로 적용되었는지 확인하려면 page.tsx에 Tailwind의 클래스를 추가해 봅니다.

📌 src/app/page.tsx

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  );
}

✅ 이제 Tailwind CSS가 정상적으로 적용됩니다! 🚀

---

📌 6. 결론 및 다음 단계

✅ Next.js 프로젝트를 생성하고 필수 패키지를 설치하였습니다.
✅ Tailwind CSS를 올바르게 설정하고 적용하였습니다.
✅ Zustand의 default export 오류를 해결하고, 상태 관리를 설정하였습니다.
✅ Axios, Zustand 등을 설정하여 API 연동을 준비하였습니다.

🚀 다음 글에서는 "3.1.3 Tailwind CSS 및 UI 라이브러리 설정"을 진행합니다!