11. AI 챗봇 연동하기

1. 챗봇 연동 개요

이번 편에서는 GOFLEX 프로젝트에 AI 챗봇을 연동한다. 플로팅 버튼과 채팅창이 하나의 Chatbot.jsx 컴포넌트에 들어 있고, App.jsx에서 바로 사용한다.

2. 1단계 — import + 상태 변수

src/components/ 폴더 안에 Chatbot.jsx 파일을 새로 만들고 아래 코드를 입력한다. 이 파일 하나에 플로팅 버튼(화면 우하단에 떠 있는 동그란 버튼)과 채팅창이 모두 들어 있다.

1
import { useState, useRef, useEffect } from "react";
2
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3
import { faComment, faXmark } from "@fortawesome/free-solid-svg-icons";
4
import { Button } from "./UI.jsx";
5

6
const BACKEND = "https://cbot-rfcl.onrender.com/chat";
7

8
export default function Chatbot() {
9
  const [open, setOpen] = useState(false);
10
  const [messages, setMessages] = useState([
11
    { role: "bot", text: "안녕하세요! 영화에 대해 무엇이든 물어보세요" },
12
  ]);
13
  const [input, setInput] = useState("");
14
  const [loading, setLoading] = useState(false);
15
  const bottomRef = useRef(null);

1
const bottomRef = useRef(null);  // 참조 생성
2
// ...
3
<div ref={bottomRef} />          // DOM 요소에 연결
4
// ...
5
bottomRef.current                // 연결된 실제 DOM 요소

3. 2단계 — 자동 스크롤

같은 Chatbot.jsx 파일에서, const bottomRef = useRef(null) 줄 바로 아래에 이어서 작성한다. 채팅 앱을 쓸 때 새 메시지가 오면 자동으로 스크롤이 내려가는 것을 본 적이 있을 것이다. 그 기능을 만드는 코드이다.

1
  useEffect(() => {
2
    if (open) bottomRef.current?.scrollIntoView({ behavior: "smooth" });
3
  }, [messages, open]);

새 메시지가 도착하면 채팅창이 자동으로 맨 아래로 스크롤되므로, 사용자가 수동으로 내릴 필요가 없다.

4. 3단계 — 메시지 전송 함수

같은 Chatbot.jsx 파일에서, useEffect 블록 바로 아래에 이어서 두 개의 함수를 작성한다. sendMessage는 메시지를 서버에 보내고 응답을 받는 함수이고, handleKeyDown은 Enter 키를 누르면 전송하는 함수이다.

1
try {
2
  // 성공할 수도 있는 코드
3
} catch {
4
  // 실패했을 때 실행되는 코드
5
} finally {
6
  // 성공이든 실패든 반드시 실행되는 코드
7
}

5. 4단계 — JSX 렌더링

같은 Chatbot.jsx 파일에서, handleKeyDown 함수 바로 아래에 return문을 작성한다. 코드가 길기 때문에 세 부분으로 나누어 설명한다. 탭을 눌러 각 부분을 확인하면서 순서대로 이어 붙인다.

6. 5단계 — App.jsx에 연결

src/App.jsx를 수정한다. 두 곳을 변경한다.

6.1. import 추가

기존 import 영역에 한 줄을 추가한다.

1
import Chatbot from "./components/Chatbot.jsx";

6.2. return에 Chatbot 추가

<Footer /> 아래에 한 줄을 추가한다.

1
  return (
2
    <>
3
      <Header />
4
      <Outlet context={ctx} />
5
      <Footer />
6
      <Chatbot />
7
    </>
8
  );

7. 동작 확인

8. 모노레포 구조와 GitHub 올리기

8.1. 모노레포란?

이 프로젝트는 하나의 GitHub 저장소 안에 프론트엔드(frontend/)와 백엔드(backend/)가 함께 들어 있다. 이런 구조를 모노레포(Monorepo, 모노리포)라고 한다. 책 한 권에 소설과 삽화가 함께 들어 있는 것처럼, 하나의 저장소에서 두 프로젝트를 관리한다.

1
movie-2026/
2
├── frontend/          ← React 프론트엔드
3
│   ├── src/
4
│   ├── public/
5
│   ├── vite.config.js
6
│   ├── package.json
7
│   └── .env           ← TMDB API 키 (GitHub에 올리면 안 됨)
8
└── backend/           ← Python 챗봇 서버
9
    ├── main.py
10
    ├── requirements.txt
11
    └── .env           ← HuggingFace API 키 (GitHub에 올리면 안 됨)

8.2. .gitignore 설정

프로젝트 최상위 폴더(movie-2026/)에 .gitignore 파일을 만들고 아래 내용을 입력한다. 비밀 정보와 불필요한 파일이 GitHub에 올라가지 않도록 막는 역할이다.

frontend/.env
frontend/node_modules/
frontend/dist/
backend/.env
backend/.venv/
backend/__pycache__/

8.3. GitHub에 코드 올리기

1. https://github.com 에서 **New repository(뉴 리포지토리)**를 클릭하여 새 저장소를 만든다.
2. 프로젝트 최상위 폴더(movie-2026/)에서 터미널을 열고, 아래 명령어를 한 줄씩 실행한다.

1
git init
2
git add .
3
git commit -m "first commit"
4
git remote add origin https://github.com/내아이디/movie-2026.git
5
git push -u origin main

9. Render에 배포하기

Render(렌더)는 GitHub 저장소를 연결하면 코드를 자동으로 배포해 주는 무료 호스팅 서비스이다. 모노레포에서는 같은 저장소를 두 번 연결하되, 각각 다른 Root Directory(루트 디렉토리, 시작 폴더)를 지정한다.

9.1. 백엔드 배포 (Python 서버)

1. https://render.com 에 접속하여 GitHub 계정으로 로그인한다.
2. New → Web Service를 클릭한다.
3. GitHub 저장소(movie-2026)를 연결하고 아래와 같이 설정한다.

4. Environment(환경변수) 탭에서 아래 값을 추가한다.

5. Create Web Service를 클릭하면 배포가 시작된다.
6. 배포 완료 후 https://goflex-backend-xxxx.onrender.com 형태의 주소가 생성된다. 이 주소를 메모해 둔다.

9.2. Chatbot.jsx의 BACKEND 주소 변경

배포된 백엔드 주소를 Chatbot.jsx에 반영한다. src/components/Chatbot.jsx 파일을 열고 5번 줄을 수정한다.

1
const BACKEND = "https://goflex-backend-xxxx.onrender.com/chat";

xxxx 부분을 9.1에서 생성된 실제 주소로 바꾼다. 수정 후 GitHub에 다시 push 한다.

1
git add .
2
git commit -m "update backend url"
3
git push

9.3. 프론트엔드 배포 (React)

1. Render에서 New → Static Site(스태틱 사이트)를 클릭한다.
2. 같은 GitHub 저장소(movie-2026)를 다시 연결하고 아래와 같이 설정한다.

3. Environment(환경변수) 탭에서 아래 값을 추가한다.

4. Create Static Site를 클릭한다.
5. 배포 완료 후 생성된 주소(예: https://goflex-frontend-xxxx.onrender.com)로 접속하면 완성된 GOFLEX를 볼 수 있다.

9.4. SPA 리다이렉트 설정

React Router를 사용하는 SPA(싱글 페이지 애플리케이션)는 한 가지 추가 설정이 필요하다. frontend/public/ 폴더에 _redirects 파일을 만들고 아래 한 줄을 입력한다.

/*    /index.html   200

10. 자주 발생하는 에러

11. 전체 코드