[TIL20240621] login,signup등 개인프로젝트 제작

오전 오후 저녁 나눌 것 없이 오후에 수업 들은 것 빼고는 하루종일 개인 프로젝트를 제작했음.

오늘 한 트러블 슈팅에 대해서 몇가지 적어보겠음.

1. 로그인 상태 체크
   처음 시도했던 방법은 axios의 interceptor를 쓰는 것이였다.

	this.#axios.interceptors.request.use(
      async (config) => {
        await this.auth.getUserInfo();

        return config;
      },
      (error) => {
        return error;
      }
    );

써보니 모든 요청에 대해 체크해버려서 화면에 출력해주든 말든 뭐든 계속 체크해버리는 것이 문제이기에 abortcontroller를 사용해야 되는 것일 수 있다는 충고를 받았지만 흠..실패..!
주말간에 해당 기술에 대해 공부 해볼 예정이다.

두번째로 useMutaion안에서 해결하는 방법이였다.

 const { data: userInfo, error: userInfoError } = useQuery({
    queryKey: ["userInfo"],
    queryFn: async () => {
      const info = await api.auth.getUserInfo();
      setUserInfo(info);
      return info;
    },
  });

위처럼 useQuery든 mutaion이든 Fn 내부에서 여러 작업을 해주려면 async await를 해주어야 한다더라...
그래서 페이지 이동시에 로그인 상태를 확인하기위해 위의 코드를 짯고 CRUD에 대해선 아래와 같이 로직을 짜서 로그인 현황을 체크했다.

const { mutate: updateRecordToServer } = useMutation({
    mutationFn: async ({ id, data }) => {
      await api.auth.getUserInfo();

      return await api.record.updateRecord(id, data);
    },
    onSuccess: () => queryClient.invalidateQueries(["records"]),
    onError: () => {
      signOut(), alert("로그인을 하셔야 수정 가능합니다.");
    },
  });

2. 새로고침 시에 로그인 데이터가 사라지는 것.
   물론 토큰도 남아있고 하지만 받아온 유저 데이터는 state로 관리를 해주지 않으면 유지 되지 않더라.
   고로 zustand를 이용하여 유저에 대한 정보를 관리해줬다.

// state.js

export const initialState = {
  isAuthenticated: false,
  curUserInfo: {},
};

export const actions = (set) => ({
  signIn: (token) => {
    localStorage.setItem("accessToken", token);
    set({ isAuthenticated: true });
  },
  signOut: () => {
    localStorage.removeItem("accessToken");
    set({ isAuthenticated: false, curUserInfo: {} });
  },
  setUserInfo: (data) => {
    set({ curUserInfo: data });
  },
});

아직 로그인 체크? 또는 로그인 등등 api 송수신 간에 뭔가 딜레이가 존재하는 것이 이 또한 해결해야 할 난관인듯 싶다..ㅜ