문제발생

롤 api를 활용한 프로젝트를 만들고 있었다. 롤에서 제공하는 dragon api를 활용해 아이템 정보를 간단하게 보여주는 작업을 하고 있었고, 이미지를 api부터 받아오게 하는 작업을 하고 있었다.

<Image
src={`https://ddragon.leagueoflegends.com/cdn/14.19.1/img/item/${item.image}`}
alt="이미지 없음"
width={100}
height={100}
priority
/>

해당 코드로 작성을 했을때 이미지는 랜더링 되지 않았고, vscode 터미널에 403 오류 메시지만 출력됬다.

원인찾기

403 오류에 대해 검색을 해보니 접근권한이 거부되거나 api 주소를 불러올경우 버전이 맞지 않으면 이미지가 들어오지 않는다고 했다.

첫번째 원인

첫번째 오류 내용인 접근권한 거부에 관해서 찾아봤다. 라이엇 개발자 포털에서 제공해주는 api는 발급을 받았을경우 24시간 동안만 사용할수 있는 권한이 생긴다. 24시간이 지나면 key는 말소되어 사용할수 없으며, 재발급 받아야 한다. 개발자 포털에 접속해 key상태를 보니 24시간이 지나 있었고, 바로 key를 재발급 받았다. 다시 확인 해보니 해결이 되지 않았다. 알고보니 아이템 관련된 api는 키를 따로 적용시키지 않는 공개된 api였기 때문이다.

두번째 원인

두번째 원인인 api주소 문제 관련된 오류에 대해 찾아봤다. 오류가 발생한 지점을 찾아보았다. 우선 api주소는 일치했기 때문에 주소상 오류가 있진 않았다. 어떤게 문제인지 한참 해메다가 의심가는 쪽이 생겼다. 데이터 타입을 불러오는 변수 쪽이였다. key값이 제대로 연결됬는지 확인해봤는데 api에 들어가서 보면 image라는 객체에서는 full이라는 요소가 있었고 value값이 full까지 작성이 되어있어야 이미지 형식 파일을 불러 올수 있었던 것같다.

문제해결

첫번째 원인은 아닌것으로 판단되어 두번째 원인을 토대로 해결을 해보았더니 정상적으로 이미지가 출력됐고 403 오류는 더이상 발생하지 않았다.

<Image
src={`https://ddragon.leagueoflegends.com/cdn/14.19.1/img/item/${item.image.full}`}
alt="이미지 없음"
width={100}
height={100}
priority
/>