리액트 Failed to load resource : the server responded with a status of 404 ()

문제 상황

react에서 작성했던 코드를 next로 옮기는 과정에서 api호출 시 404에러가 발생했다.

react에서는 문제없이 get호출을 했으나 옮겨서 실행해보니 404에러가 발생하면서 컴포넌트를 렌더링하지 못했다.

Failed to load resource : the server responded with a status of 404 ()

잘못된 코드

처음에는 next의 param으로 username을 받아오는 문제가 있는 줄 알고 useEffect를 통해서 username을 잘 받아오는지 확인해보았다.

username은 잘 받아오는데 GitHubCalendar 컴포넌트에 props로 username을 전달 할 때는 전달이 안되는 것 같았다.

GET 요청을 자세히 보니까 username에 undefined 값을 전달하고 있었다.

param 값을 받아오기 전에 컴포넌트가 랜더링 되어 발생한 오류로 예상되었다.

개선한 코드

비동기 문제를 어떻게 해결할까 하다가 간단하게 조건부 렌더링을 통해서 username이 undefined이 아닐 때 컴포넌트가 렌더링되도록 했다.