[내배캠] 6/12 40일차

오늘 한것

api

• auth.api.js

 async signUp(data) {
    const path = "/register";
    const response = await this.#axios.post(path, data);
    const result = response.data;
    return result;
  }

  async login(data) {
    const path = "/login";
    const response = await this.#axios.post(path, data);
    const result = response.data;
    return result;
  }
}

이렇게 회원가입, 로그인을 axios로 받아오고

• 회원가입.jsx

//tanstack query로 data값을 이용해 사용자 생성
  const { mutateAsync: signUp } = useMutation({
    //axios로 data값 넣고
    mutationFn: (data) => api.auth.signUp(data),
  });

회원가입에서 mutateAsync로 값을 생성해주었다.
이렇게 해서 로그인 화면으로 넘어가면,

로그인을 하게 되는데

여기서 tanstack Query의 onSuccess를 사용해서
로그인이 성공하였을 시, zustand에 authStore에는 persist를 사용해서 token값을 state와 localstorage 두 영역에 다 넣게 하고
userStore에는 user의 정보값을 넣었다.

const { mutateAsync: login, isPending } = useMutation({
    mutationFn: (data) => api.auth.login(data),
    onSuccess: (data) => {
      console.log(data);
      const user = {
        nickname: data.nickname,
        userId: data.userId,
        avatar: data.avatar,
      };
      initUser(data.accessToken);
      loginUser(user);
    },
  });

이렇게 user 정보를 저장해서

header에는 token이 있을 시, 이름 불러오고
mypage에도 유저의 정보를 불러오게 하였다.

지금, 로그인 했을 때만 값을 저장하게 해두어서
메인 페이지를 접속했을 때에도, localStorage에 있는 token값을 받아와야 한다.

Tanstack Query로 서버의 변화에 따라 클라이언트 상태 값을 편리하게 다룰 수 있는 것이 매력적으로 느껴진다.