Supabase와 NextJS로 블로그 만들기 - Search

안녕하세요? 이번 시간에는 Supabase 블로그 마지막 시간이 Search 기능 추가 시간입니다. 블로그 포스트의 생성, 조회, 업데이트, 삭제 기능을 완성했는데요. 남은 건 바로 검색 기능입니다. /pages/post/search.tsx 파일로 진행할 예정입니다. 일단 User-Authenticated 템플릿을 아래와 같이 준비합시다. import React, { useState } from "react"; import Link from "next/link"; import { GetServerSideProps } from "next"; import { useMessage } from "../../lib/message"; import { useFormFields } from "../../lib/util..

• format_list_bulleted 코딩/React
• · 2022. 3. 1.
• textsms

Supabase와 NextJS로 블로그 만들기 - Search

안녕하세요? 이번 시간에는 Supabase 블로그 마지막 시간이 Search 기능 추가 시간입니다. 블로그 포스트의 생성, 조회, 업데이트, 삭제 기능을 완성했는데요. 남은 건 바로 검색 기능입니다. /pages/post/search.tsx 파일로 진행할 예정입니다. 일단 User-Authenticated 템플릿을 아래와 같이 준비합시다.import React, { useState } from "react";import Link from "next/link";import { GetServerSideProps } from "next";import { useMessage } from "../../lib/message";import { useFormFields } from "../../lib/utils";im..

• format_list_bulleted 코딩/React
• · 2022. 2. 21.
• textsms

Supabase와 NextJS로 블로그 만들기 - Modify, Delete

안녕하세요? 오늘은 Supabase + NextJS 블로그 만들기 시리즈 마지막인 Post의 Modify, Delete에 대해 알아보겠습니다. 일단 /post/modify.tsx 파일을 만들었고 무엇을 수정, 삭제할지에 대한 정보는 브라우저의 주소창 쿼리를 이용할 예정입니다. NextJS의 다이내믹 라우팅으로도 할 수 있지만 좀 더 간단한 주소창 쿼리를 이용할 예정입니다. http://localhost:3000/post/modify?id=1 이런 식으로 주소 링크를 주면 해당 modify.tsx 파일에서 해당 id를 이용해서 수정, 삭제할 예정입니다. 일단 /post/modify.tsx의 로그인된 유저만 볼 수 있게 하는 템플릿을 준비해 보겠습니다. import React, { useEffect } fr..

• format_list_bulleted 코딩/React
• · 2022. 2. 21.
• textsms

Supabase와 NextJS로 블로그 만들기 - Post Create

안녕하세요? 지난 시간에 이어 Supabase와 NextJS로 블로그 만들기에 도전해 보겠습니다. 오늘은 Create A Post를 만들어 보겠는데요. 기존에 만들어 놨던 템플릿만 잘 활용하면 오늘 주제도 금방 만들 수 있을 거 같습니다. 먼저 /pages/post/create.tsx 파일을 만들 예정입니다. 이렇게 만들면 browser 상의 주소가 http://localhost:3000/post/create 가 됩니다. 일단 User-Authenticated Page 템플릿을 준비합니다. 이 템플릿은 앞에서 벌써 여러 번 써먹었으니 꼭 알아 두시기 바랍니다. /pages/post/create.tsx import React from "react"; import { GetServerSideProps } f..

• format_list_bulleted 코딩/React
• · 2022. 2. 20.
• textsms

Supabase와 PostGreSQL의 Row Level Security 살펴보기

안녕하세요? 지난 시간에 깜빡했던 PostgreSQL DB의 Row Level Security에 대해 추가로 알아볼 게 있어서 잠깐 글을 쓰게 되었습니다. CREATE TABLE posts ( id bigint generated by default as identity primary key, user_id uuid references auth.users not null, user_email text, title text, content text, inserted_at timestamp with time zone default timezone('utc'::text, now()) not null ); alter table posts enable row level security; create policy "..

• format_list_bulleted 코딩/React
• · 2022. 2. 20.
• textsms

supabase와 NextJS로 블로그 만들기 2편

안녕하세요? 이번 시간에는 지난 시간에 만들었던 Supabase 블로그 만들기 2편입니다. 1편에서는 supabase에서 데이터를 불러와서 보여주는 페이지를 만들었는데요. 2편에서는 각 블로그의 상세 페이지에 대해 만들어 보겠습니다. supabase의 posts 테이블은 일련번호가 id라는 이름으로 매겨지는데요. 이 id라는 것을 params으로 해서 PostDetailPage를 만들어 보겠습니다. id를 a tag 링크에 집어넣어야 돼서 지난 시간의 posts.tsx 파일을 조금 수정하겠습니다. const ListPosts = ({ post }: { post: PostsProps }) => { .... .... .... ... ... ... ... 위 코드를 보시면 어딜 고쳐야 되는지 알수 있을 겁니다..

• format_list_bulleted 코딩/React
• · 2022. 2. 20.
• textsms