https://emfpdlzj.tistory.com/7
[Supabase] FastAPI와 함께 쓰는 이유 (Django와 비교), 왜 요즘 FastAPI 채용요건에 Supabase가 나올까
오늘은 Supabase 기초를 공부해봤다.공부 동기는 크게 세가지1. 최근 면접 공고를 봤는데 요하는 곳이 많았음2. 창업하신 스타트업 선배랑 얘기하는데 Supabase 언급을 주심3. 내가 요즘 하는 1인 토이
emfpdlzj.tistory.com
저번 게시물에 Supabase란 무엇이며 왜 사용하는지 간단하게 작성하였다.
이번엔 간단하게 HTML에 이를 연동해 볼 것이다.
참고 공부 자료
https://www.youtube.com/watch?v=FbLzqoENTsg
이고잉님 존경합니다
(문제시 게시물 삭제)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
</head>
<body>
<h1>Supabase</h1>
<div id="history"></div>
<input type="button" value="create" id="create_btn" />
<script>
const supabaseUrl = "본인 supabase Url";
const supabaseKey =
"본인 supabase public key, 그래도 공개되지않도록 할 것.";
const client = supabase.createClient(supabaseUrl, supabaseKey);
async function refreshHistory() {
let { data: record, error } = await client.from("page").select("*");
console.log('record', record);
let tag = "";
for (let i = 0; i < record.length; i++) {
tag += `<h2>${record[i].title}</h2>${record[i].body}`;
}
document.querySelector("#history").innerHTML = tag;
}
refreshHistory();
async function recordHandler() {
const { data, error } = await client
.from("page")
.insert([{ title: prompt("title?"), body: prompt("body?") }]);
refreshHistory();
}
document
.querySelector("#create_btn")
.addEventListener("click", recordHandler);
</script>
</body>
</html>
이 코드는 브라우저(Java Script)에서 supabase-js로 Supabase에 직접 붙어서 page 테이블을 조회(select) 해서 화면에 렌더링하고, 버튼 클릭 시 추가(insert) 한 뒤 다시 조회해서 화면을 갱신한다.
Supabase는 PostgreSQL을 기반으로 하고, 테이블을 만들면 기본적으로 API처럼 접근할 수 있게 해준다.
지금 예제는 그 중에서도 Database + JS SDK(supabase-js) 만 쓰는 형태이다.
구글에 supabase js라고 검색하면 나오는 아래링크에서 바로 copy paste하여 쓸 수 있다.
https://supabase.com/docs/reference/javascript/introduction
JavaScript: Introduction | Supabase Docs
supabase.com
<script src="...supabase-js@2"> 해당 부분은 번들링(Vite/Next) 없이도 바로 브라우저에서 SDK를 사용 가능하게 해주므로, 초반 세팅시간을 크게 줄여주는데 이점이 있다.
supabase/apidocs/page에 가면 supabaseUrl, supbaseKey를 조회할 수 있는데 이를 활용해서 createClient(url, key)를 할 수 있다.
from("page").select("*")는 SQL문과 비슷한데, 테이블 조회 쿼리라고 볼 수 있다.
마지막으로 DB 요청은 네트워크를 타기 때문에 async/await을 통해, 결과가 올 때 까지 기다렸다가 DOM을 업데이트 한다.
주의점
1.public anon key를 클라이언트에 두는 대신, RLS 정책으로 읽기/쓰기 권한을 제한해야 안전하다
RLS 없이 anon key를 그대로 쓰면, 누구나 테이블 전체를 읽거나 수정할 수 있는 상태가 될 수 있다.
(RLS에 관해선 또 다음게시물에서 소개예정)
2.공개키를 코드에 두기보단 .env에서 관리해야한다.
배운점
무박 해커톤에서 mvp개발 시 이제 혼자서도 개발이 가능한거 아닌가 싶어졌다.
DB를 API처럼 접근 가능한게 굉장한 이점인 것 같다.
FastAPI와 조합하면 Supabase가 인증·DB를 담당하는 메인 서버처럼 동작하고, FastAPI는 AI 추론이나 복잡한 로직을 담당하는 서브 서버 역할을 하게 된다. 혼자 개발하는 상황에서도 자연스럽게 역할 분리가 가능하다는 점이 좋은 것 같다.
하지만 권한과 보안 문제를 잘 신경써야할 것 같다.
다음시간엔 생활코딩님의 다음영상인 OAuth에 대해 좀더 다뤄보고, 그 다음엔 독학 게시물 한 편으로 마무리 예정이다.