오늘은 과제를 하면서 겪었던 문제와 해결 과정을 정리해 보았다.
먼저 문제 상황을 보면,
현재 프로필 페이지에서 닉네임을 변경할 시
닉네임 변경에 실패하며
PATCH https://moneyfulpublicpolicy.co.kr/profile 401 (Unauthorized)
프로필 업데이트 실패: AxiosError {message: 'Request failed with status code 401', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
위와 같이 콘솔에 에러가 호출되는 것을 확인할 수 있었다.
하지만, 이 에러가 무엇이 잘못됐음을 의미하는지 코드에 어느 부분이 잘못된 건지 바로 알 수가 없었는데, 두 번째 에러를 자세히 살펴보니 이런 부분을 발견할 수 있었다.
이런 식으로 accessToken 이 뭔가 원상태와는 다른 형태로 출력되고 있는 것을 발견했다.
앞뒤에 /" 가 붙여서 나오고 있었는데 이 부분 때문에 계속 인증이 실패하고 있다고 추측하게 되어, 저 부분을 없애는 방법을 생각해 보았다.
그러다가 userLogin 리듀서에서 JSON.stringify를 사용하여 accessToken을 문자열로 변환하여 저장하고 있는 걸 보았고,
혹시나 싶어 이를 좀 더 찾아보니 만약 JSON.stringify를 사용하여 단순 문자열을 JSON 문자열로 변환하게 되면, 문자열 자체가 추가적인 큰따옴표(")로 감싸지게 되고, 문자열 내의 큰따옴표는 이스케이프 처리(\")가 된다는 것을 알게 되었다.
그래서 JSON.stringify 없이 저장하게 바꿔줬더니
잘 작동 되는걸 확인 할 수 있었다.
몇 시간 동안 안돼서 새벽 내내 머리 아팠는데 다행히 잘 해결되고 몰랐던 부분도 새롭게 배우게 되어 기분 좋게 잘 수 있었다.
