본문 바로가기

분류 전체보기402

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.

티스토리툴바