🚀Supabase + Cursor 와 함께 첫 CRUD 개발 시행착오 6탄

🚀 Supabase + Cursor와 함께 첫 CRUD 개발 시행착오

Cursor 스터디에 Supabase + MCP 까지 배웠지만
스터디 기간 중, 데이터베이스가 필요하지 않은 프로그램을 개발하느라
이제서야 Supabase + MCP 사용하며 시행착오를 경험하네요 🤣💤

비개발자 + LLM 1개월차의 귀여운 시행착오를 글로 담았으니 가볍게 읽어주세요 😄

📌 배경

• 🧑‍💻 개인 블로그 개발 프로젝트 중 CRUD 기능 구현 시도

• 🤖 Cursor AI와 Supabase MCP를 활용한 개발 과정 기록

• 🔍 처음 해보는 블로그 CRUD 기능 구현의 시행착오

🎯 목표

• ✅ 블로그 포스팅 기능 구현 (CRUD 완성)

• 🗄️ Supabase를 백엔드로 활용한 데이터 관리

ALT

'home'and'tag iting에 대해 흰색과 주황색 배너

📝 개발 과정

1️⃣ 페이지 구조 설계

• 📊 현재 블로그 포스트에는 샘플 데이터만 존재

ALT

검은 배경이있는 웹 사이트의 스크린 샷

• ➕ 게시물 생성 기능 필요

• 🏗️ Cursor를 통한 웹 페이지 구조 설계

• 📁 체계적인 폴더 구조 필요성 인식

• 🔄 이상적 작업 흐름 정립:

  • 처음 개발이라 중구난방 + Auto Run 으로 폴더구조가 난리입니다 🤣

  • 다음은 아래와 같은 프로세스로 개발 시도해야겠어요!

    1. 🛠️ Cursor로 구조 설계

    2. 🎨 Stitch로 디자인 구현

    3. ⚛️ React 변환

2️⃣ Supabase MCP 연결

• 🆕 Supabase 프로젝트 생성

ALT

검은 배경이있는 웹 사이트의 스크린 샷

• 🧩 MCP를 통한 데이터베이스 스키마 자동 설계

ALT

한국어 텍스트가있는 화면 스크린 샷

• 📋 테이블 구조와 관계 정의

ALT

항목 목록을 보여주는 검은 색 화면

• 🌱Supabase MCP 없었으면 이런 부분에서 너무 고생했을 것 같아요 😎

3️⃣ 권한 문제 발생

• 🔒 Supabase 정책(Policy) 설정 문제 발견

• 🚫 글쓰기 권한 설정에서 어려움 경험

• 🔑 정책 권한 설정의 중요성 깨달음

ALT

Supabase 권한설정 캡처

4️⃣ MCP 비활성화 문제 해결

• ⚠️ Supabase MCP가 비활성화되는 상황 발생

ALT

전화 화면의 설정 스크린 샷

• 자세히 아는 것은 아니지만,

  • MCP 는 서버로 운용하기 때문에 서버 이슈시, 대응 필요!

    • 공식이 아닌, 스미더리 : https://smithery.ai/ 는

    • 자체 서버 MCP 를 제공하기 때문에, 스미더리 서버 의존도도 올라감!

• 🔌 자체 연결 방식으로 전환

  • 📄 .env.local 환경변수 설정

• 💻 CLI를 통한 수동 테이블 생성 (MCP로 미리 만들어서 해결)

  

• ✅ 연결 상태 확인

5️⃣ CRUD 기능 구현

• 🎉 Create 기능 구현 성공

  

• ➕ Supabase 테이블에 데이터 추가 확인

• 🔄 프론트엔드 연동 작업

• 📝 Next.js, React 기반 코드 수정

• Next.js , React 기반 파일이라 직접 받아오려면 코드를 수정해야 하나봐요

• 개발 실력을 늘리려면, 배경지식을 배우려는 마음이 중요한 것 같아요 (Feat. 성장피터님)

• 🖥️ 데이터 호출 및 표시 로직 구현

• 🏁 목표 달성 계획

  

• 🎊 CRUD 기능 중 Create 구현 완료

ALT

한국어 웹 사이트의 스크린 샷

• 이제는 CRUD 중 Update, Delete 를 구현해야겠죠!

  • Supabase + Table 연동만 완료되면 나머지 작업은 금방 될 것 같아서

  • Create 기능구현 완료되고 시행착오 글 작성했습니다.

💡 인사이트

🔧 기술적 인사이트

• 🌐 MCP의 서버 의존성 인식

  • 💪 로컬 구현 능력의 중요성

  • 🛠️ 서버 비활성화 시 대응 방법 학습

• 📚 환경설정 관련 지식 습득

  • 🔄 .env와 .env.local 차이점

  • 🔗 slug, React vs Next.js 개념 이해

  • 🧪 목업 데이터와 하드코딩의 개념

📈 개발 프로세스 개선점

• 🧩 구조 설계 → 디자인 → 구현 순서로 진행

• 🌿 Git 브랜치 관리를 통한 세이브 포인트 활용

• 🖥️Cursor/Rule 커스텀 셋팅 시행착오 (단축키 만들기)

ALT

한국어 메뉴의 스크린 샷

• 🚨 에러 메시지와 친해지기

  • 📊 에러 변화는 의미가 있음을 인식

🚀 효율적인 개발 방법

• 🔄 Cursor 활용 구조 설계 → Stitch 디자인 → Figma MCP 정리 흐름

  • Figma MCP 사용하진 않았는데 사용하고 후기 적겠습니다..!

• 🏗️ 페이지 구현은 구조 잡기 → 위치에 맞는 페이지 구현 순으로 진행

• 📚 개발 실력 향상을 위한 배경지식 학습의 중요성

📚 용어 정리

• ⚛️ React: 사용자 인터페이스 구축을 위한 JavaScript 라이브러리

• 📝 JSX: React의 확장 문법

• 🖥️ Next.js: React 기반 웹 프레임워크

• 📄 ts vs tsx: TypeScript vs TypeScript + JSX

• 🧪 목업 데이터: UI/기능 테스트용 가짜 데이터

• 💻 하드코딩: 소스 코드에 데이터를 직접 입력하는 방식

• 🔗 슬러그(Slug): URL에 사용되는 사람이 읽을 수 있는 형태의 식별자

🔄 다음 단계

• ✏️ Update, Read, Delete 기능 구현

• 🎨 사용자 경험 개선

• 🧹 코드 리팩토링 및 최적화

🤔 회고

• 🎯 첫 CRUD 구현의 어려움과 성취

  • Request(요청) <-> Response(응답) 구조를 이해하는 것이 중요!

  • (프로젝트 해보면서 알아야 함!)

• 🛠️ MCP 의존성 줄이기 위한 기본기 중요성

• 📚 프로젝트 경험을 통한 실질적 학습 가치

• ✍️ 손코딩을 통한 학습의 재미 발견

  

  • 의도치 않았는데 Cursor Pro 토큰을 전부 사용해서 손코딩 해보니

  • 확실히 배우면서 개발하게 되더라구요! (나쁘지않았다..?! 🤣)

  • 추가로 Auto-Run 하면 개발 실력도 안늘고, 토큰도 많이 사용하니 이 점 유의하세요!