supabase (7) 썸네일형 리스트형 Supabase에서 타입 설정하기 오늘은 Next.js에서 Supabase를 사용할 때 자동으로 타입을 생성하고 적용하는 방법에 대해 설명해보려고 합니다! Supabase 로그인 📖먼저 터미널에서 `npx supabase login`를 입력해 Supabase 로그인을 해줍니다.npx supabase login 그럼 아래 화면으로 이동하게 되는데 인증 번호를 복사하고 터미널에 붙여 넣기를 해줍니다. Supabase 프로젝트 초기화📖로그인을 했다면 `npx supabase init`를 입력해 Supabase와 관련된 기본 설정 파일들을 생성해 줍니다.(자동으로 생성)npx supabase init Supabase 타입 생성📖supabase 홈페이지에서 Project_id를 복사한 후 아래 명령어를 입력해 원하는 위치에 `databa.. [트러블 슈팅] issue daily - 로그인 상태 새로고침 시 유지하기 로그인 상태 새로고침 시 유지하기를 `Supabase Auth`와 `Zustand`로 해결한 트러블 슈팅에 대해서 정리해 봤습니다.발생한 오류 🔥사용자가 로그인 후 마이페이지와 로그아웃 버튼이 정상적으로 보이지만, 페이지를 새로고침 하면 다시 로그인 버튼이 나타나는 문제가 있었습니다. 즉, 사용자의 로그인 상태가 새로고침 후에도 유지되지 않는 문제가 생겼습니다. 해결 과정 🔎문제 분석 새로고침 시 클라이언트 측에서 전역 상태가 초기화 돼 상태가 유지되지 않는 것을 발견했습니다. Supabase의 `auth.getUser()`를 사용해 서버 측에서 유저 정보를 가져올 수 있다는 점을 고려해 이 정보를 전역 상태로 관리해 새로고침 후에도 상태가 유지되도록 해야 했습니다. Supabase와 Zustand.. [트러블 슈팅] supabase에서 Google, Kakao 로그인 시 신규 사용자 저장 오류 소셜 로그인을 구현하는 과정에서 발생한 트러블 슈팅에 대해 정리해 보려고 합니다.http://auth/auth-code-error#error=server_error&error_code=500&error_description=Database+error+saving+new+user 발생한 오류 🔥Google과 Kakao로 로그인을 시도할 때 신규 사용자를 데이터베이스에 저장하는 과정에서 다음과 같은 오류가 발생했습니다. 해결 과정 🔎기존 트리거 함수는 다음과 같습니다.create function public.add_new_user()returns trigger as $$beginif new.raw_app_meta_data ->> 'provider' = 'email' theninsert into publ.. [Next, Supabase Auth] 이메일, 소셜 로그인 기능 구현 및 트리거 설정 Supabase Auth 선택 이유 ✨Supabase는 PostgreSQL을 사용해 데이터 정규화, 복잡한 쿼리 작업 등 SQL의 모든 기능을 사용할 수 있습니다. 그리고 요즘 떠오르는 기술이며 공식 문서 또한 너무 잘 되어 있기 때문에 적용하기 쉽다고 판단해서 선택하게 되었습니다. 사용 방법 📖Authentication > ProvidersProviders 탭으로 이동하면 다양한 로그인을 선택할 수 있습니다.이메일을 이용해 간단한 로그인 구현과 OAuth를 이용한 소셜 로그인도 구현할 수 있습니다. ✨ Provider를 등록하는 방법은 공식 문서에 너무 잘 나와 있으니 생략하도록 하겠습니다. Google Login with Google | Supabase DocsUse Sign in with Goo.. [트러블 슈팅] 방콕 스타일 (새로고침 시 좋아요 랜덤 활성화 이슈) 팀 프로젝트 방콕스타일을 진행하면서 발생한 트러블 슈팅입니다.발생한 오류 🔥방콕 스타일 뉴스피드 프로젝트에서 게시물 목록을 렌더링 하던 중 페이지를 새로고침했을 때, `좋아요`가 랜덤으로 활성화된 상태로 표시되는 오류가 발생했습니다. 좋아요가 랜덤으로 표시되는 건 아주 큰 문제였기 때문에 해결이 시급했습니다. 해결 과정 🔎useOnAuthStateChange supabase에서 auth 관련 event가 발생할 때마다 알림을 받는 메서드입니다. 그래서 session이 있으면 컨텍스트에 `session.user`정보를 보내서 컨텍스트에서 유저 정보를 저장하게 됩니다.// 유저정보를 context에 저장하는 함수const useOnAuthStateChange = () => { const { signI.. [트러블 슈팅] 방콕 스타일 (supabase RLS 오류) 팀 프로젝트 방콕스타일을 진행하면서 발생한 트러블 슈팅입니다. Supabase RLS(행 수준 보안) 상태 업데이트 오류발생한 오류 🔥supabase를 사용하면서 좋아요 테이블 상태 업데이트를 시도할 때 결과가 반영되지 않고 빈 배열만 반환하는 오류가 발생했습니다. 해결 과정 🔎RLS에 대해 인지하지 못하고 있을 때 요청을 보내는 쿼리문이 잘못됐나 여러 번 확인을 거치고 칼럼명과 쿼리문을 확인해 봤는데 아무런 문제가 없었습니다. 그래서 오류를 발견하기까지 오랜시간이 걸렸습니다. 그러다가 빈 배열을 반환하는 이유가 RLS 정책에 관련된 걸 알게 되었고 확인을 진행했습니다. 정책 확인 우선, RLS 정책이 올바르게 설정되었는지 점검했는데 설정이 안되어 있는 것을 확인했습니다. 그래서 해당 정책을 다시 한.. [팀 프로젝트] 방콕스타일 - 좋아요 기능 구현 좋아요 기능 구현 이유 ✨사용자 참여 유도`좋아요` 버튼을 통해 간단한 클릭만으로 콘텐츠에 대한 피드백을 제공할 수 있고 댓글 작성보다 간편해 사용자들이 자주 상호작용할 수 있게 만들기 위해 구현을 하기로 결정했습니다. 구현 📖 `getAllData`메서드를 비동기로 실행해 게시물 데이터를 가져옵니다.const response = await getAllData() `supabase`에서 데이터를 가져올 때 posts 테이블과 likes 테이블을 조인해 사용자가 좋아요를 누른 게시물에 대한 정보를 함께 가져와 반환합니다.const getAllData = async () => { try{ // 전체 게시글 데이터 가져오기 const response = await supabase .f.. 이전 1 다음
