AI 감사일기 서비스, 기획부터 개발까지 2.프론트 백엔드 개발(Cursor AI ,Supabase 연결)

이번엔 본격적으로 커서로 바이브코딩을 하려고 한다.

lovable로 만든 간단한 프로토타입을 바탕으로 프론트와 백엔드 디테일을 손보는 것이다.

특히 백엔드는 supabase라는 오픈소스 데이터베이스를 사용해서 일기를 저장하고 조회하는 시스템까지 추가했다.

---

 

프론트 다듬기 

1. 깃허브 프로젝트 커서AI로 가지고 오기

2. 커서AI로 디테일 프론트 수정하기 (예쁘게 만들기)

추가로 아래 영상을 참고해서 lovable -> github -> cursor로 가지고 와서 진행했다. 

 

https://lovable.dev/video/transfer-lovabledev-projects-to-cursor-ai-via-github-integration

Transfer Lovable.dev Projects to Cursor AI - via GitHub Integration

 

백엔드 다듬기

1. 일기 저장/조회 시스템 superbase 연결 

커서AI에서도 해도 되는데 lovable에서 바로 진행했다.

사실 이미 작성한 PRD를 보고 추가 구현이 필요한 기능으로 '일기 저장/조회 시스템'을 먼저 알려줬었다.

다음날(크레딧이슈)lovable에서 바로 구현해달라고 했다.  그리고 여기까지 구현된 내용을 다시 깃으로 연동시켰다. 

 

2. 깃허브 프로젝트 커서AI로 가지고 오기

이미 lovable을 나의 깃허브랑 연동시켜놨기 때문에, 이렇게 lovable에서 작업한 내용들이 lovable-dev[bot]에 의해 자동 커밋이 된다!!

 

3. supabase 연동 확인 및 테이블 수정

supabase에 직접 들어가서 확인해보면, 테이블에 대한 스키마 정보를 요런식으로 확인할수 있다.

 

그런데 테이블명이 마음에 안들었다.

커머AI 한테 테이블 이름을 gratitude_entries 에서 thanks_entries로 바꾸고 싶다고했다. 백엔드의 디테일 작업을 수행해주었다.

그런데 supabase 마이그레이션을 적용해야된다고 했다. 코드뿐만 아니라 실제 supbase 내용까지 수정하겠단 것이다. 

 

4. supabase CLI로 마이그레이션 적용 (테이블명 수정 :  gratitude_entries -> thanks_entries )

 

대신 그러면 supabase cli 로그인이 필요했다. 즉, supabase 토큰이 필요했다.

supbase 대시보드> 우측상단 프로필 아이콘 > Account setting 탭 > 요기 초록색 버튼 > 토큰 생성

 

그리고 터미널에서 환경변수로 설정한다. 커서AI로 토큰을 직접 공유하는건 위험하니까 환경변수로 설정할 것!

export SUPABASE_ACCESS_TOKEN="your_access_token_here"
echo $SUPABASE_ACCESS_TOKEN

 

같은 세션에 환경변수가 잘 설정됐는지 확인한다. export는 세션에서만, 영구저장은 bashrc 업데이트

 

1. 다시 supabase cli 로그인. npx supabase login 

2. 로그인이 제대로 되는지 확인하는 코드가 나오는데, 코드를 확인하고 엔터를 누르면 로그인 완료 

3. supabase 프로젝트 연결 npx supabase link --project-ref "project명"

 

supabase/migrations의 .sql 파일로 만들어둔 DDL문을 supabase에 푸쉬해서 변경하는 작업이다. 

 

최종적으로 이렇게 테이블이 생성된걸 확인할수 있다. gratitude_entries 에서 thanks_entries로 테이블명이 바뀌었다.

 

1차 개발 완료 확인 

그러면 일단 1차적으로 일기를 작성하고, 데이터베이스와 연결해 일기를 저장할 수 있게 되었다. 

실제로 입력 결과가 디비에 저장되는거까지 확인했다!

 

 

추가 기능 기획/개발 

그런데 테스트로 사용해보면서, 몇가지 개선할 점이 보였다.

우선 각 입력창이 불필요하게 TextArea로 되어 있는거 같아서, 항상 한줄만 입력되게 수정하고 싶었다.

그리고 실제로 그동안 작성했던 실제 감사일기 데이터를 넣어보니까, 하나로는 부족하다고 생각이 들었다.

 

그래서 동적으로 감사항목 입력창을 추가할수 있는 기능을 개발하기로 했다. 

각 항목의 마지막 입력창 옆에 '+' 버튼으로 새 입력창 추가하고, 'X' 버튼으로 삭제 가능할수 있는 것이다. 

 

프론트 - 입력창 UI 수정 

입력창에서 플러스 버튼으로 동적으로 추가할수 있게 변경했다. 커서 덕분이다. 그런데 저 0/50 필드가 좀 거슬리긴한다

 

백엔드 - 데이터베이스 구조 변경

기존에는 하나의 thanks_entries에서 각각 항목필드를 하나씩 받게 되어 있었다.  

동적으로 항목별 입력창을 추가할 수 있도록 아예 테이블을 새로 구분했다.  (thanks_items 테이블이 생겼다)

 

이렇게 생성된 새로운 테이블을 생성하는 sql이 자동으로 생겼다. 

 

그런데 이전에 테스트해보라 기존 메인 일기 테이블에 self,others,situation 필드가 아직 남아있는 상태였다. 

아직 배포가 안된 상황이기 때문에 기존 데이터들은 모두 지우고 다시 supabase 마이그레이션을 실행했다. 

최종적으로 스키마는 이렇게 변경됐다. 

 

2차 개발 완료 확인 

이제 추가기능까지 반영해서, 감사입력 항목을 여러개 동적으로 추가/삭제하여 받을수 있게 되었다. 

실제로 디비에 테이블까지 변경되어서,입력 결과가 디비에 저장되는거까지 확인했다!

 

테이블에도 thanks_items에 새로운 row가 추가된걸 볼수 있다.