ByteSumCookies

1. 전체 시스템 구조사용자 입력 │ ▼프론트엔드 (Next.js / React 채팅 UI) │ │ fetch로 /api/chat 요청 전송 ▼백엔드 (Flask API 서버) │ │ 사용자 메시지 정리 + 프롬프트 생성 │ Gemini API 호출 ▼AI 모델 (Gemini) │ ▼백엔드 (Flask JSON 응답 반환) │ ▼프론트엔드 (React 채팅창 렌더링)프론트엔드는 사용자의 입력을 받고, 백엔드에 요청을 보내고, 돌아온 응답을 화면에 표시한다.백엔드는 프론트엔드가 보낸 요청을 받아 내용을 정리한 뒤, AI API를 호출하고 그 결과를 다시 JSON 형태로 프론트엔드에 돌려준다.AI 모델은 실제로 답변을 생성하는 역할을 한다..

0. 목표브라우저에서 아래 URL을 입력하면, 서버가 Gemini API를 호출해 받은 답변을 화면에 출력한다.http://localhost:5000/sendMessage?message=너에 대해서 알려줘1. 프로젝트 구조 잡기 (프론트/백 분리)왜 분리했나포트폴리오(Next.js) 프론트와 Flask 백엔드는 성격이 달라서 한 폴더에 섞으면 .env, 배포, 실행 방식이 꼬이기 쉽다.그래서 PORTFOLIO-TEST 아래에 backend/를 만들어 백엔드를 분리했다.최종 구조PORTFOLIO-TEST/ app/ # Next.js (프론트) components/ public/ package.json ... backend/ # Flask (백엔드) ..