본문 바로가기

전체 글393

Supabase 회원가입 + 별도 데이터 테이블에 동시 기록하기 상황Supabase에서 기본으로 제공하는 이메일 회원가입을 하면 Supabase의 authentication에 유저의 메타데이터가 저장된다.그런데 데이터테이블의 관점으로 봤을 때 이 메타 데이터는 한 셀이 json 형태의 객체로 저장되어 있어 데이터를 가공하기가 복잡하다. 코드가 복잡해질 수 있다.따라서 사용자에게 닉네임, 집 주소 등 받아야 하는 데이터가 많으면 많아질 수록 이 기본 기능만으로는 부족함을 느낄 수 있고, 찜하기, 댓글 기능 등 다른 데이터들과 관계형 데이터베이스 기반으로 외래 키를 설정하는 데 있어서도 부족함이 있다.따라서 이런 경우 별도로 user 데이터를 만들어 관리하는 것이 더 편리하다.전체 코드import React, { useEffect, useState } from 'reac.. Programing/Server 2024. 6. 23.
2024-06-21 Supabase를 통한 회원 인증/인가 관리 기능 구현 회고 파일구조src components SignUp.jsx Login.jsx Introduction.jsx signInWithKakako.js checkSignIn.js api api.js supabaseClient.js hooks usePlaces.js useLogout.js store store.js구현모습 상단 헤더에서 회원 인증/인가 상태에 따라 조건부 렌더링서버로부터 인증된 사용자는 로그인 버튼 X, 찜목록과 로그아웃 버튼이 렌더링 되도록 설정로컬에서 토큰을 활용한 인증 방식은 보안 취약 요소가 있을 것으로 생각되어 JWT 세션을 서버로부터 인증받아 사이트에서 서비스 사용을 조건부로 사용 가능하도록 모든 컴포넌트에서 일부 서비스 보호마우스 .. Programing/TIL 2024. 6. 22.
Pure React : Modal Modal 컴포넌트 예제import styled from 'styled-components';const ModalWindow = styled.div` position: fixed; background-color: rgba(0, 0, 0, 0.7); top: 0; right: 0; bottom: 0; left: 0; z-index: 999; visibility: hidden; opacity: 0; pointer-events: none; transition: all 0.3s; &.open { visibility: visible; opacity: 1; pointer-events: auto; } & > div { width: 400px; height: 60vh.. Programing/CSS 2024. 6. 22.
입력 필드 유효성 검사 상태 만들기 const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [error, setError] = useState(''); const [isButtonDisabled, setIsButtonDisabled] = useState(true);유효성 검사 함수 만들기const validateEmail = (email) => { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(email); };.. Programing/React 2024. 6. 22.
API key 환경 변수로 설정하기 (.env) 예를 들어 아래와 같이 fetch를 하는 코드에 API Key가 필요하다고 가정하자. tanstack 쿼리는 리액트 라이브러리이지만 기본적인 fetch 함수에도 통용이 되는 개념이다. import { useQuery } from '@tanstack/react-query';import axios from 'axios';function useFetch() { const apiUrl = 'API URL 또는 Key'; const { data, error, isPending } = useQuery({ queryKey: ['data'], queryFn: async () => { try { const response = await axios.get(apiUrl); r.. Programing/JavaScript 2024. 6. 22.
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.

티스토리툴바