소개
이번 주에는 기능 구현을 목표로 러버블로 만든 웹페이지를 이용했습니다. 공공데이터포털의 전시정보 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
