들어가며이 글은 Supabse 프로젝트 생성이 완료되어있음을 전제하에 작성되었습니다. 시작하기구글 클라우드 프로젝트 생성구글 클라우드 이동https://console.cloud.google.com/welcome?invt=AbuQag&project=capstonedesign-12cb0 Google 클라우드 플랫폼로그인 Google 클라우드 플랫폼으로 이동accounts.google.com새 프로젝트 생성생성된 프로젝트로 이동 동의화면 구성구글 클라우드 이동https://console.cloud.google.com/auth/overview?invt=AbuQcA&project=app-poomasi Google 클라우드 플랫폼로그인 Google 클라우드 플랫폼으로 이동accounts.google.com프로젝트..
들어가며이 글은 아래 게시물과 연계되는 내용을 다루고 있습니다.꼭 아래 게시물의 내용을 모두 완료 후 읽어주세요. 소스 코드https://github.com/LDK1009/Supabase-FCM-Push-Notification GitHub - LDK1009/Supabase-FCM-Push-Notification: Next.js + Supabase + FCM 을 활용한 푸쉬 알림 기능 소스코드 저장Next.js + Supabase + FCM 을 활용한 푸쉬 알림 기능 소스코드 저장소입니다. - LDK1009/Supabase-FCM-Push-Notificationgithub.comgit clone https://github.com/LDK1009/Supabase-FCM-Push-Notification.git ..
들어가며이 글은 Supabase 회원가입이 완료되어있음을 가정하에 진행합니다.회원가입 미완료 상태라면 꼭 회원가입을 완료 후 진행 부탁드립니다. 대시보드 이동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 프로젝트 생성인풋폼에 입력값을 입력합니다.각 인풋폼의 역할은 아래와 같습니다Organization : 프로젝트를 생성할 조직..
배경Supabase + Next.js를 활용한 풀스택 프로젝트 개발 중이었습니다.줄바꿈 테스트를 위해 Supabase Table Editer에서 직접 기존 컬럼값에 \n를 삽입 후 저장하였습니다. 수정을 통해 \n이 포함된 텍스트 데이터를 프론트엔드에서 불러와 \n를 기준으로 줄바꿈하여 렌더링하고 싶었고 아래와 같은 결과물을 기대했습니다.// JSX {verdict.reasoning}// Styleconst VerdictText = styled(Typography)` white-space: pre-line;`;// 예상 결과// 아래 텍스트와 같이 줄바꿈 문자( \n )를 기준으로 줄바꿈이 되어 렌더링되는 것을 기대했다.남자친구는 현재 취업 스트레스로 인해 정서적 지지를 필요로 하고 있으며, 여자..
Supabase를 사용하여 관계형 데이터를 조회할 때 종종 중첩된 데이터 구조를 마주하게 됩니다.이런 데이터를 React 컴포넌트에서 효과적으로 처리하는 방법을 알아보겠습니다.Supabase 조인 쿼리의 응답 구조Supabase에서 외래 키 관계가 있는 테이블을 조인하여 조회할 때(예: `select("cases(*)")`), 응답 데이터는 다음과 같은 중첩 구조로 반환됩니다[ { cases: { id: 1, title: "사례 1", ... } }, { cases: { id: 2, title: "사례 2", ... } }, ...]이 데이터를 단순히 `map`으로 변환하면:const formattedData = response.data?.map((item) => item.cases);// 결과:[..
관련 문서https://github.com/LDK1009/Next_Start_Template GitHub - LDK1009/Next_Start_Template: Typescript + Next15 + styled-components + MUI 프로젝트 템플릿입니다.Typescript + Next15 + styled-components + MUI 프로젝트 템플릿입니다. - LDK1009/Next_Start_Templategithub.com 방법supabase 프로젝트 생성 카카오톡 로그인 활성화 카카오톡 디벨로퍼 세팅 [Supabase] Supabase 카카오톡 로그인 기능 사용방법 A to Z카카오톡 디벨로퍼 세팅1. 로그인 및 어플리케이션 생성1) 카카오 디벨로퍼 로그인 2) '내 애플리케이션' 클릭..
만약 supabase api key에 문제가 없을에도 불구하고 400 에러가 발생한다면 한 번에 너무 많은 데이터를 삽입하고 있는 것은 아닌지 확인해야합니다.Supabase bulk insert 1회 최대 삽입 행 개수는 30개입니다.그럼 너무 많다고 에러를 띄워줘..... 테스트 코드"use client";import { getCurrentUserUID } from "@/service/auth";import { postQuestions } from "@/service/table/questions";const page = () => { async function printUid() { const { data: uid, error } = await getCurrentUserUID(); if (..
