온라인강의
[인프런] Firebase보다 10배 좋은 Supabase
AI강선생
2025. 4. 2. 17:00
공부기간 : 3월 27일~4월 2일
수강한 이유:
1) supabase를 활용해보고 싶어서
2) Next.js를 활용한 간단한 프로젝트를 하고 싶어서
3) 무료 강의라서 부담이 없어서
후기 : supabase에 대해서 공부를 하고 싶었는데 마침 인프런에 무료강의가 있다는 것을 발견하고 신청했습니다. supabase에 대한 전체적인 설명과 간단한 프로젝트를 수행하는 강의였습니다.
Nest.js와 Typescript, tailwind 등에 익숙하지 않아서 강사의 코드를 따라치는데 생각보다 시간이 꽤 걸렸습니다. 실습 강좌 부분은 1시간 정도 되는데, 막상 따라하면서 시행착오를 경험했는데 3~4시간 정도 시간이 소요되었습니다. 코드에 대한 상세한 설명을 하지 않기 때문에 이해도 잘 안되는 상태에서 그냥 따라치면서 프로젝트를 완성하는데 많은 시행착오가 필요했습니다. ㅠㅜ
그래서 다시 생각했습니다. 이것을 내가 익숙한 python 과 FastAPI 그리고 Cursor를 사용한다면 빨리 할 수 있지 않을까? 그결과 거의 동일한 웹사이트를 1시간 정도에 만들 수 있었습니다.
아래는 간단한 시연 영상입니다.
아래는 제가 실제 사용한 PRD내용입니다. 궁금한 분들은 내용 참고하세요~
----
PRD 예시
# **Project Overview (프로젝트 개요):**
Python FastAPI를 활용해서 웹사이트를 만들고자 합니다.
웹사이트를 통해 supabase의 특정 테이블을 read, update, write, delete 하는 기능을 수행합니다.
# **Core Functionalities (핵심 기능):**
1. 전체 화면은 첨부한 3개의 이미지(이미지1, 이미지2, 이미지3)를 참고해서 파악하세요. 맨 상단에 녹색 배경의 supanote 로고가 있으며, 왼쪽 상담에 ‘새로운 노트’ 추가 버튼이 있습니다. 바로 아래 검색창이 있습니다. 그 아래 db에서 read한 title 리스트가 쭉 나열되어 있습니다. title이 많아지면 스크롤됩니다. 오른쪽 영역은 내가 title 리스트 중 한가지 title을 선택하면 title과 본문이 출력되는 공간입니다. title 리스트가 있는 영역과 본문이 있는 영역의 가로 길이는 1:3의 비율로 만들어 주세요. 선택을 안한 상태에서는 ‘새로운 노트를 만들어 주세요(웃음)’라는 문구가 본문 영역에 표출됩니다.(이미지1 참고)
2. 만약 title 리스트 중 한개의 title을 선택하면 오른쪽 본문 영역에 title과 그 하단에 본문이 출력됩니다. title리스트 영역에 내가 선택한 title이 bold체로 변경됩니다. 그리고 그 하단에 ‘수정’이라는 초록색 버튼을 출력됩니다.
3. ‘수정’ 버튼을 클릭하면 본문 영역의 title과 그 하단에 본문에 대해 edit이 가능하게 변경됩니다.
하단에 ‘저장’이라는 파란색 버튼과 ‘삭제’라는 빨간색 버튼이 존재합니다(이미지3 참조). title이나 본문 내용을 수정하고, 저장하기를 누르면 update가 완료됩니다. 삭제를 누르면 선택한 title 내용이 삭제됩니다. 삭제하기 전에 해당 title에 대해 정말 삭제해도 되는지 alert를 띄웁니다.
4. supabase접속 정보는 .env 내 NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY의 값을 사용하세요.
supabse의 note 테이블에 대한 sql은 다음과 같습니다.
CREATE TABLE note (
id SERIAL PRIMARY KEY,
title TEXT NOT NULL,
content TEXT,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
5. 헤더의 logo로 사용된 이미지 파일은 static폴더의 img폴더의 supanote-logo.png로 저장되어 있습니다.
# **Doc (문서):**
**프로젝트 개발에 사용될 기술 스택과 도구는 다음과 같습니다:**
1. **Frontend**: python, fastapi 를 사용하여 UI와 기능을 구현합니다. 디자인은 [tailwinds.css](https://tailwindcss.com/)를 사용합니다.
2. **Backend**: supabase를 사용하여 데이터를 저장하고 실시간으로 동기화합니다.
# **Current File Structure (현재 파일 구조):**
실제 프로젝트가 생성되면 커서를 이용해 작성할 예정이므로 현재는 비워둡니다.
아래는 Cursor agent에 명령할 때 함께 첨부한 이미지1,2,3입니다.
