에러 해결 - 23. 401 Unauthorized, 405 Method Not Allowed, vercel 배포 문제.

• 원티드에서 주최하는 프론트엔드 인턴십 사전과제를 진행하던 중, 사용자가 로그인 후 TODO LIST 페이지에서 TODO 조회 기능을 수행할 때 간헐적으로 401 에러가 발생하는 문제를 경험했다.

• 원인을 파악한 결과, 비동기 통신의 특성상 웹 스토리지에서 토큰이 제대로 받아오기 전에 axios 통신이 먼저 이루어져서 발생하는 문제로, 작성한 백엔드 코드에 문제가 있음을 확인했다.

• Axios를 사용하여 API와 통신할 수 있는 클라이언트를 생성하고, baseURL과 headers를 설정하며, Axios interceptor를 이용하여 요청이 실행되기 이전에 수행해야하는 작업을 작성해야 한다. 이렇게 하면 웹 스토리지에 있는 토큰을 먼저 가져와서 401 에러가 발생하지 않게 된다.

• 완성된 사전 과제는 동작 영상을 촬영하거나 외부에 배포해야 하는데, 영상 촬영에 필요한 경험과 기술, 수단이 없으므로 배포 방식을 선택하였다.