챔피언 리스트 Fetch 과정에서의 문제 해결

오늘은 챔피언 데이터를 가져오는 과정에서 발생한 문제를 해결한 경험을 정리해보려고 한다.

챔피언 데이터를 Fetch하는 함수

챔피언 리스트를 가져오기 위해 작성한 함수는 다음과 같다.

export const fetchChampionList = async () => {
  const versions = await fetchVersions();
  const response = await fetch(
    `${BASE_URL}/cdn/${versions[0]}/data/en_US/champion.json`,
    {
      next: { revalidate: 86400 },
    }
  );
  
  const data = await response.json();
 
  if (!response.ok) throw new Error(`HTTP request error: ${response.status}`);

  return data;
};

위의 코드를 작성하던 중 데이터가 어떤 형태로 오는지 궁금해서 console.log(data)로 확인해보았다.

하지만 예상과 다르게 전혀 예상하지 못했던 404 에러가 발생했다.

분명 API 주소도 정확하게 입력했는데, 왜 에러가 나는지 고민하던 중, 함께 공부하는 클래스메이트들에게 질문을 했다.

그리고 결국 문제의 원인은 page.tsx 파일의 잘못된 위치 때문이었다!!!😭

잘못된 폴더 구조 (챔피언 리스트 페이지가 개별 챔피언 상세 페이지 내부에 위치함)
📂 champions
┗ 📂 [id] # 개별 챔피언 상세 페이지 폴더
┗ 📜 page.tsx (잘못된 위치)

올바른 폴더 구조 (챔피언 리스트 페이지와 개별 챔피언 상세 페이지가 분리됨)
📂 champions
┣ 📂 [id]
┃ ┗ 📜 page.tsx # 올바른 챔피언 디테일 페이지
┗ 📜 page.tsx # 올바른 챔피언 리스트 페이지

왜 page.tsx의 위치가 잘못되었을까?

Next.js에서는 폴더 구조가 라우팅을 결정하기 때문에, [id] 폴더 안에 page.tsx를 두면 해당 파일이 특정 챔피언의 상세 페이지로 인식된다. 즉, champions/[id]/page.tsx는 champions/ahri, champions/yasuo와 같은 개별 챔피언 페이지로 해석된다.