https://supabase.com/docs/reference/javascript/introduction
예시로 js bin 사이트에서 수파베이스 연동
node.js
npm install @supabase/supabase-js
web
//or
<!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>
<title>JS Bin</title>
</head>
<body>
<h1>Supabase</h1>
<div id='history'></div>
<input type='button' value='crate' id='create_btn'>
<script>
const supabaseUrl = '';
const supabaseKey = "";
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>출처
생활코딩
1. 사용법 익히기 2. 원리가 뭔지 찾아보기 3. 원리를 공부하기