최종프로젝트 4일차 (supabase를 이용한 이메일 회원가입, 로그인)

오늘은 supabase로 이메일,비밀번호를 이용해 회원가입, 로그인 기능 구현에 대해 정리해보려고 한다. (아직 완벽하게 구현한 것은 아니라 중간정리라고 생각) supabase Docs에 친절하게 나와있어 어렵지는 않았다.

1. 회원가입

Docs : https://supabase.com/docs/reference/javascript/auth-signup

Docs에 나와있는대로 코드를 작성해보았다.

export const signUp = async (
  email: string,
  password: string,
  nickname: string,
) => {
  const { data, error } = await supabase.auth.signUp({
    email: email,
    password: password,
    options: {
      // emailRedirectTo: email,
      data: {
        nickname: nickname,
      },
    },
  });
  console.log(data);
  if (error) console.log('error', error);
};

2. 로그인

Docs : https://supabase.com/docs/reference/javascript/auth-signinwithpassword

회원가입과 인자를 전달하는 함수만 다를뿐, 로직은 동일하게 작성했다.

const handleLoginButtonClick = async (
    e: React.FormEvent<HTMLFormElement>,
  ) => {
    e.preventDefault();
    const { data, error } = await supabase.auth.signInWithPassword({
      email: email,
      password: password,
    });

3. 로그아웃

Docs: https://supabase.com/docs/reference/javascript/auth-signout

로그아웃은 아주 간단하다.

export const logOut = async () => {
  const { error } = await supabase.auth.signOut();
  alert('로그아웃 되었습니다');
};

supabase에 로그인 정보가 잘 들어간 것을 볼 수 있다.

<기술면접질문>

• useRef에 대해 설명해주세요.
  useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook입니다. React를 사용하는 프로젝트에서 DOM을 직접 선택해야 하는 상황이 필요한데 그럴 때 useRef를 사용합니다.

• useEffect의 실행 순서에 대해 설명해주세요.
  useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록할 수 있는 React Hook입니다. 기본적으로 useEffect는 마운트 이후에 이루어지고, state변화로 재렌더링 이후, 언마운트 이전에 이루어집니다.