[ Riot Games API 활용 전적 검색 App 08] - In Game 정보 리스트 디테일 구현

오늘은 인게임 정보를 나타내는 리스트의 디테일 페이지를 만들어 볼것이다.

• 인게임 리스트 디테일 구현  v 

위 사진과 같은 매치의 디테일 정보를 볼수있는 Component를 제작해야 된다.

상업용 API키와 개인용 API키의 차이는 API 호출 요청량의 차이가있다

op.gg처럼 상업용 API키는 많은데이터를 요청할 수 있는반면에

나는 지금 개인적인 용도의 API 키를 사용하므로 요청수의 제한이 있다.

이전 작업( [ Riot Games API 활용 전적 검색 App 07] - In Game 정보 리스트 구현 )에서 넘어온 매치 데이터 중 gameId라는 데이터가 있었다.

나는 요청수 제한을 뛰어넘기위해 이전에 작업에서 넘어온 매치 데이터 중 gameId를 통해서 상세보기를 클릭했을 때

새롭게 Axios로 Ajax요청을 하여 데이터를 받아 왔다.

이런식으로 gameId를 통해서 받아온 데이터는 위 사진과 같이 플레이한 매치의 상세한 정보까지 준다.

우리팀의 정보부터시작해서, 아이템, 승패 퍼스트킬, 더블킬, 팬타킬, KDA 등등.... 게임내에서 진행한 모든 행위가 기록되어 JSON형태의 데이터로 응답된다.

간단하게 만드는 App이기 때문에 너무 상세하게 op.gg처럼 모든것을 구현할 생각은 없고...

이정도로만 디테일 Component를 구현해 보았다.

이런식으로 컴포넌트 코드를 작성한 뒤에 스타일링 작업이 끝나면

이전에 만들었던 리스트 ViewList컴포넌트에 상세보기를 클릭했을 때 Ajax요청을 하여 데이터를 받아온뒤

받아온 데이터를 활용하여 ViewMatchItem 컴포넌트를 구성해줘서 위 사진과같은 Detail페이지를 구현해준다.

[정리]

직접 하고있는 게임의 데이터를 활용해서 React공부를 하며 App을 만들어보니 꿀잼이였다...

더 잘 만들수 있었지만.. 시간도없고 귀차니즘이 절정이라 완벽한 마무리는 짓지못했지만.

이정도로 만족하고 다음번에는 좀더 퀄리티높게 제작해봐야겠다.

소스는 https://github.com/RyuJun/lol-state 이곳에서 확인가능하다!