개인프로젝트 발생한 문제와 해결

https://nninyeong.tistory.com/109

[Tailwind] 부모 요소가 hover 상태일 때 자식 요소 스타일 지정하기 (group)

 

지난번 작성한 글에 이어서 조금 더 추가!

 

정확한 API 명세 확인과 formData 객체 활용하기

문제: 로그인 요청 시 헤더에 인증 토큰이 없다는 에러 발생

로그인 요청을 보낼 때 서버에서 "Authorization 토큰이 없다"는 에러가 발생했다. 하지만 네트워크로 전송하는 데이터를 출력했을 땐 헤더에 토큰이 잘 들어있었다.. 알아보니 API 명세와 요청의 형식이 일치하지 않을 때에도 발생한다고 한다.

 

해결: API 명세를 확인하여 body에 form 형식으로 데이터를 전달

API 명세를 재확인한 결과, 해당 요청은 데이터를 JSON 대신 multipart/form-data 형식으로 보내야 하는 경우였다! formData 객체를 활용하여 데이터를 제대로 전달하니 요청이 정상 처리됐다.

export const editProfile = async (accessToken, newNickname) => {
  try {
    const formData = new FormData();
    formData.append('nickname', newNickname);
    const response = await axios.patch(
      `${API_URL}/profile`,
      formData,
      {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      },
      { avatar: null, newNickname },
    );
    return response.data;
  } catch (error) {
    return error.response.data;
  }
};

 

 

useEffect 활용해 마운트시 인증 상태 / userProfile 확인하기

문제: 로그아웃하지 않고 재접속 시 프로필 페이지에서 닉네임이 표시되지 않음

사용자가 로그아웃하지 않고 브라우저를 종료한 뒤 다시 접속하면, 프로필 페이지에서 닉네임이 표시되지 않는 문제가 발생했다. user profile을 context에 추가하는 과정이 로그인 이벤트에서만 처리됐기 때문이다. (로그아웃하지 않고 브라우저 종료 후 접속하는 상황을 고려하지 못함)

 

해결: UserContextProvider에서 access token을 확인하고 유저 정보 fetch

페이지 로드 시점(컴포넌트 마운트 시)에 accessToken이 유효하고, 유저 정보가 없는 경우 유저 정보를 가져오는 로직을 추가했다. 이를 통해 사용자가 로그인 이벤트 없이도 닉네임이 표시되고 테스트 결과 전송 등에 사용할 수 있게 됐다!

useEffect(() => {
  if (isAuthenticated && !userProfile) {
    (async () => {
      const { success, id, nickname } = await fetchProfile(accessToken);
      if (success) {
        setUserProfile({ userId: id, nickname: nickname });
      } else {
        localStorage.removeItem('accessToken');
        window.location.reload();
      }
    })();
  }
}, []);