문제 1. 챔피언 디테일 정보 타입 오류
- API에서 받아온 데이터에 접근하려고 할 때, TypeScript가 챔피언 데이터의 속성(name, title, 등등)이 존재하지 않는다는 오류 발생
원인:
- API 응답 데이터 구조에 맞지 않는 타입을 정의했기 때문에, TypeScript가 해당 속성에 접근할 수 없다고 인식했다.
해결 방볍:
- API 응답에 맞게 ChampDetail 타입을 수정하여 모든 필요한 속성을 정의했다.
문제 2. ID 기반 데이터 접근 문제
- API 응답 데이터에서 챔피언 정보를 가져올 때, 챔피언의 ID에 따라 동적으로 데이터에 접근하지 못하는 문제가 발생했다.
원인:
- API 응답 데이터는 data 객체 내에 챔피언의 ID별로 저장되어 있었음. 그러나 이 구조를 고려하지 않고 ID를 동적으로 처리하는 로직이 없었다.
해결 방법:
- getCampDetail 함수에서 ID를 사용하여 data 객체 내의 챔피언 데이터를 동적으로 접근하도록 수정했다.
문제 3. API 라우트에서 404 에러 발생
- GET http://localhost:3000/@/app/api/rotation 요청에서 404(Not Found)에러 발생.
- console.log를 통해 확인해본 결과, 외부에서는 Route handle로 데이터를 제대로 가져오고 있었으나, 컴포넌트 내에서 데이터를 받아오지 못했다.
원인
- Next.js의 API 라우트 시스템에서는 함수 이름이 대문자로 시작해야 한다.
- API 라우트에서 함수 이름이 소문자로 정의되면 Next.js는 해당 함수를 인식하지 못하고,
404 Not Found 에러를 발생시킨다.
해결 방법:
- 함수 이름을 카멜 케이스 또는 대문자로 시작하도록 수정하여, Next.js가 API 라우트를 제대로 인식할 수 있도록 했다.
굿