01 BookShelf 프로젝트 지도: 기능 목록 너머의 아키텍처 읽기 BookShelf를 단순 CRUD 화면이 아니라 React 화면, json-server 데이터 흐름, OpenAI 표지/태그, 검색/추천 UI가 결합된 frontend 제품으로 읽는다. KT AIVLE School
Mini Project 4
React, json-server, OpenAI 표지·태그, 검색·추천 UI로 완성한 BookShelf 프론트엔드 미니프로젝트 사례 산문
- 원고
- 8
- 8월 25일-9월 24일
- 0편
01 BookShelf 프로젝트 지도: 기능 목록 너머의 아키텍처 읽기 BookShelf를 단순 CRUD 화면이 아니라 React 화면, json-server 데이터 흐름, OpenAI 표지/태그, 검색/추천 UI가 결합된 frontend 제품으로 읽는다. 
02 BookShelf: React State로 연결된 화면 전환과 데이터 흐름 App.jsx와 page components를 기준으로 BookShelf 화면 흐름이 React state와 props callback으로 연결되는 방식을 이해한다. 
03 json-server와 db.json의 역할: 프론트엔드 데이터 레이어의 시작 json-server와 db.json이 4차 frontend 개발에서 REST 데이터 흐름을 제공했지만, 5차 backend 계약과 persistence 질문을 남기는 중간 층이라는 점을 이해한다. 
04 AI 표지 생성, 화면 미리보기부터 저장까지: 프론트엔드 데이터 흐름 이해하기 coverService.js와 AiCoverPanel을 기준으로 OpenAI 이미지 응답이 BookShelf 화면에서 사용자가 확인할 수 있는 표지 데이터가 되는 과정을 이해한다. 
05 BookShelf 자동 태그: 장식에서 구조적 데이터로 OpenAI tag generation이 단순 장식이 아니라 추천 알고리즘과 장르/태그 기반 탐색을 돕는 구조적 데이터가 되는 이유를 이해한다. 
06 BookShelf, 탐색 가능한 책장의 비밀 BookListPage와 BookDetailPage를 기준으로 검색/필터/유사 추천이 도서 데이터와 사용자 탐색을 연결하는 방식을 이해한다. 
07 localStorage 기반 개인화 추천의 작동 원리 preferenceService와 recommendationService를 기준으로 localStorage 선호 기록이 추천 점수와 메인 추천 줄로 이어지는 방식을 이해한다. 
08 잘 도는 프론트엔드가 남기는 백엔드 질문: 책임 경계의 확장 4차의 완성점과 한계를 동시에 읽고, 5차가 같은 기능 반복이 아니라 책임 경계 확장이라는 점을 준비한다.