LOL_API를 활용하여 Next.js로
챔피언 정보, 아이템 정보, 로테이션 챔피언 정보를 뿌려주는 과제를 받았다.
지금은 끊었지만 이전에는 롤을 즐겨 했기 때문에 좀 반가웠다 ㅎㅎ
과제 가이드
https://teamsparta.notion.site/React-6-CH-5-Riot-API-10c2dc3ef51480099a60d96a119769bf
일단 어마어마한 양의 가이드
익숙해져야하지만.. ㅜ 읽기 싫다
여튼 어짜피 한번에 다 완벽하게 파악하기 힘드니,
두 번 정도 읽고 대강 흐름만 파악하고
위에서부터 차례대로 쳐내면서 막히는 부분의 가이드를 다시 읽는 형태로 진행해보겠다.
일단 과제를 진행하기 위해 순서를 정리해보자면
- 라이엇에서 제공하는 API키 발급받기(Riot Developer Portal)
- 챔피언 정보, 아이템 정보, 로테이션 챔피언 정보를 뿌려주는 엔드포인트 확인하기
- API응답 데이터 구조에 맞춰 타입을 정의
- 해당 엔드포인트에서 데이터 가져오기
- 가져온 데이터를 화면에 뿌려준 후 css 설정 및 컴포넌트 분리하기
이렇게 순서가 나왔고, 차례대로 시작해보자.
1. 라이엇에서 제공하는 키 발급받아 .env.local파일에 정의해두었다.
2. 각 엔드포인트 확인
- 챔피언 정보: https://ddragon.leagueoflegends.com/cdn/14.19.1/data/ko_KR/champion.json
- 아이템 정보:
https://ddragon.leagueoflegends.com/cdn/14.19.1/data/ko_KR/item.json - 로테이션 챔피언 정보: https://kr.api.riotgames.com/lol/platform/v3/champion-rotations (API 키 필요)
3. 타입정의하기
- types/Champion.ts
- types/ChampionRotation.ts
- types/Item.ts
폴더 생성 후
각 API 데이터 구조에 맞춰 타입을 정의
이전 API데이터를 가져오는 방식과 달라 이 부분에서 좀 헤맸다.
이전에는 todos [{},{},[]]이런식으로 뿌려줬기 때문에 가져오기 수월했지만, 객체 데이터로 와서 배열로 반환해야했다.
Object.values를 이용하여 배열로 반환
객체데이터
{
"data"{
{"Aatrox": {객체}}
{"Ahri": {객체}}
{"Akali": {객체}}
}
}챔피언 부분은
각 챔피언의 ID를 문자열 키로 사용하고,
그에 해당하는 객체 중 필요한 데이터만 ChampionType으로 정의했다.
4. 해당 엔드포인트에서 데이터 가져오기
챔피언과 아이템은 API키를 활용하지 않아도 되니 먼저 데이터를 뿌려주었는데 정상적으로 뿌려지는것을 확인할 수 있었다.
4-1. 챔피언 정보 뿌려주기
위의 이미지처럼
fetch를 이용하여 구현해보았는데
axios 를 사용하는것이 좋을까 싶어 두 가지의 장단점을 간단히 정리해보았다.
Axios 장점
- 요청과 응답을 자동으로 JSON으로 변환해준다.
- 요청 취소 가능
- 인터셉터: 요청이나 응답을 가로채어 전처리하거나 후처리할 수 있는 기능이 있다.
- 더 나은 오류 처리: Axios는 오류 발생 시 응답 데이터에 대한 접근을 쉽게 해준다.
지금 해당 코드에서는 단순 get요청이기 때문에 Axios를 설치하여 불필요한 의존성을 추가하는 것이 좋을까 싶어서 일단은 간단한 fetch로 두겠다.
4-2. 아이템 정보 뿌려주기
마찬가지로 아이템도 API키를 사용하지 않아,
위의 챔피언 정보를 뿌려준 것과 비슷한 방식으로 구현하였다.
4-3 로테이션 챔프 정보 뿌려주기
이 부분은 API키가 필요하다.
일단 어떤 아이디가 로테이션 챔프에 해당되는지를 먼저 가져와보겠다.
공식 문서를 참고하여 뿌려주는 데이터 구조를 확인해보면
아래 이미지의 형태로 되어있다.
위의 이미지를 참고하여 type을 정의해보겠다.
챔피언 로테이션 챔프 아이디를 가져오는 로직
const getChampionRotation = async():Promsie<ChampionRoatationData | null> => {}
먼저 이 부분은 async이기 때문에 반환값은 Promise이고,
함수가 반환하는 Promsie의 타입은
위에서 정의한 으로 정의했다.
성공 시 ChampionRotationData타입의 데이터를 반환하고 실패 시 null을 반환한다.
이 부분에서 null을 해주는 이유는
함수가 실패했음을 명시적으로 나타내기 위함이며,
단순히 return 으로 하면 undefined를 반환하게 된다.
또한 빈환 값을 통해 오류를 감지 할 수 있다.
ex) if(rotationData === null) {}
또한 RIOT_API_KEY가 없을때에는 null을 리턴하고
키가 있다면, try를 실행하여 헤더에 토큰 정보를 넣어 요청을하여
해당 데이터를 받아온다.
catch하여 에러처리를 해주었다.
일단 여기까지 완료하였고,
불러온 로테이션 아이디와 일치하는 챔피언 정보를 뿌려주는 것은
다음에 이어서 추가로 작성해보겠다.
