inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

풀스택 - 1주차

merry
0

강의 수강

supabase 장점

NEXT.JS 특징

투두리스트 CRUD 기능 구현

actions/todo-action.ts

"use server"; // Next.js의 서버 액션(Server Action)으로 사용하기 위해 명시해야 함.

import { Database } from "types_db";
import { createServerSupabaseClient } from "utils/supabase/server";

// 📝 todo 테이블에서 조회할 때 반환되는 데이터의 타입
export type TodoRow = Database["public"]["Tables"]["todo"]["Row"];
// 📝 todo 테이블에 새로운 데이터를 추가할 때 필요한 데이터의 타입
export type TodoRowInsert = Database["public"]["Tables"]["todo"]["Insert"];
// 📝 todo 테이블에서 기존 데이터를 수정할 때 사용할 데이터의 타입
export type TodoRowUpdate = Database["public"]["Tables"]["todo"]["Update"];

// 🔹 에러 핸들링 함수
function handleError(error: any) {
  console.error(error); // 에러 로그 출력
  throw new Error(error.message); // 에러 메시지를 포함한 예외 발생
}

export async function getTodos({ searchInput = "" }) {
  const supabase = await createServerSupabaseClient();

  // 🔹 Supabase를 통해 todo 테이블에서 데이터 조회
  const { data, error } = await supabase // ✅ `await` 추가하여 비동기 데이터 처리
    .from("todo") // 📌 todo 테이블에 접근
    .select("*") // 📌 모든 컬럼 조회
    .like("title", `%${searchInput}%`) // 📌 LIKE 연산자로 title에 searchInput이 포함된 데이터 필터링
    .order("created_at", { ascending: true }); // 📌 생성 날짜 기준 오름차순 정렬

  if (error) {
    handleError(error); // 에러 발생 시 핸들링
  }

  return data; // 조회된 데이터 반환
}

export async function createTodo(todo: TodoRowInsert) {
  const supabase = await createServerSupabaseClient(); // ✅ Supabase 서버 클라이언트 생성

  // 🔹 Supabase를 사용하여 todo 테이블에 새로운 데이터 삽입
  const { data, error } = await supabase
    .from("todo") // 📌 todo 테이블에 접근
    .insert({
      ...todo, // 📌 클라이언트에서 받은 데이터(todo) 삽입
      created_at: new Date().toISOString(), // 📌 클라이언트에서 전달된 값이 이상할 수 있으므로, 서버에서 직접 현재 시간을 생성하여 추가
    });

  if (error) {
    handleError(error); // 🔹 에러 발생 시 핸들링
  }

  return data; // ✅ 삽입된 데이터 반환
}

//todo 업데이트
export async function updateTodo(todo: TodoRowUpdate) {
  const supabase = await createServerSupabaseClient();
  const { data, error } = await supabase
    .from("todo")
    .update({
      ...todo,
      updated_at: new Date().toISOString(),
    })
    .eq("id", todo.id); // 📌 id가 일치하는 행만 업데이트

  if (error) {
    handleError(error);
  }

  return data;
}

//todo 삭제
export async function deleteTodo(id: number) {
  const supabase = await createServerSupabaseClient();
  const { data, error } = await supabase.from("todo").delete().eq("id", id);

  if (error) {
    handleError(error);
  }
  return data;
}

 

 

미션

  1. supabase에서 compledte_at 컬럼 추가

  2. 터미널에서 npm run generate-types 입력하면 types_db.ts 에 타입정보가 뜬다. completed_at 타입 추가하면 완성.

    //todo 업데이트
export async function updateTodo(todo: TodoRowUpdate) {
  const supabase = await createServerSupabaseClient();
  const { data, error } = await supabase
    .from("todo")
    .update({
      ...todo,
      updated_at: new Date().toISOString(),
      completed_at: new Date().toISOString(), //추가
    })
    .eq("id", todo.id); // 📌 id가 일치하는 행만 업데이트

  if (error) {
    handleError(error);
  }

  return data;
}

회고

퇴근 후 매일 1시간씩 꾸준히 공부한 내 자신을 칭찬하고 싶다. 완강을 목표로 하고 있지만, 한 단계 더 나아가 다양한 기능을 직접 구현하며 부딪혀 보고 익히고 싶다. 이를 통해 한 달 후에는 스스로 미니 프로젝트를 완성해 보는 것이 목표다.

시간이 날 때 조금 더 개선해 보고 싶은 사항:

풀스택 supabase next.js react 미션

답변 0