joycie416 님의 블로그

'App Router'를 기준으로 supabase의 server side auth를 설정해보려고 한다. 서버와 브라우저에서 작동하는 방식이 달라 server와 client용 supabase client를 분리해야 한다. 1 단계`@supabase/supabase-js`와 `@supabase/ssr `을 먼저 설치하자. 2 단계supabase에 프로젝트를 만들고 Project Url와 Anon Key를 `.env.local`에 저장하자.  3 단계server, client component에서 사용할 supabase client를 생성하는 함수를 export하자. `src/utils/supabase` 폴더를 만들고 다음 두 파일을 저장하자.`client/ts`더보기import { createBrowserC..

storage에 저장한 이미지를 불러오기 위해 storage에서 publicUrl을 가져오려고 했다. 그런데 url은 만들어지는데, 계속 이미지가 뜨지 않는 오류가 발생했다. 해당 url을 직접 브라우저에 입력해서 확인해보니 아래와 같은 값을 볼 수 있었다.{"statusCode":"404","error":"Bucket not found","message":"Bucket not found"} 조금 검색해보니 해당 버킷을 'public'으로 설정하지 않아서 발생한 오류였다. 해결방법 1 - 버킷을 public으로 설정하기따라서 storage의 해당 버킷 이름의 오른쪽에 토글 버튼을 눌러 'edit bucket'에 들어가서 public으로 바꿔주면 된다. 이러면 `getPublicUrl` 메소드의 값을 잘 ..

이미 supabase Docs에서 친절하게 설명해주고 있지만 정리해보려고 한다. Table데이터 저장하기먼저 Table에 데이터를 추가하려면 아래와 같이 코드를 작성하면 된다. const addData = async (post) => { const { error } = await supabase.from().insert(); if (error) { throw error; } else { console.log("add data succeed"); } }; 데이터 불러오기아래 코드는 첫 렌더링 후에만 불러와야하는 과정 중에 있다고 가정했을 때의 코드이다. 따라서 `useEffect`를 사용하고 의존성 배열(dependency array)을 아래와 같이 작성했다. ..