Realtime 기능을 구현하기 전에  사용하고 있는테이블에 Realtime 기능을 on 해줘야한다.  현재는 off로 설정되어 있으므로  enable realtime을 통해   on으로 활성화를 해준다.   이제 코드를 구현하면되는데 , 현재 필요한 액션은 두 개다. 1. 메시지를 보내는 기능 (insert)export async function sendMessage({ message, chatUserId }) {  const supabase = await createServerSupabaseClient();  //현재 접속중인 유저의 정보를 getSession으로부터 가져온다.  const {    data: { session },    error,  } = await supabase.auth.get..

https://supabase.com/docs/guides/realtime Realtime | Supabase DocsSend and receive messages to connected clients.supabase.com   Realtime 에는 세 가지 방식이 있음  BroadcastBroadcast 방식은 모든 사용자에게 동일한 데이터를 전송하는 방식입니다.이 방식은 채팅 시스템에서 실시간으로 메시지를 전송하거나, 다수의 사용자에게 동시에 알림을 보낼 때 유용합니다. Supabase의 Realtime 서비스는 이러한 Broadcast 방식을 지원하며, 사용자는 이를 이용하여 실시간 채팅 기능 등을 구현할 수 있습니다. PresencePresence 방식은 현재 연결된 사용자를 실시간으로 추적하는 ..

https://velog.io/@brgndy/Next.js-13-StrictMode-%ED%95%B4%EC%A0%9C  Next.js 13 StrictMode 해제- next.config.js 에서 reactStrictMode: false, 추가velog.iohttps://velog.io/@citron03/React%EC%9D%98-StrictMode%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C React의 StrictMode에 대해서React.StrictMode는 애플리케이션의 잠재적인 문제를 알아내기 위한 도구이다.velog.io  리액트에서는 StrictMode 컴포넌트가 있어서App 을 감싸고 있는 > 를 제거하면 된다. Next.js에서는 어떻게 비활성화하나 해서 찾아봄  ..

https://randomuser.me Random User Generator | HomeCopyright Notice All randomly generated photos were hand picked from the authorized section of UI Faces. Please visit UI Faces FAQ for more information regarding how you can use these faces.randomuser.me  랜덤한 사람들의 이미지들을 넣을 수 있는 무료 API       utils 폴더에  random.ts로 만들어놓으면 불러다 쓰기 편함export const getRandomImage = (index: number) => { return `https://r..

https://supabase.com/docs/guides/auth/social-login/auth-kakao Login with Kakao | Supabase DocsAdd Kakao OAuth to your Supabase projectsupabase.com   https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com      API 키 발급을 해야함  REST API 키를 복사해서    Supabase 에서 인증 ->프로바이더에서 카카오 인증   아래의 Kakao enabled을 활성화 한 후 RES..

로그인 기능 구현  Web Client 에서  supabase로 로그인 구현할거임 email, password를 통한 supabase.auth.signInWithPassword({...})  진행 signIn 컴포넌트에서 코드를 추가한다.  const supabase = createBrowserSupabaseClient();  const signInMutation = useMutation({    mutationFn: async () => {      const { error, data } = await supabase.auth.signInWithPassword({        email,        password,      });      if (data) {        console.log(da..

https://supabase.com/docs/guides/auth Auth | Supabase DocsUse Supabase to Authenticate and Authorize your users.supabase.com https://lopunko.notion.site/Part-3-Supabase-Auth-1ba2621a1b5345f3b02d2059d47ac7a3 Part 3. Supabase Auth 소개 및 인증방식 기획 | NotionSupabase Authlopunko.notion.site   Supabase AuthSupabase Auth는 다양한 인증 방식을 지원하는 인증 시스템입니다.사용자 인증 및 권한 관리를 제공합니다.이메일 인증, Magic Link를 통한 비밀번호 없는 로그인, 전..

https://recoiljs.org/ko/docs/introduction/getting-started/ Recoil 시작하기 | RecoilReact 애플리케이션 생성하기recoiljs.org 전역 상태 관리 라이브러리 Recoil  예를들어 header에서 받는 검색어 데이터를  다른 컴포넌트로 전달하고자 할 때  단반향으로 전달해야해서 계속  props로 타고 넘겨줘야하는 단점이 있다.  하지만 전역으로 상태를 관리하면 이 작업이 단순화돼서 모든 컴포넌트에 바로 데이터를 공유 할 수 있음   하지만 Recoil은 기본적으로 client 라이브러리임 별도의 프로바이더를 정의 해주고 적용한다. npm install recoil   Atom: Recoil에서 atom은 상태의 단위입니다. atom은 우리..

https://supabase.com/ Supabase | The Open Source Firebase AlternativeBuild production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.supabase.com     New bucket 클릭  polices -> new policy  For full customization 클릭(비교적 간편하게 폴리쉬 생성가능)   누구나 사용가능하게 anon 으로 설정했음   이제  업로드 코드를 구현하면됨 .env 파일에 storage id 로 환경..

CRUD SERVER ACTION 구현하기  "use server";import { Database } from "types_db";export type TodoRow = Database["public"]["Tables"]["todo"]["Row"];export type TodoRowInsert = Database["public"]["Tables"]["todo"]["Insert"];export type TodoRowUpdate = Database["public"]["Tables"]["todo"]["Update"];   supabase 설정하면서 생성된 types_db.ts를 보면 todo 테이블이 생성되어 있는 것을 확인할 수 있다. actions에서 그 테이블로 작업할거기때문에 import해서 사용한다..