[이전 포스팅](https://www.chanstory.dev/blog/post/21)에서는 발로란트 개발용 키를 받았습니다.
이번 포스팅에서는 api key를 활용해서 유저 랭크 순위에 대한 데이터를 불러와 순위표를 만들어보겠습니다.
 

## 🎈 유저 순위 데이터 불러오기

우선 유저 순위 데이터를 불러올 수 있는 API를 확인해 보겠습니다.
API문서에서 **VAL-RANKED-V1** 카테고리를 확인해 보면 순위를 불러올 수 있는 API를 제공하는 것을 확인할 수 있습니다.

![image.png](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/44a54164-59fd-4a7c-006f-a8ddca716100/public)

해당 API로 정보를 불러오기 위해서는 api path에 지역 정보와 게임 시즌 id를 입력해줘야하며 쿼리에 size와 startIndex를 담아서 API를 호출해야합니다.

 

시즌 id는 **VAL-CONTENT-V1** 카테고리에 있는 API를 사용해 확인할 수 있습니다.
해당 API를 사용하면 발로란트 캐릭터, 맵, 시즌, 아이템 등과 같은 컨텐츠 데이터를 받을 수 있습니다.

![image.png](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/07292131-add6-4d90-4b23-c60246e61000/public)

api를 사용해 원하는 시즌의 id를 찾았다면 유저 순위 데이터를 불러오는 API를 사용해보겠습니다.
```css
https://{지역 정보(한국은 KR)}.api.riotgames.com/val/ranked/v1/leaderboards/by-act/{시즌 ID}?size=100&startIndex=0&api_key={API KEY}
```

예를들어 위의 URL을 GET method로 호출한다면 한국 지역의 특정 시즌 유저 순위 데이터를 1위부터 100위까지 불러오게 됩니다.
몇 순위의 유저 데이터를 가져올지는 `size`와 `startIndex`를 조절하시면서 사용하시면 될 것 같습니다.

 
 

## 🖥 웹에서 순위표 서비스 구현
웹 서비스 구현에서는 지역 정보와 시즌 정보를 select ui 를 사용해 선택할 수 있도록 구현했습니다.

![image.png](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/2130652c-36df-49ac-d8f0-5f13c47b7700/public)

한번에 100명의 데이터만 불러올 수 있도록 `size`는 100으로 고정했으며 `startIndex`는 페이지네이션으로 사용자가 선택할 수 있도록 했습니다. (500위 까지만 불러올 수 있도록 최대 5페이지만 보여주는 페이지 네이션 UI를 구현했습니다.)

![image.png](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/a97df96f-b080-43d8-f05a-0c2ec280f900/public)

그리고 위에서 선택한 정보들을 URI에 쿼리로 담아서 관리했습니다.
```
.../leaderboard?region=KR&season=EP5_ACT3&page=5
```

URI의 쿼리를 확인해보면 어느 지역인지, 어떤 시즌인지, 몇 페이지의 순위인지를 확인할 수 있으며 쿼리 데이터에 따라서 API를 호출하도록 구현했기 때문에 위의 URI로 접근하는 사용자는 즉시 한국 지역 EP5_ACT3 시즌의 400~500위의 유저를 확인할 수 있습니다.

 

불러온 유저 순위 데이터는 table로 나타나게 구현했습니다.
완성된 발로란트 유저 순위표는 [여기](https://valin2.kr/leaderboard)에서 확인할 수 있습니다.

[이전 포스팅](https://www.chanstory.dev/blog/post/21)에서는 발로란트 개발용 키를 받았습니다.
이번 포스팅에서는 api key를 활용해서 유저 랭크 순위에 대한 데이터를 불러와 순위표를 만들어보겠습니다.
 

## <sp

[VALIN2.KR #2] ROIT API를 활용해 발로란트 유저 순위표 만들기