01 4차 BookShelf에서 5차 백엔드 시스템으로: 확장 지도의 핵심 이해 4차 frontend 경험과 5차 backend 확장 책임을 분리해 보고, json-server 대체, API 계약, JPA, Supabase, favorites, 배포가 왜 새 주제로 나뉘어야 하는지 이해한다. KT AIVLE School
Mini Project 5
4차 BookShelf frontend를 Spring Boot API, JPA, Supabase Auth/PostgreSQL, 즐겨찾기, 배포 구조로 확장한 5차 미니프로젝트 사례 산문
- 원고
- 11
- 8월 25일-9월 24일
- 0편
01 4차 BookShelf에서 5차 백엔드 시스템으로: 확장 지도의 핵심 이해 4차 frontend 경험과 5차 backend 확장 책임을 분리해 보고, json-server 대체, API 계약, JPA, Supabase, favorites, 배포가 왜 새 주제로 나뉘어야 하는지 이해한다. 
02 json-server에서 Spring Boot API 계약으로: 백엔드 전환의 진짜 의미 json-server의 편리한 개발 흐름과 Spring Boot API 계약의 차이를 이해하고, URL/method/payload/response가 backend 책임으로 고정되는 과정을 읽는다. 
03 React 앱 백엔드 연결: VITE_API_BASE_URL과 서비스 정규화 5차 `Frontend/src/bookService.js`와 `favoriteService.js`를 기준으로 React 화면이 어떻게 backend API 주소와 연결되는지 이해한다. 
04 책 카드, 영속 모델로 변환되는 과정 완전 정복 Book Entity의 필드와 JPA 설정을 기준으로 frontend 데이터가 backend persistence model로 바뀌는 과정을 이해한다. 
05 CRUD 요청의 생명주기: Controller, Service, Repository, 그리고 Frontend HTTP 요청이 Controller에서 시작해 Service의 규칙과 Repository의 DB 접근을 거쳐 React 화면 변화로 돌아오는 전체 chain을 이해한다. 
06 AI 표지 및 태그 저장 경계 이해하기: 4차와 5차의 변화 frontend의 OpenAI 생성 흐름과 backend의 cover/tags storage endpoint를 구분하고, AI 생성물이 Book domain record가 되는 순간을 이해한다. 
07 CORS와 환경변수: 런타임 경계를 잇는 아키텍처적 도구 CORS와 환경변수를 오류 해결 팁이 아니라 frontend/backend/deployment boundary를 명시하는 장치로 이해한다. 
08 신뢰할 수 있는 백엔드 API: 실패와 무결성의 구조 404/400 JSON error contract와 transaction boundary가 happy-path CRUD를 신뢰 가능한 backend API로 바꾸는 이유를 이해한다. 
09 Supabase Auth ID와 백엔드 사용자 관계 Supabase Auth가 frontend 사용자 상태를 제공하고, backend는 전달받은 userId를 사용자별 relation 저장에 쓰는 구조를 정확히 이해한다. 
10 즐겨찾기 기능의 해부: 개인화된 서비스의 탄생 FavoriteController, FavoriteService, FavoriteRepository, frontend favoriteService/App.jsx를 기준으로 favorite relation과 optimistic UI 흐름을 이해한다. 
11 배포와 트러블슈팅을 통해 5차 미니프로젝트의 완성도 판단하기 README/PPT/API 명세/배포 환경/troubleshooting evidence를 기준으로 5차 미니프로젝트의 완성도를 읽는다.