소개
지난 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 추가하기
도움 받은 글 (옵션)
이번 범위가 워낙 협소해서 혼자 맨땅에 헤딩을.ㅠ.ㅜ
