# 관련링크 - [몰입코딩 - 리액트 - slog.gg/p/13805#f](https://slog.gg/p/13805#f) # 1강 - [24 10 22, p 13806, 1강, 수파베이스는 BAAS(backend as a service) 이다.](https://youtu.be/sjA8KY-X2rY) - [수파베이스 - https://supabase.com](https://supabase.com) - [수파베이스 - 대시보드 - https://supabase.com/dashboard](https://supabase.com/dashboard) # 2강 - [24 10 22, p 13806, 2강, 수파베이스 프로젝트 생성 및 삭제 방법](https://youtu.be/lrtbJkdyKyY) # 3강 - [24 10 22, p 13806, 3강, todos 테이블 생성(id, created_at, content), 데이터 3개 INSERT, 다양한 SELECT](https://youtu.be/X3U2bao2C0k) ```sql -- postgres 데이터베이스의 타임존을 아시아/서울로 세팅 ALTER DATABASE postgres SET TIMEZONE TO 'Asia/Seoul'; -- 모든 스키마 조회 SELECT schema_name FROM information_schema.schemata; -- public 스키마의 모든 테이블 조회 SELECT table_name FROM information_schema.tables WHERE table_schema = 'public' AND table_type = 'BASE TABLE'; -- users 테이블이 존재하면 삭제 DROP TABLE IF EXISTS todos CASCADE; -- users 테이블 생성 CREATE TABLE todos ( id BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY, create_date TIMESTAMP NOT NULL DEFAULT NOW(), modify_date TIMESTAMP NOT NULL DEFAULT NOW(), content VARCHAR(100) NOT NULL ); -- public 스키마의 모든 테이블 조회 SELECT column_name, data_type, is_nullable, column_default FROM information_schema.columns WHERE table_schema = 'public' AND table_name = 'todos'; INSERT INTO todos (content) VALUES ('축구'); INSERT INTO todos (content) VALUES ('농구'); INSERT INTO todos (content) VALUES ('야구'); -- 전체 데이터의 id만 조회 SELECT id FROM todos; -- 전체 데이터의 id와 content만 조회 SELECT id, content FROM todos; -- 전체 데이터의 모든 칼럼 데이터를 조회 SELECT * FROM todos; -- 1번 데이터 만 조회 SELECT * FROM todos WHERE id = 1; -- 2번 데이터 만 조회 SELECT * FROM todos WHERE id = 2; -- 1번과 2번 데이터 만 조회 SELECT * FROM todos WHERE id IN (1, 2); -- 1번과 2번 데이터 만 조회 후 id 값을 기준으로 내림차순 정렬 SELECT * FROM todos WHERE id IN (1, 2) ORDER BY id DESC; -- 1번과 2번중에서 content 가 `농구`인 데이터만 조회 SELECT * FROM todos WHERE id IN (1, 2) AND content = '농구'; -- 현재 날짜 SELECT NOW(); -- created_at 가 현재 날짜 이전인 데이터들만 조회 SELECT * FROM todos WHERE create_date < NOW(); ``` # 4강 - [24 10 22, p 13806, 4강, todos 테이블에 저장된 할일들을 가져와서 웹 페이지에 보여주는 방법](https://youtu.be/FhC2ZkLIXDw) - [수파베이스 - 문서 - https://supabase.com/docs](https://supabase.com/docs) - [수파베이스 - 문서 - 레러런스 - 자바스크립트 - https://supabase.com/docs/reference/javascript/start](https://supabase.com/docs/reference/javascript/start) - [수파베이스 - 문서 - 레러런스 - 자바스크립트 - SELECT - https://supabase.com/docs/reference/javascript/select](https://supabase.com/docs/reference/javascript/select) - [CODEPEN](https://codepen.io/jangka44/pen/NWQaLEK) ## 수파베이스 키 확인 - ![img](https://i.imgur.com/xlzCvrO.png) ## HTML ```html

할일들

``` ## JS ```js console.clear(); // 수파베이스 라이브러리 로딩 import { createClient } from "https://esm.sh/@supabase/supabase-js"; // 수파베이스 객체 초기화 const supabase = (() => { try { return createClient( "" || localStorage.getItem("supabaseUrl"), // 직접 적지 않으면 로컬 스토리지에서 가져옴 "" || localStorage.getItem("supabaseKey") // 직접 적지 않으면 로컬 스토리지에서 가져옴 ); } catch (error) { console.error("Error creating client:", error.message); throw error; } })(); /* API - 시작 */ /* API - 조회 - 시작 */ async function fetchTodos() { const { data, error } = await supabase .from("todos") .select("*") .order("id", { ascending: false }); if (error) { console.error("Error fetching todos:", error.message); return []; } return data; } /* API - 조회 - 끝 */ /* API - 등록 - 시작 */ async function addTodo(content) { const { data, error } = await supabase .from("todos") .insert({ content }) .select(); if (error) { console.error("Error adding todo:", error.message); return null; } const newTodo = data[0]; console.log(`${newTodo.id}번 할일이 등록되었습니다.`); return newTodo; } /* API - 등록 - 끝 */ /* API - 끝 */ /* UI - 시작 */ /* UI - 로딩 - 시작 */ function hideLoading() { document.querySelector("#loading").style.display = "none"; } /* UI - 로딩 - 끝 */ /* UI - 할일 리스트 - 시작 */ async function showTodos() { const todos = await fetchTodos(); _drawTodoList(todos); } function _drawTodoList(todos) { const ul = document.querySelector("#todo-list"); ul.innerHTML = ""; const fragment = document.createDocumentFragment(); todos.forEach((todo) => { const li = document.createElement("li"); const createDate = todo.create_date .slice(2, 16) .replace("T", " ") .replaceAll("-", "."); li.innerText = `${todo.id} / ${createDate} / ${todo.content}`; fragment.appendChild(li); }); ul.appendChild(fragment); } /* UI - 할일 리스트 - 끝 */ /* UI - 등록 - 시작 */ function initTodoAddForm() { const todoAddForm = document.querySelector("#todo-add-form"); todoAddForm.addEventListener("submit", async function (event) { event.preventDefault(); const form = event.target; form.content.value = form.content.value.trim(); if (form.content.value.length == 0) return; const content = form.content.value; form.content.value = ""; form.content.focus(); await addTodo(content); await showTodos(); }); } /* UI - 할일 리스트 - 끝 */ /* UI - 끝 */ /* APP - 시작 */ async function run() { initTodoAddForm(); await showTodos(); hideLoading(); } run(); /* APP - 끝 */ ``` # 6강 - [24 10 23, p 13806, 6강, 할일 삭제기능 구현](https://youtu.be/wGDvkINMk_0) - [수파베이스 - 문서 - 레러런스 - 자바스크립트 - DELETE - https://supabase.com/docs/reference/javascript/delete](https://supabase.com/docs/reference/javascript/delete) - [CODEPEN](https://codepen.io/jangka44/pen/poMWxvN) ## HTML ```html

할일들

``` ## JS ```js console.clear(); // 수파베이스 라이브러리 로딩 import { createClient } from "https://esm.sh/@supabase/supabase-js"; // 수파베이스 객체 초기화 const supabase = (() => { try { return createClient( "" || localStorage.getItem("supabaseUrl"), // 직접 적지 않으면 로컬 스토리지에서 가져옴 "" || localStorage.getItem("supabaseKey") // 직접 적지 않으면 로컬 스토리지에서 가져옴 ); } catch (error) { console.error("Error creating client:", error.message); throw error; } })(); /* API - 시작 */ /* API - 조회 - 시작 */ async function fetchTodos() { const { data, error } = await supabase .from("todos") .select("*") .order("id", { ascending: false }); if (error) { console.error("Error fetching todos:", error.message); return []; } return data; } /* API - 조회 - 끝 */ /* API - 등록 - 시작 */ async function addTodo(content) { const { data, error } = await supabase .from("todos") .insert({ content }) .select(); if (error) { console.error("Error adding todo:", error.message); return null; } const newTodo = data[0]; console.log(`${newTodo.id}번 할일이 등록되었습니다.`); return newTodo; } /* API - 등록 - 끝 */ /* API - 삭제 - 시작 */ async function deleteTodo(id) { const { error } = await supabase.from("todos").delete().eq("id", id); if (error) { console.error(`Error deleting todo ${id}:`, error.message); return false; } console.log(`${id}번 할일이 삭제되었습니다.`); return true; } /* API - 삭제 - 끝 */ /* API - 끝 */ /* UI - 시작 */ /* UI - 로딩 - 시작 */ function hideLoading() { document.querySelector("#loading").style.display = "none"; } /* UI - 로딩 - 끝 */ /* UI - 할일 리스트 - 시작 */ async function showTodos() { const todos = await fetchTodos(); _drawTodoList(todos); } function _drawTodoList(todos) { const ul = document.querySelector("#todo-list"); ul.innerHTML = ""; const fragment = document.createDocumentFragment(); todos.forEach((todo) => { const li = _drawTodoListItem(todo); fragment.appendChild(li); }); ul.appendChild(fragment); } function _drawTodoListItem(todo) { const li = document.createElement("li"); const createDate = todo.create_date .slice(2, 16) .replace("T", " ") .replaceAll("-", "."); li.innerText = `${todo.id} / ${createDate} / ${todo.content}`; // 삭제 버튼 추가 const deleteButton = document.createElement("button"); deleteButton.innerText = "삭제"; deleteButton.style.marginLeft = "10px"; deleteButton.addEventListener("click", async (event) => { if (!confirm("정말로 삭제하시겠습니까?")) return; deleteButton.disabled = true; const success = await deleteTodo(todo.id); if (success) { await showTodos(); } }); li.appendChild(deleteButton); return li; } /* UI - 할일 리스트 - 끝 */ /* UI - 등록 - 시작 */ function initTodoAddForm() { const todoAddForm = document.querySelector("#todo-add-form"); todoAddForm.addEventListener("submit", async function (event) { event.preventDefault(); const form = event.target; form.content.value = form.content.value.trim(); if (form.content.value.length == 0) return; const content = form.content.value; form.content.value = ""; form.content.focus(); await addTodo(content); await showTodos(); }); } /* UI - 등록 - 끝 */ /* UI - 끝 */ /* APP - 시작 */ async function run() { initTodoAddForm(); await showTodos(); hideLoading(); } run(); /* APP - 끝 */ ```