행복을 담는 블로그

[TIL] 심화 프로젝트를 마치며... 본문

TIL

[TIL] 심화 프로젝트를 마치며...

hyun0zin 2024. 3. 26. 09:07

이번 프로젝트를 진행하면서 로그인 기능을 처음 맡게 되었는데, 이부분을 해결하기 위해 상태 유지를 하는 등 많은 우여곡절이 있었던 것 같다.
그 중에서도 상태유지를 하면서 로그인한 정보를 불러와 로그인한 정보가 존재하면, 로그인 상태로 유지하고, 로그인한 정보가 없을 경우 로그아웃 된 상태로 유지하는 hooks을 만들어 사용하였다.

// _hooks > useLoggedIn hook

import { getLoginUserInfo } from "../_components/authComponents/authInfo-api";

export const useLoggedIn = () => {
  const { setIsLoggedIn } = useAuthStore();
  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);

  useEffect(() => {
    const checkLoginStatus = async () => {
      const userInfo = await getLoginUserInfo();
      if (userInfo !== null) {
        // data가 존재 시, 로그인 상태로 설정
        console.log(
          "사용자 정보가 있습니다. 사용자는 로그인했습니다.",
          userInfo
        );
        setIsLoggedIn(true);
      } else {
        // data가 존재하지 않으면, 로그아웃 상태로 설정
        console.log(
          "사용자 정보가 없습니다. 사용자는 로그아웃했습니다.",
          userInfo
        );
        setIsLoggedIn(false);
      }
    };

    checkLoginStatus();
  }, []);

  return isLoggedIn;
};

이번 프로젝트 발표를 마치며...

<5조 피드백>

✔️기술스택 선정 이유 명확하게 구체화 하기

  • 특정 기능이 좋아서 사용하게 되었다. 어떤 부분이 다른 라이브러리와 비교했을때 이 부분이 더 좋아서 사용하게 되었다. = 우리 조가 라이브러리를 사용한 이유를 훨씬 더 명확하게

✔️ pr에 리뷰가 많이 없음. pr을 매우 작은 단위로 작성하여 서로서로 코드에 대한 논의를 더 많이 하자.

✔️ 중복 코드가 있으면 코멘트를 달아서 리뷰를 통해 개선해보자.

✔️ useQuery => isLoading -> isPending으로 체크하기