소개
퍼스널 브랜딩이 중요해진 요즘, 나만의 랜딩페이지를 만들기위해서 AI 기반 코드 편집기인 Cursor를 활용해 빠르게 UI를 구성했고, 상담 문의나 게시글 저장 등 기본적인 백엔드 기능을 위해 Supabase를 연동하였습니다.
진행 방법
사용 도구
✏️ Cursor (AI 기반 코드 편집기)
🛢️ Supabase (오픈소스 백엔드 플랫폼)
기본 흐름
Cursor로 퍼스널 랜딩페이지 구성
소개, 문의 영역 등 컴포넌트를 빠르게 생성
Supabase 프로젝트 생성 및 설정
Supabase에서 새 프로젝트 생성
테이블 생성
개인 프로필 테이블
서비스 테이블
프로젝트 포트폴리오 테이블
자격증 테이블
뉴스레터 구독자 테이블
상담 문의 테이블
컨텐츠 블록 테이블
사이트 설정 테이블
구현 단계별 계획
Phase 1: 기본 인프라 구축
Supabase 프로젝트 설정
React와 Supabase 연동
Phase 2: 코어 데이터 마이그레이션
a. 정적 데이터를 데이터베이스로 이전
b. 컴포넌트 리팩토링
Phase 3: 인터랙티브 기능 구현
a. 뉴스레터 시스템
b. 상담문의 시스템
Phase 4: 관리자 기능
a. 컨텐츠 관리 시스템
b. 분석 및 모니터링
메인
관리자 모드
시행착오
DB 연결 시 환경변수 경로 설정 오류가 발생하여 ChatGpt를 이용하여 해결 😅
실행시 발생된 브라우져의 오류를 개발자모드(F12)를 클릭하여 확인할 수 있었고, 오류를 Chatgpt를 이용하여 해결하였음
결과와 배운 점
Cursor 덕분에 빠르게 프론트엔드 구성이 가능했어요
Supabase도 생각보다 연동이 쉬웠고, 문서가 잘 되어 있어 막힘 없이 구현 완료!
한 번 해보니 다음부터는 더 빠르게 비슷한 프로젝트를 만들 수 있을 것 같아요
Next Action Plan: 현재 작성한 Draft Version의 랜딩페이지를 배포하기 위해 고도화 및 , Supabase를 SQLite에 이전하기.
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
성장피터(17기 Cursor 웹앱 스터디장)님의 Supabase 연결을 위한 코칭
