Portfolio

🔍 배경 및 궁금증

유저 페이지를 새로고침을 했을 때, 로그인이 되었음에도 불구하고 기존 페이지로 남아있지 않고 메인 페이지로 이동하는 현상이 발견되었다. 이를 해결하려면 어떻게 해야 할까?

📢 해결 방법

원인 탐색

핵심적인 원인은 redirect였다.

우리의 로직에서는 userInfo.token을 통해 점검하고, 이에 대한 유무를 판별하여 라우터를 동작시켜야만 했다.

이때, 발생하는 문제는 다음과 같다.

💡

1. userInfo는 초기에 initialState로 남아있다. 2. 초기에 useContext 내부에서 useEffect를 통해 유저의 정보를 가져온다. 3. 그런데 마운트할 때 컴포넌트는 이미 UI를 그려내고 있는 상태이다. 4. 현재 유저 정보 페이지에서는 initialState에서 업데이트가 되지 않아 token이 없다. 5. 따라서 redirect를 한다. 6. token이 불러와진다. 이때, 라우터에서는 token을 인식한다. 7. mainPage로 이동한다.

따라서 이를 해결하기 위해서 절대적으로 필요했던 건, UserInfoPage를 이동할 때, redirect 시켜주면 안 된다는 것이었다.

따라서 나는 이를 해결하기 위해서는 Page 내에서 useEffect를 통해 유효한 유저가 맞는지 테스트하는 로직이 필요하다고 판단했다.

해결 과정

다음과 같은 코드를 통해 유저 인증 과정에 따라 페이지로 이동하도록 하였다.


const { fillUserInfo, emptyUserInfo } = useUserInfo();
  const history = useHistory();
  useEffect(() => {
    async function checkVerifiedUser() {
      const token = getCookie('userInfo');
      try {
        const res = await getAuthUser(token);
        fillUserInfo(res);
      } catch (e) {
        history.push('/login');
      }
    }
    checkVerifiedUser();
    return () => emptyUserInfo();
  }, [emptyUserInfo, fillUserInfo, history]);

즉 다음과 같은 로직인 것이다.

💡

1. 쿠키를 가져온다. 2. 이 친구가 유효한 사용자인지 인증 API를 요청하여 응답을 받는다. 3. 만약 반환된 데이터인 유저 데이터가 있다면 이를 다시 업데이트한다. 4. 아니라면 로그인 페이지로 이동하고, 뒷정리 함수를 통해 현재 정보를 지운다.

따라서 이를 결과적으로 잘 해결해냈다!

해당 해결 과정과 구현된 코드에 대한 팀원과의 협의 코멘트는 다음 링크에 남겨 놓았다.

배운 점

redirect를 쓰지 않아도 이동이 가능하다!

무엇보다 강력한 기능은, redirect로 했을 때의 순간적으로 url이 바뀌면서 페이지가 바뀌는 현상을 방지할 수 있다! 이는 현재의 기술 부채를 줄일 수 있으며, UX를 증가시킬 수 있다!

redirect 없이 새로고침 시 기존 페이지 유지하기

🔍 배경 및 궁금증

📢 해결 방법

원인 탐색

해결 과정

배운 점