[알토르] # 15 이력서 기반 Ai챗봇 채팅창 페이지 만들기

Hyungjun·2024년 6월 30일

알토르

목록 보기

17/23

Mission

Frontend - Backend api연동
Frontend 코드 vercel에 연동해보기
vercel에 구매한 도메인 연결
서브도메인이 무엇인지 찾아보고
1. api.도메인.com을 aws ec2에 연결시켜놓기

배경지식 (logic)

front 는 vercel에 배포, back인 flask는 nginx 서브도메인으로 배포

api 요청을 어떻게 하나

submit 버튼을 눌리면 이벤트리스너를 이용해 post 요청을 실시

flask 코드 (/sendMessage) Post 방식으로 next.js에서 요청받은 JSON의 질문을 빼서 assistant api로 답변을 요청한다.
flask (/sendMessage) 는 답변은 JSON 파일 형식으로 return한다.
next.js 코드는 useState를 이용해서 그때그때 재랜더링 되도록 짠다.
답변을 message 내용으로 업데이트하여 화면에 출력되도록 만든다.

실습

#1 airesume page 구현

먼저 JSX 뼈대를 만들어 준다.

message state는 배열을 저장하기에 map으로 하나하나씩 넘어가며 출력한다.
submit 버튼을 누르면 question이 업데이트되는 함수를 호출한다.


  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">
        Chat with Resume-based AI chatbot
      </h1>
      <div className="mb-4">
        <div className="border border-gray-300 p-4 h-96 overflow-y-scroll">
          {messages.map((msg, index) => (
            <div
              key={index}
              className={`my-2 ${
                msg.user === "you" ? "text-right" : "text-left"
              }`}
            >
              <strong>{msg.user === "you" ? "You" : "Bot"}:</strong> {msg.text}
            </div>
          ))}
        </div>
      </div>
      <form onSubmit={handleSubmit} className="flex">
        <input
          type="text"
          value={question}
          onChange={(e) => setQuestion(e.target.value)}
          placeholder="저에 대해 궁금한 점을 검색해 주세요."
          className="flex-1 p-2 text-lg border border-gray-400 rounded-l"
          required
        />
        <button
          type="submit"
          className="p-2 text-lg bg-green-500 text-white rounded-r"
        >
          Send
        </button>
      </form>
    </div>
  );
};

export default Airesume;

state로 question과 messages를 사용한다.

submit 이벤트가 발생하면 handleSubmit 함수가 호출된다.
가장 먼저 입력한 메세지가 업데이트되면서 화면에 출력된다.
입력한 값인 question으로 새로운 메시지로 업데이트 해주고 back으로 post 방식으로 api 요청을 한다.
JSON 파일로 이루어진 답변을 받아와서 답변으로 메세지를 업데이트 해주는 순간 화면에 답변 메세지가 출력된다.

"use client";
import { useState } from "react";

const Airesume = () => {
  const [question, setQuestion] = useState("");
  const [messages, setMessages] = useState([]);

  const handleSubmit = async (event) => {
    event.preventDefault();

    // 사용자 메시지를 추가
    const newMessages = [...messages, { user: "you", text: question }];
    setMessages(newMessages);
    setQuestion("");

    // 서버로 질문 전송
    const res = await fetch("http://localhost:5001/sendMessage", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ question }),
    });

    const data = await res.json();
    // 서버 응답을 추가
    setMessages([...newMessages, { user: "bot", text: data.response }]);
    
  };

*질문 : 비동기 처리로 setQuestion을 해도 fetch하고나서 업데이트가 된다. setQuestion이 되기 전에 fetch가 완료됨.

중요 포인트

질문을 할때 JSON 파일의 key 이름이 동일해야 front와 back에서 데이터를 주고받을 수 있다.

question과 responce로 key 이름을 통일시켜주었다.
CORS 해결 : back에서 CORS를 해결해 줘야함 (전 포스팅에서 이미 해결)
back과 front가 각기 다른 port에서 실행중이어야 함.
(front는 localhost:3000에서, back은 localhost:5001에서 실행중)