Supabase 따라하기
2024. 11. 29. 17:11ㆍ웹 개발
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
</head>
<body>
<h1>Supabase</h1>
<div id="history"></div>
<div>
<input type="button" value="create" id="createBtn" />
</div>
</body>
<script>
const supabaseUrl = '';
const supabaseKey = '';
const client = supabase.createClient(supabaseUrl, supabaseKey);
async function refreshHistory() {
let { data: record, error } = await client.from('Page').select('*'); // 동기화 키워드
let tag = '';
for (let i = 0; i < record.length; i++) {
tag += `<h2>${record[i].title}</h2><p>${record[i].body}</p>`;
}
document.querySelector('#history').innerHTML = tag;
}
async function recordHandler(){
const { data, error } = await client.from('Page').insert([{ title: prompt('title?'), body: prompt('body?') }]);
refreshHistory();
};
refreshHistory();
document.querySelector('#createBtn').addEventListener('click', recordHandler);
</script>
</html>
'웹 개발' 카테고리의 다른 글
| React, 리액트 함수 컴포넌트 합성, Comment List (1) | 2024.12.02 |
|---|---|
| React, Virtual Dom 특성 예제, Clock (0) | 2024.12.02 |
| React, JSX 코드 작성해보기 (1) | 2024.12.02 |
| npx 실행 시 PSSecurityExcption 에러 발생 시 대응 (0) | 2024.12.02 |
| React, Quick Start 빠른 시작 (0) | 2024.12.02 |