금일은 개인과제를 받고 진행하였다. 카카오맵으로 특정 식장의 API를 식별, 분석하였고 API 명세서를 작성하였다.
등록 -post 전체조회-get 삭제-delete
추가로 MOCK서버까지 구축하였다. 여기까진 전날 진행한 실습과 크게 다르지않아 어렵지 않았다.
그다음은 도전과제...v0를 이용하여 맛집관리 프로그램 프론트엔드를 구현하였다. 
# 아래는 사용한 프롬프트 너는 숙련된 프론트엔드 개발자이자 UI 디자이너야. 아래 요구사항을 만족하는 웹 UI를 생성해. [기술 스택] - node 18.0.2 - npm, React(Vite) - TypeScript - Tailwind CSS - axios - 백엔드 연동 없음 (로컬 mock서버만 사용) [페이지 목적] - "나만의 맛집 리스트"를 관리하는 UI - 맛집 등록, 목록 조회, 삭제 기능을 프론트엔드에서만 구현 [전체 레이아웃] - 상단제목: 맛집 관리 - 좌측: 맛집 등록창 - 우측: 맛집 목록 보여주는 영역 [좌측 영역 – 맛집 등록창] 1. 카드 형태의 등록창 - 제목: "+ 새 맛집 등록" 2. 입력(세로 정렬) - 맛집 이름을 입력 받는 입력창 하나, 이 입력창의 레이블: 맛집 이름 - 주소를 입력 받는 입력창 하나, 이 입력창의 레이블: 주소 - 전화번호를 입력받는 입력창 하나, 이 입력창의 레이블: 전화번호 - 레이블이 카테고리인 select box 하나, 선택지는 한식, 중식, 일식, 양식, 기타 - 레이블이 평점인 select box 하나, 선택지는 1.0~5.0이고 노란색 별 아이콘으로 표기 4. 하단 버튼 - 텍스트: "맛집 등록" - 클릭 시 위에 입력값을 우측 영역 목록에 추가 ──────────────────── [우측 영역 – 맛집 목록] 1. 제목 - "맛집 목록 (N)" - N은 현재 등록된 맛집 수 2. 맛집 카드 UI - 카드 내부 구성: · 상단: 맛집 이름 + 오른쪽에 평점(노란색 별 아이콘으로 표기) · 카테고리는 작은 pill 형태 배지 · 주소 · 전화번호 3. 하단 버튼 - 텍스트: "삭제" - 빨간색 버튼, 흰색 폰트 - 클릭시 해당하는 맛집을 목록에서 삭제
처음부터 굉장히 잘나온 모습. 작동도 굉장히 잘되었다.
하지만 API와 MOCK서버 주소를 넣지않아 다시 수정. 바로 에러. 검은화면과 목록에 리스트업되지않는 에러가 번갈아가며 발생.
계속 고치다 새로 프롬프트 짜서 새 채팅창에 넣기를 열댓번 가량을 반복..
#사용한 프롬프트 너는 숙련된 프론트엔드 개발자이자 UI 디자이너야. 아래 요구사항을 만족하는 웹 UI를 생성해. [기술 스택] - node 18.0.2 - npm, React(Vite) - TypeScript - Tailwind CSS - axios - 백엔드 연동 없음 (로컬 mock서버만 사용) [페이지 목적] - "나만의 맛집 리스트"를 관리하는 UI - 맛집 등록, 목록 조회, 삭제 기능을 프론트엔드에서만 구현 ──────────────────── [API 명세 및 구조] - API 정의 파일은 반드시 `src/api/endpoints.ts`에 작성 - json파일로 첨부한 API를 활용하여 데이터를 처리할것 [Mock 서버 주소] export const API_BASE_URL ="https://c66d4aff-6bd6-49e8-9319-19a77030021b.mock.pstmn.io" ──────────────────── [전체 레이아웃] - 상단제목: 맛집 관리 - 좌측: 맛집 등록창 - 우측: 맛집 목록 보여주는 영역 ──────────────────── [좌측 영역 – 맛집 등록창] 1. 카드 형태의 등록창 - 제목: "+ 새 맛집 등록" 2. 입력(세로 정렬) - 맛집 이름을 입력 받는 입력창 하나, 이 입력창의 레이블: 맛집 이름 - 주소를 입력 받는 입력창 하나, 이 입력창의 레이블: 주소 - 전화번호를 입력받는 입력창 하나, 이 입력창의 레이블: 전화번호 - 레이블이 카테고리인 select box 하나, 선택지는 한식, 중식, 일식, 양식, 기타 - 레이블이 평점인 select box 하나, 선택지는 1.0~5.0이고 노란색 별 아이콘으로 표기 4. 하단 버튼 - 텍스트: "맛집 등록" - 클릭 시 위에 입력값을 우측 영역 목록에 추가 ──────────────────── [우측 영역 – 맛집 목록] 1. 제목 - "맛집 목록 (N)" - N은 현재 등록된 맛집 수 2. 맛집 카드 UI - 카드 내부 구성: · 상단: 맛집 이름 + 오른쪽에 평점(노란색 별 아이콘으로 표기) · 카테고리는 작은 pill 형태 배지 · 주소 · 전화번호 3. 하단 버튼 - 텍스트: "삭제" - 빨간색 버튼, 흰색 폰트 - 클릭시 해당하는 맛집을 목록에서 삭제
목록에 리스트업 되지않는건 여전하였지만 반복확인하다보니 전화번호의 필드명이 통일되지않고 call과 phone을 혼용하는것을 확인하였고 call로 통일.
이게 큰 관련이 있었을지 싶지만, id: number -> string으로 변경
v0환경에서 바로바로 피드백을 하는것엔 한계가 있다고 판단하여 로컬 환경에서 콘솔창을 통해 오류확인, v0로 전달하여 수정요청 진행함.
API는 배열을 반환하는데 현재 코드에서는 데이터를 제대로 변환하지 못하고 있음.->수정 요청
응답 데이터를 제대로 처리하지 못함.->처리 요청->문제파악을 위한 디버깅 로그 추가.
"API 응답의 data가 문자열로 오고 있네요. response.data가 이미 JSON 문자열이어서 Array.isArray()가 false를 반환하는 것입니다. API가 JSON이 아닌 텍스트로 반환하고 있어서 파싱이 필요합니다."
->수정 완료
API에서 rating:5 다음에 쉼표가 누락되었고 불필요한 link와 image를 제거.
삭제와 등록을 누르면 "삭제하시겠습니까?"등의 경고 문구는 나오지만 진행은 되지않음.->Get요청은 성공하지만 Post와 Delete가 작동하지않음.->프론트엔드에서 로컬상태로 관리하도록 수정(로컬 MOCK서버만 사용하도록 했지만 프롬프트를 잘못 작성한듯함.)->해결 정상작동
이후에는 디자인 수정.
카테고리와 평점 세로 정렬로 고정되어있던거 가로 정렬로 변경.
평점에 0.5점도 별 한개로 표시되던것 별 반개로 수정.
완성!!
웹에 대한 개념과 코드에 대한 이해도 부족으로 너무 빙빙 돌아온 것 같다. 개념과 코드에 대해 더 익숙해져야할 것 같다.
