24.01.18 수파 베이스 회원가입 추가 정보 넣기

회원가입 시에 닉네임을 추가할 수 있도록 해보았습니다

import React, { useState } from 'react';
import { supabase } from 'shared/supabase';
import { Link, useNavigate } from 'react-router-dom';
import { StyledSignup, StyledForm, StyledInput, StyledButton, StyledH1, StyledLabel } from './styles';
interface FormData {
  // displayname: string;
  email: string;
  password: string;
  displayName: string;
}

interface UserExtraData {
  displayName: string;
}

function Signup() {
  const navigate = useNavigate();

  const [formData, setFormData] = useState<FormData>({
    email: '',
    password: '',
    displayName: ''
  });

  const [errors, setErrors] = useState<Record<string, string>>({});

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSignup = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    try {
      const { data, error } = await supabase.auth.signUp({
        email: formData.email,
        password: formData.password,
        options: {
          data: {
            displayName: formData.displayName
          }
        }
      });

      if (error) {
        console.error(error);
        alert('ID와 password를 확인해주세요');
      } else {
        console.log(data);
        alert('회원가입을 환영합니다');
        navigate('/login');
      }
    } catch (error) {
      console.error(error);
      alert('An error occurred during signup');
    }
  };

  return (
    <StyledSignup>
      <StyledH1>회원 가입</StyledH1>
      <StyledForm onSubmit={handleSignup}>
        {/* <div>
          <label htmlFor="displayname">이메일</label>
          <input type="displayname" id="displayname" name="displayname" value={formData.displayname} onChange={handleChange} />
          {errors.displayname && <p>{errors.displayname}</p>}
        </div> */}
        <StyledLabel htmlFor="email">이메일</StyledLabel>
        <StyledInput
          placeholder="이메일"
          type="email"
          id="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
        {errors.email && <p>{errors.email}</p>}

        <StyledLabel htmlFor="password">비밀번호</StyledLabel>
        <StyledInput
          placeholder="비밀번호"
          type="password"
          id="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
        {errors.password && <p>{errors.password}</p>}

        <StyledLabel htmlFor="displayName">닉네임</StyledLabel>
        <StyledInput
          placeholder="닉네임"
          type="text"
          id="displayName"
          name="displayName"
          value={formData.displayName}
          onChange={handleChange}
        />
        {errors.displayName && <p>{errors.displayName}</p>}

        <StyledButton type="submit">가입하기</StyledButton>
      </StyledForm>

      <Link to="/login">
        <StyledButton>로그인 하러 가기</StyledButton>
      </Link>
    </StyledSignup>
  );
}

export default Signup;

 

 

디스플레이 네임으로 정상적으로 입력이 되네요

하지만 회원가입을 하면 자동으로 유저정보를 저장하는 테이블에는 저장이 안 되는 상황

 

 

 

 

ERROR: 42710: policy "public profiles are viewed by everyone." for table "userinfo" already exists

오류: 42710: 정책 "공용 프로필은 모두가 봅니다." 테이블 "userinfo"가 이미 있습니다

이미 트리거와 함수가 만들어져 있나 싶어서

SQL 배울걸...

 

3번째 줄 해석 : public 스키마(schema)에서 userInfo라는 테이블에

(id, email, username, avatar_url) 이름의 colunm에 넣을 거다

 

4번째 줄 해석 : 정보가 순서대로 들어가고 new 표시는 회원가입을 새로 할 때 생성된 것들만 들어간다는 뜻

raw_user_meta_data

 

여기에는 정보가 객체 안에 들어가 있기에

( new.raw_user_meta_data->>'displayName') 이런 식으로 가져올 항목을 골라줍니다

 

 

auth 테이블에 특정 coulom을 지정

(Table Editor에서 ) auth 테이블 들어간 후 users 확인

begin
insert into public.userInfo(id, email, username, avatar_url)
values (new.id, new.email, new.raw_user_meta_data->>'displayName', new.raw_user_meta_data->>'avatar_url');
return new;
end;

 

SQL 에디터로 만들어도 가능합니다 (수파 베이스 자체 AI)

이전에 만들어진 함수를 직접 수정하였습니다

 

지정해둔 테이블에 정상적으로 정보가 들어오고 있습니다, 성공!

---

원래 대로라면 그냥 바로 auth.user에서 바로 회원정보를 가져오면 되는 거 아닌가

(맞습니다 사실 지금 알았어요)

하지만 회원가입 후 유저 정보를 보이는 테이블에 따로 관리하고

그 테이블에 회원마다 필요한 정보를 추가할 수 있기에 이런 방법을 사용하였습니다

(ex 유저의 자기소개)

 

---

27.프론트엔드 성능최적화를 위한 방법이 있다면 말씀해주시고 그 중 프로젝트에서 활용한 경험이 있다면 설명해주세요.

답변

JavaScript, CSS, HTML 파일의 공백, 주석 및 불필요한 문자를 제거하여 파일 크기를 줄입니다, 실제 프로젝트 시에도 기본적으로 지키는 방법입니다, JavaScript 파일이 페이지 로딩을 차단하지 않도록 비동기적으로 로드합니다. 외부 데이터를 불러올 때 async 속성을 추가하여 JS 파일을 비동기로 로드하였습니다.

 

28.Javascript event loop에 대해서 설명해주세요.

답변

JavaScript의 이벤트 루프는 싱글 스레드로 동작하며, 비동기 작업을 처리하는 방식을 관리합니다. Call Stack, Web APIs, Task Queue로 구성되어 있으며, 비동기 작업은 웹 API에서 백그라운드에서 처리되고, 완료되면 콜백 함수가 태스크 큐로 이동합니다. 이벤트 루프는 호출 스택이 비어있을 때 태스크 큐에서 대기하고 있는 작업들을 순차적으로 호출 스택으로 이동시킵니다. 이러한 방식으로 JavaScript는 비동기 작업을 효과적으로 처리면서 응답성을 유지할 수 있습니다.