소개
지난 15기에 진행한 GAS로 만든 '초등학교 배정 아파트 단지 안내 서비스'의
로딩 속도 개선 및 추가 기능 확대를 위해
Next.js와 Supabase(혹은 Firebase)를 활용하고자 Cursor를 써보기 했습니다.
[2주차 후기]
지난 2주차에 Vooster를 통해 호기롭게 만든 PRD와 TRD의 기술스택이 구현되는 꿈을 꾸며,
1주일을 열심히 커서와 클로드와 함께 씨름을 했으나,
너무 많은 파일때문인지, Mock-up 데이터로 지도API없이 마커를 생성하는데는 성공했으나
이후 UX/UI와 DB가 계속 연결이 되지 않는 무한루프에 빠졌습니다.
[3주차 목표]
주체성 없는 개발로는 답이 안 나올 것 같아서, 기초부터 공부를 해야겠다고 마음을 먹었습니다.
기존 프로젝트 내용을 과감하게 포기하고
초기 GAS를 일단 있는 그대로 옮기는 과정을 통해
Cursor와 Supabase/Github에 익숙해지는 것으로 목표를 변경했습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
기술스택 최소화 / Task 생성 = Claude (Project)
Task 기준 Coding 수행 = Cursor / Claude
DB = Supabase
데이터 전처리 = Excel
배포 = github
기술스택 최소화
기존의 GAS 코드를 기준으로 최소한의 기술스택의 TRD를 요청
그래도 계속 react/tailwin/typescript를 얘기해서 계속 더 단순화해달라고 요청.
2. Task 생성 요청 후, Cursor로 생성
그 과정에서 GAS에서 만든 Code.gs는 필요가 없다고 하여, 그 이유를 공부.
3. Cursor를 통해 만든 (Vibe Coding이라고 하기도 민망한) 정말 간단한 페이지 구조
(폴더도 없..)
4. 주요 코드문 생성 후, 전체 DB를 업로드
(2주차때는 테이블 칼럼명만 맞춰서 데이터 10개씩만 추가해서 진행했었음)
- 전체 데이터를 업로드 하다보니 그 과정에서 발생하는
#N/A, N대N 복합구조, 2개의 테이블간의 키값 설정 등 전처리에 생각보다 많은 시간을 소비
- 결론적으로 성공했으나, 전처리 시간이 길어서 4주차때는 API 구조로 변경을 결심하게 됨
(서로 다른 공공데이터 테이블의 키값 매핑 테이블은 직접 작성 필요 예상)
5. Local에서 Front까지 띄우는 작업 진행 중
- 네이버 클라우드 Map API에 local URL 추가
- 클릭 시 Supabase 정의 이슈 지속 발생 중
(그 쉽다는 Supabase 라이브러리 로드도 이리 어려울 일인가요..)
결과와 배운 점
알지 못하는 기술스택을 활용 시, 코딩의 한계점
- 다만, 이렇게 하나씩 확인하면서 해나가면 상용화 서비스는 언제쯤 손대볼 수 있을지...
DB 전처리 및 관리의 어려움
- 비개발자에게 DB가 연결되어 있는 MVP는 GAS와 구글시트가 편하긴 합니다.
기술스택과 환경을 알아도 어려운 개발과 (아직 하지도 못한) 배포
- 웹페이지 1개, script.js 1개에 DB 1개를 연결하는데도 왜 이리 오류가 많나요ㅠㅜ
해보고 싶은 프로덕트가 Front보다는 Back-end와 DB가 중요한 형태라
좀 더 DB 자체에 대한 기초를 다지고 나서 프로젝트를 키워봐야 겠다는 생각을 했습니다.
[4주차 목표]
1. Github으로 배포
2. DB를 API 호출 구조로 변경하기 (Join 키값 매핑 테이블 추가)
3. Vercel로 배포
4. 인근 학원 정보 DB 추가하기
도움 받은 글 (옵션)
이번 범위가 워낙 협소해서 혼자 맨땅에 헤딩을.ㅠ.ㅜ
