본문 바로가기

전체 글402

2024-06-20 리액트 심화 팀 프로젝트 회고 (회원 인증/인가 파트) 과정 정보리액트 심화 : 아웃소싱 프로젝트기간 : 2024-06-17 (월) ~ 2024-06-19 (금)조 : A10주제 : 행사 정보 사이트맡은 역할supabase 셋업user authentication/authorization회원가입 / 소셜 로그인자체 평가팀 프로젝트 : 10 / 10 점점수 부여 이유 : 남겨 둔 버그도 없이 깔끔하게 진행됨.개인 / 팀 평가팀잘한 점서로가 작성한 코드를 이해할 수 있을 정도의 수준으로 작성하여 컴포넌트 간 코드 재사용이나 리팩토링이 용이하였음.팀원 간 실력 격차나 견해의 차이를 활발한 소통으로 좁힐 수 있었고, 나만의 언어가 아닌 팀 전체의 언어로 소통하여 최상의 퍼포먼스를 낼 수 있었음.아쉬운 점팀 프로젝트에서 아쉬운 점은 없었고 과제 기간만 길었다면 코드 최.. Programing/TIL 2024. 6. 21.
pull 오류 : need to specify how to reconcile them 해결 방법 오류 내용hint: You have divergent branches and need to specify how to reconcile them.hint: You can do so by running one of the following commands sometime beforehint: your next pull:hint: hint: git config pull.rebase false # mergehint: git config pull.rebase true # rebasehint: git config pull.ff only # fast-forward onlyhint: hint: You can replace "git config" with "git config --global.. Programing/Git 2024. 6. 21.
supabase CRUD - 이미지 파일 선택 후 미리보기로 렌더링하기 상황아래와 같이 input type = file만으로 이미지를 선택하게 되면, 해당 이미지가 잘 선택되었는지 사용자가 알기가 어렵다.사용자 경험을 증대시킬 여러 방식이 있을 수 있겠다. 선택한 파일의 파일명을 렌더링 해주어도 된다. 하지만 직접적으로 어떤 이미지를 선택했는지 보여주고자 한다. 일단 이미지 선택하기 버튼을 누르면 이미지가 supabase 서버로 업로드 되는 로직이 이미 구현되어 있다. useEffect(() => { if (image && typeof image !== 'string' && image instanceof File) { console.log('이미지 선택됨 =>', image); handleImgUpload(image); } }, [image].. Programing/Server 2024. 6. 20.
supabase 카카오 소셜 로그인 기능 구현하기 참고자료supabase 공식문서https://supabase.com/docs/guides/auth/social-login/auth-kakao Login with Kakao | Supabase DocsAdd Kakao OAuth to your Supabase projectsupabase.comKakao Developers 사이트 접속아래 카카오 개발자 사이트 접속 후 로그인하기.https://supabase.com/docs/guides/auth/social-login/auth-kakao Login with Kakao | Supabase DocsAdd Kakao OAuth to your Supabase projectsupabase.com애플리케이션 추가하기상단 내 애플리케이션 - 애플리케이션 추가하기.프로젝.. Programing/Server 2024. 6. 20.
서버 통신으로 받은 사용자 인증 상태로 조건부 렌더링하기 들어가기에 앞서이 포스팅은 나의 삽질과 학습의 흐름을 기술한 것이니, 해결 방법이 궁금하신 독자가 계시다면 맨 마지막 목차로 이동하길 바란다. supabase의 getUser() 메서드로 유저의 인증 상태롤 서버로부터 받아옴.이를 Zustand를 활용하여 전역 상태로 만듦.이 전역 상태를 활용해서 헤더 컴포넌트에서 유저가 로그아웃 상태면 로그인, 회원가입 버튼이 보이게 하고, 로그인 상태이면 로그아웃 버튼만 보이게 조건부 렌더링을 하고자 함.나의 삽질 과정localStorage에 저장된 토큰을 불러와서 토큰이 있으면 인증된 사용자라고 간주. Programing/React 2024. 6. 19.
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.

티스토리툴바