본문 바로가기

전체 글393

supabase 유저 이메일 말고 유저 아이디가 일치하면 업데이트 가능하도록 정책 설정하기 SQL 구문 수정auth테이블에 있는 것이 uuid이고, user_id는 외래키로 묶어 놓은 데이터 테이블의 컬럼명임.create policy "Enable update for users based on uuid"on "public"."hearts"as PERMISSIVEfor UPDATEto publicusing ( (( SELECT auth.uid() AS uid) = user_id))with check ( (( SELECT auth.uid() AS uid) = user_id)); Programing/Server 2024. 6. 19.
2024-06-18 유저 관리 기능에 대한 회고 Supabase를 이용한 회원가입, 로그인, 로그아웃 기능 구현 이번 팀 프로젝트에서 Supabase를 이용한 회원가입, 로그인, 로그아웃 기능을 맡아서 진행했다. 이를 통해 여러 가지를 배울 수 있었다. 먼저, Supabase는 Firebase와 유사한 BaaS(Backend as a Service) 플랫폼이라는 것을 알게 되었다. 특히, Supabase는 PostgreSQL을 기반으로 하고 있어서 SQL 쿼리를 직접 사용할 수 있었다. 이 점 덕분에 데이터베이스 작업이 더욱 직관적이고 유연하게 느껴졌다. 회원가입 기능을 구현할 때는 auth.signUp 메서드를 사용했다. 이 메서드를 통해 간단하게 이메일과 비밀번호를 기반으로 사용자를 등록할 수 있었다. 처음에는 API 사용법이 조금 생소했지만, 공.. Programing/TIL 2024. 6. 18.
Supabase 로그인 기능 구현하기 주의본 포스트에 소개된 내용 중 마지막 부분에 해당하는 조건부 렌더링은 리액트의 특성 상 제대로 작동하지 않는다.Next.js 등을 이용하여 서버 사이드 렌더링을 하지 않는 이상 서버와 통신하여 인증 상태를 받아 오는 방식으로 조건부 렌더링을 하는 것은 리액트의 특성 상 불가능에 가까운 영역이므로 글쓴이와 같이 이틀 간 안 되는 것으로 씨름하다 탈모를 촉진시키지 마시고, 학습용으로 참고만 하길 바란다. 간단한 상황에서 리액트만으로 해결한 방법이 있는데 이는 별도로 React 카테고리에서 별도로 포스팅 하였다.상황이메일 가입 회원회원가입이 되어 authentication 테이블에 유저 정보가 있는 경우를 가정로그인 함수supabase에서는 내장 메서드를 제공한다.이 내장 메서드를 사용하면 로그인과 동시에 .. Programing/Server 2024. 6. 18.
Supabase 회원가입 기능 구현하기 사전 셋업- 환경변수 처리- supabase 변수 만들어서 export- 이메일 인증 풀기이메일 회원가입 함수수파베이스에서 제공하는 코드는 아래와 같다.const { data, error } = await supabase.auth.signInWithPassword({ email: 'example@email.com', password: 'example-password',})이를 그대로 사용하는 것이 아니고, useEffect훅을 사용해서 비동기 함수로 컴포넌트가 마운트 됐을 때 로그인 함수를 실행하도록 해주면 된다.import React, { useEffect } from 'react';import supabase from '../api/supabaseClient';const SignUp = () =>.. Programing/Server 2024. 6. 18.
a 브랜치와 b 브랜치 합치기 상황main이나 dev 등 다른 브랜치에 영향을 주지 않고, a 브랜치에서 b 브랜치의 내용을 끌고 와 a + b 의 형태로 만들고자 한다.방법# 1. a 브랜치로 체크아웃git checkout a# 2. b 브랜치의 내용을 a 브랜치로 병합git merge b# 3. (선택 사항) 충돌이 발생하면 충돌을 해결한 후 커밋# 충돌 해결 후git add .git commit -m "Merge b branch into a branch" Programing/Git 2024. 6. 18.
Supabase 셋업 이후 TanStack Query 커스텀 훅으로 fetch 전역 공유하기 주의Supabase 라이브러리에서 제공하는 내장 함수가 더 좋다.Supabase는 기본적으로 REST API를 지원하기 때문에 아래의 방식이 잘 작동되지만 굳이 Axios Fetch를 보내는 것을 권장하진 않는다.준비물Supabase Project URLAnon-key(Public)라이브러리: axios, TanStack Query파일 트리node_modulespublicsrc assets components api axiosInstance.js hooks usePlaces.js App.jsx main.jsxindex.htmlpackage.json.env.gitignore...파일트리는 위 내용이 전부가 아니고, 기본 파일은 똑같다. 아래 두 개의 파일은 새로 생성.. Programing/React 2024. 6. 17.
로컬에서 브랜치 생성, 삭제하기 브랜치 생성git checkout -b 브랜치이름브랜치 삭제현재 삭제할 브랜치라면, dev 또는 main 브랜치로 이동 후 삭제해야 함.// 다른 브랜치로 이동 후git checkout dev// 브랜치 삭제git branch -d 삭제할브랜치명 Programing/Git 2024. 6. 17.
Supabase Quick Start Supabase란?Backend-as-a-Service(BaaS) 서비스.대표적으로 AWS Amplify, Firebase, Supabase가 있다.관계형 데이터베이스를 지원하는 것이 특징이다.무료 요금제 사용량무제한 API dycjd월 50,000명의 활성 사용자500mb 데이터베이스 저장 공간, 2 Core CPU, RAM 1GB1gb의 파일 스토리지(파일 저장 공간)월 제공 대역폭 5GB사용 방법회원가입https://supabase.com/dashboard/sign-in?returnTo=/projects SupabaseBy continuing, you agree to Supabase's Terms of Service and Privacy Policy, and to receive periodic em.. Programing/Server 2024. 6. 17.
배열.length : 배열의 아이템 개수 렌더링 하기 상황원본 배열 데이터가 있고, 이것이 몇 건인지 렌더링하여 사용자가 직관적으로 데이터의 개수를 파악할 수 있도록 하여 사용자 경험을 높이고자 한다.방법 setIsAsc(!isAsc)}> {isAsc ? '최신순' : '과거순'}{sortedData.length} 건원본데이터배열.length 메서드로 아이템의 개수를 알 수 있다. Programing/JavaScript 2024. 6. 17.
과거순, 최신순 (데이터 정순, 역순) 정렬 버튼 만들기 상황api로 받아 온 데이터가 id별이나 작성순서대로, 순서대로 작성이 되어 있다고 가정했을 때1번 row는 가장 오래된 데이터일 것이다. 따라서 이 데이터를  map 메서드 등을 통해 렌더링 하면 화면에는 과거 순으로 렌더링 된다. 이것을 렌더링 할 때 데이터를 거꾸로 렌더링하고, 이후부터 토글 버튼을 누르면 과거순/최신순으로 바뀌면서 렌더링 되도록 구현 해보고자 한다.방법상태 만들기import { useState } from 'react';function SponsorList() { const [isAsc, setIsAsc] = useState(false); ...상태의 초기값을 true로 주면 아래 이어지는 로직에서는 데이터가 생성된 순서대로 렌더링 되기 때문에 화면에는 역순으로 보인다.기존.. Programing/React 2024. 6. 17.

티스토리툴바