React.js와 Next를 사용하여 만든 게임 대쉬보드입니다.
인게임 정보에서는 이번 주 로테이션 챔피언의 Riot api를 호출하여 3D 카드 형식의 캐러셀로 보여집니다. 또한 칼바람 나락 챔피언 티어는 op.gg 사이트의 칼바람나락 정보를 실시간으로 스크래핑하여 보여주도록 만들어졌습니다. 챔피언 추천기는 조건에 따라 챔피언을 추천하며, 모든챔피언이 등장할 수 있습니다. 이 또한 3D 카드형식으로 개발하였으며 카드 flip효과로 가챠에서의 떨림을 추가하였습니다.
전적검색 메뉴에서는 사용자의 puuid와 tag를 사용하여 riot api 를 호출 하고, 조회된 puuid를 기반으로 해당 계정의 챔피언 숙련도 api를 호출하여 Top3 챔피언의 숙련도 및 정보를 불러옵니다. 초기에 호출 된 puuid를 통해 해당계정의 최근 5게임에 대한 전적정보를 다시 호출하고 데이터를 가공하여 게임의종류, 승리여부, 딜량 계산, 구매한 아이템 등을 표기합니다. 마지막으로 실시간 게임 검색을 통해 현재 게임중인 게임에대한 정보를 호출합니다. 또한 초기에 검색한 puuid를 통해 현재 플레이중인 챔피언이 무엇인지 표기할 수 있도록 했습니다.
같은 puuid를 통해 호출하는 api가 다수기 때문에 동기처리에서 힘들었습니다. 이를 await와 useEffect의 적절한 배분으로 해결하였습니다. 또한 3D 카드의 애니메이션 효과에 대한 각도 계산이 힘들었습니다.
타 사이트의 정보를 스크래핑 해오는 시간이 오래걸리며, api 조회역시 시간이 다소 소요되기 때문에 속도를 개선해야 할 것 같습니다. 속도개선을 하지않고 indicate 처리를 할 수 있지만 옳은 방법은 아닌것으로 생각됩니다. Next.js를 사용하여 완전 SSR로의 렌더링도 고민해야 될 부분 인 것 같습니다.
- react 18.x 버전
- Next 15.x 버전
- styled-component
- antd