[2025.03.14 금요일]
[Next.js 개인과제 - 트러블슈팅]
API 요청시 지속적으로 발생하는 500번과, 400번
- Next.js 개인과제를 진행하면서 필수구현 요소중 마지막 Route Handlers를 이용한 CSR 페이지를 구현중이었다.
SSG, SSR, ISR 페이지들은 생각보다 어렵지않게 구현을 했어서, 이번에도 여럽지 않게 가겠지... 하고 지레 짐작을 한것이 화근이었다.
2개의 api를 같이 처리해 버려야지~하고 일단 코드부터 작성하고 제대로 확인을 하지 않았다. 그렇게 확인도 하지 않고 코드부터 냅다 작성한 후에 페이지를 띄워보니.. pending...화면이 나타나고 이제 자료값이 나오면되! 라고생각했는데 시간이 오래걸렸다..이상한데? 하는 순간 500번 등장.
원인 파악하기
- 2개의 api를 모두 한 로직에 사용했기 때문에 어떤게 문제인지 확인 하기 위해서 console.log도 확인해 보았다.
잘 받아오던 championList는 왜 403이 뜨는건지 모르겠지만, 지금 먼저 해결해야하는 건 rotation이었다.
주소와 API 키 다시 확인
-
400이면 Bad request인데 통신로직이다 보니 주소가 맞는지, 혹시 오타가 있는지 확인부터했다. 혹시나 못찾을 수도 있기 때문에 api를 제공하는 공식페이지로가서 주소를 복사 붙여넣기! ❌
-
내가 발급 받은 API키도 다시 복사해서 붙여넣기! ❌
환경변수가 잘 적용되는지 확인
- Next.js에서 환경변수는 처음 사용하다 보니 혹시나 하는 마음에 환경변수가 잘 받아오고있는지도 console.log로 확인, 아주 잘 받아오고있었다.
Postman에서도 확인해보기
전날 튜터님이 이야기해주신 부분이 생각나서 Postman을 사용하여 직접 API 요청을 해봤지만 역시 같은 400번 에러가 발생했다.
왜 Unknown apikey인가요????
API KEY 재발급 받기
API Key를 재발급 받고 다시한번 Postman으로 요청을 시도해보았다.
어? 그래도 동일하게 400번 Unknown apikey가 확인되었다.
이상해서 숨겨진 key를 다시한번 확인해 보니 이전과 동일한 key였다.
재발급을 받고, 재발급성공했다고 메시지도 확인했는데!? API Key가 실제로는 재발급되지 않은것이다 😱
다시한번 재발급해서 갱신한 후에 Key를 확인해 보니 여전히 동일한 Key였다.
원인은 브라우저!?
순간 스쳐지나간 부분이 있었다. 오늘 내 브라우저 상태가 좋지 않았던 게 생각났다. 업데이트 이후 브라우저가 뭔가 불안정한 상태였기 때문이다. 설마 브라우저 문제가 아닐까 하는 마음으로 다른 브라우저에서 시도해보았다.
결과는 성공이었다.
이번에는 API 키가 제대로 재발급되었고 아까와는 다르게 재발급한 키 하단에 만료 일자와 시간까지 갱신된 것이 확인되었다.
재발급한 키를 사용하니 API 요청이 정상적으로 잘 작동했다.
이번 문제의 원인은 브라우저의 일시적인 오류나 캐싱 문제로 인해 API 키 재발급 과정이 정상적으로 이루어지지 않았던 것으로 보인다.
처음 시도하는 라우터 핸들러였기 때문에 처음엔 내가 뭔가 코드를 잘못 작성한 건 아닐까 걱정하며 강의 자료와 강의를 다시 살펴보기도 했지만, 알고 보니 브라우저의 사소한 문제가 원인이었다는 게 참 허탈하면서도 기억에 남는 트러블 슈팅 경험이 되었다.
그동안 나도 모르게 계속 한 종류의 브라우저만을 사용해 왔는데 이제는 다른 브라우저로도 크로스체크를 해봐야 겠다는 생각이 들었다.
