34일차 (트러블 슈팅: 소셜 로그인 시 token 저장 및 삭제 문제)

 오류는 발생하지 않았지만, 원하는 동작을 수행하지 못하는 문제를 직면했다. 그것은 소셜 로그인 시 발생하는 문제였는데, 로그인 이후  수동 세로고침을 하기 전까지 token 값이 저장되지 않아서 발생하는 문제였다. useEffect를 사용해서 문제를 해결해보고자 했지만, 뜻대로 되지 않았다. 거의 하루를 고민한 뒤, 기술매니저님의 도움으로 해결할 수 있었다.

 

수정 전 코드

// kakao.jsx
const { isSuccess, isLoading, isError, data } = useQuery("kakao ", () =>
    kakaoLogin(codeParam)
  );
  
 useEffect(() => {
    navigate("/");
  }, [navigate, codeParam]);

원인은 token 값이 들어오기도 전에 useEffect가 작동하면서 token값을 가져가지 못했기 때문에 발생했다. 

 

수정 후 코드

const { isSuccess, isLoading, isError, data } = useQuery("kakao ", () =>
    kakaoLogin(codeParam)
  );

  if (isLoading) {
    return <div>카카오 로그인 처리 중...</div>;
  }
  if (isSuccess) {
    navigate("/");
  }
  if (isError) {
    return <div>에러 발생</div>;
  }
}

해결방안

isLoading일 때, isSuccess일 때, isError일 때 수행해야 할 동작들을 넣는 방식으로 해결하였다.

 

---

 

완벽하게 해결한 줄 알았지만 또 다른 오류가 발생했다. 소셜 로그인을 진행 후, 수동으로 새로고침을 하지 않으면 token값이 사라지지 않아 로그아웃이 되지 않는 문제였다. 또다시 기술 매니저님을 찾아갔다..

 

수정 전 코드

// cookies.js
export const removeCookie = (name) => {
  return cookies.remove(name, { path: "/" });
};

원인은 react-cookie를 사용할 때 /login, /signup과 같이 루트(?)에서 출발한다면 저장되어 있는 쿠키를 깔끔하게 지울 수 있지만, 

/api/user/kakao... 처럼 외부 경로에서 출발했을 때 따로 토큰 값을 삭제하는 경로를 지정해주지 않으면, 삭제되지 않는 것이었다. 

 

수정 후 코드

// cookies.js
export const removeCookie = (name) => {
  return cookies.remove(name, { path: "/" });
};

 

해결방안

 removeCookie를 진행할 때 option으로 경로를 지정해 주면, 지정한 경로 위에 있는 모든 cookie를 제거해 주는 방식으로 해결하였다.