소개
이번 주에는 기능 구현을 목표로 러버블로 만든 웹페이지를 이용했습니다. 공공데이터포털의 전시정보 API를 이용해 전시 데이터를 불러오고, Supabase에 적재한 뒤 웹페이지에서 날짜를 기준으로 ‘오늘 볼 전시’ 정보 기능을 구현했어요.
진행 방법
공공데이터포털 전시 API 발급, Postman으로 테스트, 출력해봄
lavabel, 로컬, Cursor, supabase 를 Git 으로 연동
Cursor 에서 Supabase MCP 를 이용 API 출력값을 근거로 데이터 적재
Supabase 아래와 같은 구조로 스키마와 테이블 자동 생성
exhibitions 테이블 필드 - id, title, institution_name, start_date, end_date - description_raw, description_clean, image_url, source_url - genre, author, contributor, charge, event_site - api_data_hash, data_status, last_api_fetched_at - created_at, updated_at - latitude, longitude데이터가 알잘딱깔센으로 들어감
카카오맵 API 발급
자동생성된 필드 값 중 latitude, longitude 가 서비스의 기능 중 걷기루트와 관련
플랫폼 등록을 위해 Vercel 세팅, 깃 연동
시행착오
커서에서 작업을 진행할 수록 엉망이 되어감
말로만 듣던 cursor ruls 가 이래서들 필요하다 한거구나 몸소 체험
되돌리기 된다더니, 깃 커밋이 이래서 중요하구나 체감
결국 새벽 3시에 다 초기화
결과와 배운 점
test 전시 3건 중, 날짜 필터로 걸러진 1건만 정확히 웹페이지에 출력됨
전시 이미지, 미술관 이름, 전시 설명, 링크 등 모두 어긋남 없이 연결
Supabase 테이블 스키마, 필드 정의, Edge Function까지 자동으로 설정해줘서, DB를 처음 써보는 입장에서도 매우 직관적이었음
chatGPT를 이용 한땀한땀 터미널 창에서 작업을 하다보니 UI보다 터미널창이 편해졌음
API 출력부터 Cursor, supabase 등 모든 걸 세팅해보는 경험을 하게 됨
결국 초기화 했지만 커서를 처음 써보는 입장에서 아주 좋은 공부였음
4주차 목표는 기능을 모두 구현해보는 것!
추후에는:
전시정보를 LLM으로 요약해서 더 쉽게 보여주고
Vercel 사용자 로그 서비스로 데이터에 근거한 UX 탐색 기회를 얻을 수 있길,,
크롤링으로 전시 덕후들의 도보 코스 데이터를 추가하고 싶어졌어요 😎
도움 받은 글 (옵션)
https://www.gpters.org/nocode/post/create-distribute-websites-lovable-7O1HNaMW2XDchCP