[TIL] 오늘의 개발일지

 

 

드디어어어어어 최종프로젝트 주의 마지막 날이 왔다

오전에는 다같이 마지막 UI 수정해야하는 부분들을 결정하고 남아있는 반응형 작업을 마무리하였다

ㅈㅎ님께서 오늘 프로젝트에 페이지가 랜더될때 '로딩중' 이 나오게 하는 부분을 추가해주셨는데, 나도 개인 프로젝트때 꼭 해보고 싶어서 

개발일지에 메모 ㅎㅎ

const [isLoading, setIsLoading] = useState(false);
  const router = useRouter();
  useEffect(() => {
    const start = () => {
      setIsLoading(true);
    };
    const end = () => {
      setIsLoading(false);
    };
    router.events.on("routeChangeStart", start);
    router.events.on("routeChangeComplete", end);
    router.events.on("routeChangeError", end);
    return () => {
      router.events.off("routeChangeStart", start);
      router.events.off("routeChangeComplete", end);
      router.events.off("routeChangeError", end);
    };
  }, []);
  
  return (
    <>
      {isLoading ? (
        <Loding />
      ) : (
        <QueryClientProvider client={queryClient}>
          <Layout>
            <Component {...pageProps} />
            <ToastContainer />
          </Layout>
        </QueryClientProvider>
      )}
    </>
  );
}