용어 정리
- 프론트엔드 : 화면에 보이는 UI(User Interface)를 프론트엔드라고 말해요. 버튼, 입력창, 메뉴 등을 말해요.
- 백엔드 : 서비스가 돌아가는데 쓰이는 모든 데이터가 저장되는 곳을 DB(Database)라고 하는데, 이런 DB와 DB가 들어있는 서버 등을 포함해서 백엔드라고 말해요.
- Supabase : 백엔드 구현, 특히 Database 구현을 매우 쉽게 도와주는 서비스에요. 무료 계정으로도 꽤 많은 용량을 지원하기 때문에 소규모 서비스 개발에 가장 널리 쓰이는 업계 표준 도구에요.
Supabase 계정을 만들기 위해 Github 계정 만들기
- Supabase는 Continue with Github 버튼으로 회원가입할 수 있어요.
- 나중에 진행할 '배포' 단계에서 어차피 Github가 필요하므로 이 링크에서 Github 계정을 만들어 주세요.
- 그리고 Supabase 홈페이지에서 Continue with Github 버튼을 눌러서 Supabase 계정을 만들어 주세요.
Supabase 프로젝트 만들기
1. Supabase 계정을 만들고 로그인한 후에 Supabase 대시보드로 들어가면 Organization 만들기를 진행해요.
- 특별히 내용을 편집할 필요 없이 그대로 Create Organization을 눌러 주세요.
2. 그 다음 순서로 Create New Project를 진행해요. 내가 만들 서비스 이름으로 제목을 바꿔주시고, 나머진 그대로 둔 채 Create 해주세요.
techstack.md 파일 업데이트해주기
- 우선 AI 채팅창에 다음 프롬프트를 적어서 실행해주세요.
"techstack.md 파일에 Supabase 기반으로 백엔드를 구현한다는 점을 반영해서 업데이트해줘."- techstack.md 파일은 처음 프로젝트 셋팅할때만 쓰는게 아니라 앞으로 AI가 기능 구현을 할 때마다 참고하는 '가이드라인'의 역할을 해요.
- 따라서 AI가 지켜야 하는 규칙이 새로 생기면 항상 techstack.md 파일에 업데이트해주는게 좋아요.
AI한테 Supabase로 백엔드 개발하라고 시키기
- 내가 지금 만드려는 서비스 중에 '데이터를 서버에 저장해야 하는 기능'을 골라 주세요. (예 : 할 일 관리에서 '할 일' 데이터 저장하기)
- 그리고 AI 프롬프트 창에 다음과 같이 적어 주세요.
"PRD.md의 {내가 지금 구현하려는 기능 이름을 여기 넣어주세요} 기능 요구사항을 참고해서 백엔드를 구현해줘."- techstack.md 파일을 업데이트해두었다면 굳이 여기서는 Supabase라고 지정하지 않아도 techstack.md를 알아서 읽고 Supabase 기반으로 구현하기 시작할 거에요.
env 파일에 Supabase 연결 정보 입력하기
- AI가 백엔드 구현을 마치면 .env 파일에 Supabase 연결 정보를 입력해달라고 요청할 거에요.
- .env 파일인 경우도 있고, .env.example로 만드는 경우도 있고, .env.local로 만드는 경우도 있는데 AI가 "여기에 넣어주세요"라고 요청한 그 파일에 적어주시면 됩니다.
- .env 파일에 다음과 같은 정보를 입력하라고 할거에요. 참고로 항목 앞에 NEXT_PUBLIC 등의 이름이 추가로 붙어 있을 수 있습니다.
- SUPABASE_URL
- SUPABASE_ANON_KEY
ANON_KEY는 옛날 방식이고 Publishable Key라는 방식으로 최근에 바뀌었어요.
- 매우 최근에 Supabase에 업데이트된 방식이라 아직은 AI가 무조건 "ANON_KEY"를 달라고 할 건데, 다음과 같이 프롬프트를 실행해주세요.
"Supabase 인증 방식이 ANON KEY에서 Publishable Key로 업데이트됐어. 인터넷을 검색해서 이 업데이트 사항을 살펴봐주고, env 파일을 업데이트해줘."- 그러면 AI가 다음 두가지 중 하나의 행동을 할텐데 둘 다 동작하는데 지장 없으니 그대로 따라주시면 됩니다.
- (1) env 파일 안에 ANON_KEY라고 이름은 그대로 둘 거지만 key는 Publishable Key를 적어주면 된다고 안내
- (2) env 파일 항목 이름도 Publishable Key로 바꾸고 Publishable Key를 적어달라고 안내
Supabase에서 연결 정보 찾기
- Supabase에 접속해서 방금 만든 내 프로젝트 대시보드에 접속해주세요. 화면 상단에 위와 같은 메뉴에서 "Connect" 버튼을 찾을 수 있습니다.
- Connect 메뉴에서 "API Key" 탭에 들어가면 Project URL과 Publishable Key를 찾을 수 있어요.
- env 파일에 복사 붙여넣기 할 때는 다음과 같이 쌍따옴표로 감싸서 넣어주세요. (감싸지 않아도 동작하지만, 가끔 저런 Key 값에 띄어쓰기가 포함된 경우가 있어서 쌍따옴표로 넣는 습관을 들이는게 안전합니다.)
NEXT_PUBLIC_SUPABASE_URL="https://my-project-url.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="어쩌구저쩌구굉장히긴알파벳모음"