일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- tanstack query
- 리덕스
- JavaScript
- reduxtoolkit
- Next.js
- TypeScript
- 그리디
- 자바스크립트
- 프로그래머스
- 코어자바스크립트
- 리액트 라우터 돔
- 토이 프로젝트
- 코딩테스트
- 리액트
- 스택
- Supabase
- 토이프로젝트
- Form
- 코테
- styled component
- revalidatepath
- 동적계획법
- React
- 리액트 패턴
- React Query
- react pattern
- 프론트엔드
- tailwind
- 타입스크립트
- react router dom
- Today
- Total
목록토이 프로젝트 (5)
느려도 한걸음씩

이번 포스트에서는 게시물 삭제 기능을 구현해보겠습니다.단순히 데이터를 삭제하는 것을 넘어, 본인 소유의 게시물만 삭제할 수 있도록 보안 정책을 적용하고, UI에서도 조건부로 삭제 버튼을 노출하는 흐름까지 함께 살펴볼게요. ✅ Step 1. Supabase RLS 설정먼저 posts 테이블에서 본인 소유의 게시물만 삭제 가능하도록 Supabase에서 RLS(행 수준 보안, Row-Level Security)를 설정합니다.CREATE POLICY "Users can delete their own posts"ON postsFOR DELETEUSING (auth.uid() = user_id); auth.uid()는 현재 로그인한 사용자의 고유 ID입니다.user_id는 게시물을 작성한 사용자의 ID입니다.즉..
이번 포스트에서는 내가 게시한 포스트들을 볼 수 있는 페이지를 구현해 보겠습니다.내 게시물은 게시물 작성자가 본인이므로, 사용자가 로그인한 상태에서 본인이 작성한 게시물만 조회하는 페이지입니다. 1. 내 게시물 조회 함수 만들기먼저, 현재 사용자가 작성한 게시물만 가져오는 함수를 만들어야 합니다.이를 위해 getMyPosts()라는 함수를 작성합니다.export async function getMyPosts() { const supabase = await createClient(); // 현재 로그인한 유저 정보 가져오기 const { data: { user }, error: userError, } = await supabase.auth.getUser(); if (!user || ..

이번 포스트에서는 게시물에 찜하기 기능(북마크)을 추가해보겠습니다. 🧱 테이블 설계지난 포스트에서 댓글 기능을 구현할 때 comments 테이블을 새로 만들었던 것처럼, 이번에는 찜하기 데이터를 저장할 likes 테이블을 만들어줍니다. create table likes ( id uuid primary key default gen_random_uuid(), user_id uuid references auth.users(id) not null, post_id uuid references posts(id) not null, created_at timestamp with time zone default now(), unique (user_id, post_id)); user_id는 로그인한 사용자의..
이번 포스트에서는 게시물에 댓글을 조회, 작성, 삭제하는 기능을 구현해보겠습니다. ✅ 댓글 데이터 구조 설계가장 먼저 댓글 데이터를 어떻게 관리할지 고민해야 합니다.저는 Supabase에 별도의 comments 테이블을 만들어 구현하기로 했습니다. create table comments ( id uuid primary key default gen_random_uuid(), post_id uuid references posts(id) on delete cascade, author_id uuid references users(id), email text, content text not null, created_at timestamp with time zone default now()); 댓글에..

이번 포스트에서는 posts 테이블의 모든 데이터를 불러오고, 각 게시물을 클릭하면 해당 상세 페이지로 이동하는 동적 라우팅 기능을 구현해보겠습니다. ✅ 1. Supabase에서 전체 게시물 가져오기우선 Supabase 클라이언트를 사용해 posts 테이블의 전체 데이터를 조회하는 함수를 만들어야 합니다. 아래는 app/actions.ts에 정의된 함수입니다export async function getPosts() { const supabase = await createClient(); const { data, error } = await supabase .from("posts") .select("*") .order("created_at", { ascending: false });..