블로그 주인장은 프론트엔드를 다룰 줄 모른다.
하지만 간단한 프론트엔드라면 ai, 그 중에서도 v0라는 모델이 아주 잘 만들어준다고 해서 간단한 맛집 리스트 관리 프로젝트의 프론트엔드를 제작해, POSTMAN mok 서버에 연동하여 동작해보려고 한다.
v0에 프롬프트 입력해보기
프론트엔드 UI를 만들어줘
프로그램 이름은 맛집 관리이고 이름 밑에 맛집 리스트 관리라고 부제를 달아줘
큰 기능은 맛집 등록, 전체 목록 조회야. 이 두 기능은 탭을 통해 UI를 따로따로 제공하도록 해줘.
맛집 등륵 UI는 맛집 이름, 주소, 전화 번호, 카테고리, 평점을 유저한테 입력 받을거야.
맛집 이름, 주소, 전화 번호는 유저한테 텍스트로 입력을 받을 거고, 카테고리는 선택창을 통해 유저가
선택하는데 선택지는 한식, 중식, 일식, 양식, 기타 이렇게 제공하고, 평점도 선택창을 통해서 별점을
1~5점 중 선택할 수 있도록 만들어줘. 모든 정보를 입력한 뒤 맛집 등록 버튼을 누르면 맛집이 등록되었다는
간단한 팝업창을 띄운 뒤, 해당 정보들을 정리해서 카드로 만들어서 전체 목록 조회에서 보여줘.
전체 목록 조회는 등록된 모든 맛집을 카드 형태로 보여주면 돼. 이 화면에서는 맛집의 카테고리와
이름, 평점만 보이게 해줘. 페이지네이션 해서 한 페이지에 5개씩 보여줘.
카드를 유저가 누르면 전화번호랑 주소를 포함해서 모든 정보를 보여주고 밑에 맛집 삭제 버튼을 만들어줘.
그 버튼을 누르면 정말 삭제하시겠습니까? 라는 팝업창이 나오는데 그 팝업창에 확인, 취소 버튼을 만들어줘.
확인을 누르면 그 맛집 카드를 삭제해줘
위와 같이, v0에게 최대한 자세히 요청을 하면
화면에 자신이 생성한 UI를 띄워주는데, 프롬프트에 요구한대로 아주 잘 작동한다.
내 프로젝트로 가져오기
이 프로젝트를 내 pc에서 실행하기 위해서
1. node.js를 설치 및 환경변수 세팅
2. ai가 작성해준 프로젝트를 zip파일로 다운로드
3. intelliJ에서 프로젝트 열기로 해당 파일을 열어줌
4. 터미널에 npm install 입력
5. npm run dev를 입력
6. 화면에 출력된 주소를 클릭
순서대로 수행하면 된다.
첫 번째 트러블 슈팅
그런데 [6. 화면에 출력된 주소를 클릭]을 하는 순간, GENERATING is not defined 라는 에러와 함께 컴파일 에러가 났다.
page.js라는 파일에 있는 GENERATING이라는 코드에서 컴파일이 실패한 것이다.
챗GPT를 이용해 트러블 슈팅을 해봤다.
v0를 통해서 프론트엔드를 만들었는데, 이걸 ZIP으로 다운 받아서 압축을 풀고
인텔리제이로 실행해서 npm으로 실행했더니 GENERATING is not defined이라는
에러와 함께 컴파일에 실패했어. 어떻게 해야 정상적으로 실행될까
라고 물어봤더니, 대체로 GENERATING이 선언되지 않고 사용된 것 같다는 의견을 제시하며 에러가 발생한 파일명과 에러 코드를 요청했다. GENERATING이라는 코드가 프레임워크나 외부에서 정의되어 쓰는 코드는 아닌 것으로 보인다.
page.js에서 에러가 발생했어. 에러는 아래와 같아
ReferenceError: GENERATING is not defined at eval (app\page.tsx:1:1) at <unknown> (rsc)/./app/page.tsx (C:\Users\wjdal\Downloads\restaurant-management-ui (1)\.next\server\app\page.js:43:1) > 1 | GENERATING | ^ 2 | ⨯ ReferenceError: GENERATING is not defined at eval (app\page.tsx:1:1) at <unknown> (rsc)/./app/page.tsx (C:\Users\wjdal\Downloads\restaurant-management-ui (1)\.next\server\app\page.js:43:1) > 1 | GENERATING | ^ 2 | { page: '/' }
위와 같이 에러 파일과 코드를 알려줬더니, page.tsx 파일이 정상적으로 생성되지 않았다고 알려준다.
혹시 "v0에 회원가입하지 않고 제작한 프로젝트라서 완벽한 코드를 제공하지 않았나?" 라는 생각이 들어서 회원가입 후 다시 프롬프트를 작성해서 나온 결과물을 zip파일로 다운로드 했더니 정상적인 page.tsx 파일이 제공된 것을 확인했다.
내 mok 서버에 연결하기
이 프로젝트를 내 mok 서버에 연결하여 테스트 해보기 위해서
1. 프로젝트 내 api Url의 주소를 내 mok 서버 주소로 설정
2. 프로젝트에서 api 명세서에 맞는 데이터를 mok 서버에 제공하도록 수정
3. mok 서버에서 api 명세서에 맞는 응답 데이터 example을 제공하도록 example 추가
순서대로 진행하면 된다.
두 번째 트러블 슈팅
[1. 프로젝트 내 api Url의 주소를 내 mok 서버 주소로 설정]을 진행하려는데, v0에서 제공된 프로젝트 내에 api 설정하는 코드를 하나도 찾을 수가 없다. 내가 못 찾는건지 확신이 없어서 챗GPT에게 page.tsx파일의 코드를 제공한 뒤, api 연결 코드가 있는지 물어봤다.
아래는 page.tsx 파일이야. api 연결하는 코드가 있는지 알려줘.
{~~~page.tsx 코드~~~}
챗 GPT는 이 프로젝트에 백엔드 연동이 전혀 없고 내부 메모리로만 동작하는 상태라고 내 답에 확신을 줬다.
결국 v0에 다시 찾아가 다음과 같이 추가 수정 요청을 했다.
내가 만든 백엔드에 붙여서 사용할 예정이니까, 내가 URL이랑 api만 간단히 수정하면
적용할 수 있도록 코드를 수정해줘
새로 제공된 프로젝트에는 아주 친절하게 백엔드 연동에 대한 가이드 주석이 제공되어 있다.
가이드에 맞춰 코드를 수정하고, api URL에 내 mok 서버 주소를 넣어주었다.
mok 서버에 example을 등록한다.
결과
v0를 통해 제작된 프론트엔드 프로젝트가 mok 서버와 연동되어 잘 작동되는 것을 확인 할 수 있다.