리액트 심화 2일 차 @로그인/회원 가입 기능

오늘은 개인 프로젝트를 시작했다. 개인 프로젝트 주제는 MBTI테스트를 만들어서 배포하는 것으로, JWT인증과 json server를 주로 이용하여 여태껏 데이터를 저장하지 못하거나 외부 데이터베이스에 의존하던 것에서 벗어나 자체적으로 데이터를 보관하고 활용할 수 있도록 하는 것이 목적이다. 

 

오늘은 우선 로그인/회원가입 기능을 만들어보았다. 이를 구현하기 위해서 오후 시간을 다 썼는데, 대부분의 이유가 회원가입 기능 테스트 할 때 내가 '이미 존재하는 아이디로 회원가입'을 하려고 했기 때문이었다. 방금 전까지 supabase로 auth 기능을 사용하던 경험이 너무 크게 다가와서 JWT가 공개된 API라는 것을 잊었다. 다행히 나중에 가서 Thunder Client를 사용하여 이런 문제였다는 것을 알게 되었는데, 그동안 시간낭비하고 스트레스 받았던 걸 생각하면 허무한 결말이 아닐 수 없다... 

 

그래도 저번 프로젝트에서 마음에 걸렸던 sessionstorage에 로그인 사용자정보를 저장해서 새로고침해도 login상태를 유지하게 하는 로직을 짤 수 있었기 때문에 마음이 한결 편해지기도 했다. 또 이러한 로그인 정보는 zustand를 시험적으로 사용하여 전역상태관리로 관리하여 로그인 상태에 따른 라우터 기능 등의 ux 관련 로직도 잘 완성할 수 있었다. 

 

아래가 코드이다.

const useAuthStore = create((set) => {
  return {
    isLogin: sessionStorage.getItem("loginToken"),
    // 로그인 시 사용
    inLogin: () => {
      set(() => {
        return { isLogin: sessionStorage.getItem("loginToken") };
      });
    },
    // 로그아웃 시 사용
    outLogin: () => {
      set(() => {
        return { isLogin: sessionStorage.getItem("loginToken") };
      });
    },
  };
});

 

번거롭긴 하지만 이렇게 state를 엮어두지 않으면 리렌더링 문제가 있기 때문에 일단 이렇게 해두었다. 

 

일단 오늘은 이렇게 일정을 종료하려고 하는데... 제출이 다음 주 수요일이고 화, 수요일에는 style과 트러블슈팅을 할 것을 생각하면 주말과 월요일까지 열심히 코딩을 해야겠다. 힘내자~