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 (백엔드) ..

이번 글의 목표는 “HTTP 정의 암기”가 아니라 채팅 UI의 입력이 어디로 흘러가서 어떤 형태로 돌아오는지를 흐름으로 정리하는 것이다. 지금 포트폴리오는 프론트 구현 + GitHub 업로드까지는 됐고, 이제 채팅창에서 보낸 질문을 받아 처리하고 다시 돌려줄 서버(API) 가 필요해졌다. 그래서 오늘은 “클라이언트 → HTTP → Flask 서버 → (LLM) → 응답(JSON)” 흐름에서, 특히 Flask/HTTP 구간이 무엇을 하는지를 정리하고 실습 확인 포인트를 남긴다.[브라우저] ↓ HTTP 요청 (GET/POST) ↓ (URL / Header / Body)[Flask 서버] ↓ request 객체로 파싱 ↓ Python 함수 실행 ↓ 응답 반환[브라우저]1. ..

1. Git/GitHub1-1. Gitㅡ프로젝트의 버전관리소스코드(파일)의 변경 이력을 저장하는 시스템스냅샷: 특정 시점의 프로젝트 상태를 "사진 찍듯" 저장 (= commit)* 커밋: "프로젝트 상태(파일들의 스냅샷) + 설명(메시지) + 메타데이터(작성자/시간) + 이전 커밋과의 연결"로 이루어진 기록 단위분기Branch: 실험/기능 개발을 메인과 분리해서 안전하게 저장왜 필요한가?되돌리기 가능: 어제까지 됐는데 오늘은 안됐을 때메인에 영향 없음: 기능을 추가하다가 엎어도 됨기록으로 남음: 누가/언제/무엇을 바꿨는지1-2. GitHubㅡGit 저장소를 올려두는 클라우드 + 협업 플랫폼Git 저장소를 인터넷(원격)에 올려두는 서비스Git만 쓸 때:PC가 망가지면 기록도 끝다른 PC/팀원이 접근 불가G..

0. 목적GitHub에 업로드한 포트폴리오 프로젝트를Vercel에 배포해 실제 접속 가능한 웹사이트로 만들고,배포 과정에서 겪은 문제와 도메인 관련 구조를 기록한다.1. 개발 환경OS: WindowsEditor: CursorFramework: Next.js (App Router)진행 상: GitHub 업로드 완료 (1편) https://bytesumcookies.tistory.com/92. Vercel 배포2-1. Vercel 로그인 & GitHub 권한 승인Vercel 접속 → GitHub로 로그인Import 과정에서 GitHub 저장소 읽기 권한 필요 (Vercel 앱 설치)Only select repositories로 포트폴리오 repo만 허용2-2. Import 후 DeployFramework p..

0. 요약로컬에서 만든 Next.js 포트폴리오 프로젝트를 GitHub에 업로드하는 과정과,그 과정에서 막혔던 포인트들을 정리한다.1. 개발 환경2. GitHub 가입 & 저장소 생성3. 로컬 프로젝트를 GitHub에 올리기 3-1. Git 설치 (Windows에서 필수) 1) 에러: Git 미설치 3-2. Git으로 프로젝트 관리 시작하기 1) Git 초기화 2) 파일을 커밋 대상으로 등록 3) 첫 번째 커밋 생성 4) 에러: 커밋이 안 될 때 (Author identity unknown) 3-3. GitHub 저장소와 연결 1) 기본 브랜치 이름을 main으로 통일 2) GitHub 저장소 연결 3-4. GitHu..

HTML/CSS/JS로 “파일을 열어보는 웹”은 이해가 됐는데, Node/React/Next로 넘어오면서 라우팅·빌드·배포 같은 단어가 한꺼번에 등장해 혼란이 생겼다. 이번 글의 목표는 “정의 암기”가 아니라 “관계 정리”다. Next.js를 중심에 두고, React/Node가 각각 무엇을 담당하는지(런타임/라이브러리/프레임워크), 어디에서 실행되는지(브라우저 안/밖), 그리고 그 결과로 렌더링 방식(SSR/CSR/SSG)과 SEO가 왜 연결되는지를 하나의 흐름으로 묶어본다.1. 분류를 다시 잡기: 프레임워크 / 라이브러리 / 런타임1-1. Next.jsㅡReact 기반 프레임워크React 기반의 웹 애플리케이션 프레임워크React로 만든 UI를 "프로덕션용 웹 애플리케이션" 형태로 운영하기 위해필요한 ..

1. SPA란 무엇인가? / MPA란 무엇인가?1-1. SPA(Single Page Application)SPA : 단일 페이지로 동작하는 웹 애플리케이션처음 접속할 때 index.html과 자바스크립트를 로드하고, 이후 화면 전환은 전체 새로고침 없이 필요한 부분만 다시 그리는 방식이다.특징화면 이동 : 새로고침 없이 부분 갱신라우팅 : 프론트엔드에서 처리하는 경우가 많음데이터 갱신 : 보통 API 호출 결과로 화면을 다시 그림전체를 다시 불러오는 게 아니기 때문에 데이터 소모가 적음장점UX : 화면 전환이 자연스럽고 빠르게 느껴짐개발 구조 : 프론트/백엔드 분리(API 중심)에 적합함단점초기 로딩 : 번들이 커지면 무거울 수 있음검색엔진에 노출이 잘 안 될 수 있음 (SSR/SSG로 보완 가능)보완 ..

0. 웹 개발 구조웹 페이지를 만들 때 크게 3가지 기술을 이용한다.HTML = 구조/의미(뼈대)CSS = 모양/배치(디자인)JS = 동작/상호작용(기능)이 글(2편)은 마지막 단계인 JS(동작/상호작용) 중에서도 기본문법 + DOM 조작을 정리한다.1. 웹에서 JS의 역할HTML/CSS로 화면을 만들었다면,JavaScript는 사용자 행동(클릭/입력 등)에 반응해 화면을 바꾸는 역할을 한다.즉, “동작”을 담당한다.2. JS 기본 문법DOM을 조작하려면 아래 문법이 필요하다.변수 : 값 저장/재사용 (let, const)조건문 : 상황 분기 (if)반복문 : 반복 처리 (for, while)함수 : 동작을 묶어서 재사용 (function, 화살표 함수)배열/객체 : 여러 데이터를 구조적으로 관리 ([]..

0. 웹 개발 구조웹 페이지를 만들 때 크게 3가지 기술을 이용한다.HTML = 구조/의미(뼈대)CSS = 모양/배치(디자인)JS = 동작/상호작용(기능)이 글(1편)은 그중 HTML(시맨틱 구조)와 CSS(선택자/레이아웃)까지 정리한다.1. 시맨틱 태그(Semantic Tag)란?시맨틱 태그는 디자인 목적의 태그가 아니라, HTML 문서에서 각 영역이 무슨 역할/의미인지(구조)를 명확하게 표현해 브라우저·검색엔진·보조기기(스크린리더 등)가 콘텐츠를 더 잘 이해하도록 돕는 태그다.메뉴/본문/글 처럼 구조를 더 정확하게 이해하게 한다.대표 태그는 다음과 같다. : 상단 영역(로고/타이틀 등) : 메뉴/내비게이션 링크 묶음 : 페이지의 핵심 본문(보통 1개) : 주제별 구역(섹션이 필요할 때) : 독립적으로..