RIOT API를 활용한 프로젝트 만들기 회고

| 해당 내용은 개인적인 공부를 위한 글로 오역 및 개인적인 의견이 반영된 내용이 있을 수 있으니 참고하여 주시기 바라며 문제가 되는 내용이 있는 경우 메일로 피드백 부탁합니다.

이 글은 RIOT API를 사용법을 정리한 글이 아닌 RIOT API를 사용하여 프로젝트를 만들고 나서의 회고 글이다. 사실상 제목에서 RIOT API를 언급하였지만, 실제 쓰고 싶었던 내용은 토이 프로젝트를 마치고 나서의 회고 글을 쓰고 싶었다.

그래도 간략한 프로젝트 설명과 진행했던 부분들을 남겨본다.

프로젝트 소개

처음 프로젝트의 목표는 특정 오픈된 API를 활용하여 간단한 토이프로젝트를 vercel에 올려 배포까지 해보는 것이 목표였다. 어떤 것을 해볼까 하다 최근 LOL을 가끔 하고 있어 RIOT API를 사용하여 op.gg와 같은 사이트를 만들어 볼까?로 작업을 시작하게 되었다. 그러다 LCK에서 선수별 순위를 보여주는 데이터 테이블을 보고 친구들의 데이터 테이블을 만들어 보여주면 좋지 않을까 하여 League-Of-Friends라는 프로젝트를 만들게 되었다.

League-Of-Friends

소환사명을 입력하고 추가하게 되면 RIOT API를 사용하여 소환사 정보를 불러와 데이터를 정제하여 KDA(Kill Death Assist) 평균치로 순위별로 보여주게 된다.

프로젝트 구성 및 배포

프로젝트는 Next.js를 틀로 사용하였고 typescript 기반으로 코드를 작성하였다. 여기서 상태관리 라이브러리로 처음에는 react-query를 사용하였다가 나중에 swr로 전환하여 코드를 수정하였다. 두 가지를 비교해보고 싶은 마음에 처음 react-query를 사용하였다가 swr로 전환하였고 개인적으로는 단순히 API로 데이터를 조회하여 해당 데이터의 상태를 관리만 하면 되기 때문에 swr만 사용하여도 문제가 없었다.

swr과 react-query 비교 정리글도 작성하였었다. Next.js에서 SWR 사용해보기

배포는 vercel에 github 프로젝트를 추가만 하면 해당 프로젝트명에 맞게 도메인이 설정되어 배포된다.

배포할 때 조금 헤맸던 부분이 있는데 환경변수 설정값이 즉각 반영되지 않아 이리저리 설정값을 바꿔보다가 어느 정도 시간이 지나야 설정값이 반영되는 것을 알게 되었다.

프로젝트 진행중 힘들었던 부분

API를 호출하고 데이터를 가져와 정제하여 렌더링하는 부분은 어렵지 않았지만, API를 호출하는 부분에서 문제가 조금 있었다. RIOT API에서 소환사의 경기 정보를 가져오기 위해서는 여러 API를 거쳐야 했는데, 처음 소환사 명으로 API를 호출하여 소환사 고유 ID를 가져온다. 그리고 고유 ID를 사용하여 소환사의 경기에 대한 ID 리스트를 가져오는 API를 호출한다. 마지막으로 경기 ID 리스트를 사용하여 각 경기에 대한 ID 별로 경기 정보를 가져와 소환사 고유 ID로 해당 경기에 대한 소환사 경기 정보를 추출한다.

위처럼 ID를 물고 물어 API를 계속해서 호출하여 정보를 가져와야 하는 방식이었는데 처음에 FE 단에서 모든 API를 호출하는 방식으로 구현하였더니 한 번에 너무 많은 API 호출로 대기 기간이 엄청나게 느려지거나 RIOT API 서버에서 에러를 내려주었다.

이후 서버에서 API 호출하도록 코드를 개선하고 API 실패 시 retry를 시도하는 형태로 개선하여 문제를 해결하긴 하였지만, 현재 최대 소환사 추가는 5명까지 그리고 경기 수도 최근 5경기를 기준으로 데이터를 정제하여 순위를 매기도록 하였다. RIOT API 서버에서 에러를 내려주는 것이 develop api key를 사용해서인지는 알 수 없지만, 현재 배포된 버전에서도 PERSONAL API KEY로 발급받아 배포된 상태인데 PRODUCTION API KEY를 사용할 경우에는 문제가 없는지 확인해보지는 못했다. PERSONAL API KEY는 신청하고 약 3주 정도가 지나고 나서야 API KEY를 발급 받을 수 있었다.

저와 동일한 문제를 겪었거나 PRODUCTION API KEY를 사용하여 문제를 해결하신 분은 메일로 피드백을 주시면 감사하겠습니다.

회고

프로젝트 설명 그리고 진행 중 힘들었던 부분을 썼으니 뜬금없이 회고로 글을 마무리해본다. 여러 토이프로젝트를 해왔지만, 사실성 완성? 이라고 할만한 프로젝트가 있을까 싶은 정도로 완성도가 높은 프로젝트가 있지는 않은 것 같다. 이 글의 프로젝트 역시 사실상 처음 생각하고 시작하였던 기능들을 모두 구현하지는 못했다. 하지만 목표였던 오픈된 API를 사용하여 실제로 vercel에 올려 배포까지 해보자 하는 목표는 성공하였다. 힘들었던 것은 퇴근 후에 짬을 내어 토이프로젝트를 진행하는 것이었는데 해당 프로젝트를 하면서도 몇 주... 길게는 한 달 정도는 손을 안 대고 있다가 다시 코드를 볼 때면 이전에 짰던 코드를 다시 읽어보느라 시간이 지체되었고 꾸준하게 프로젝트를 하는 것이 쉽다면 쉽고 어렵다면 어려운 문제였다.

위에서 말한 것과 같은 토이 프로젝트를 꾸준하게 진행하고 완성도를 올리는 것에 관해 회의감이 들어 이 회고 글을 쓰게 되었고, 이 글을 쓰며 회고 및 반성하며 다음 토이 프로젝트에서는 이를 토대로 조금 더 꾸준하게 프로젝트를 진행하고 완성도 높게 프로젝트를 완료하는 것을 목표로 삼는다.

[Ref]:

Riot developer APIS