[ Riot Games API 활용 전적 검색 App 01] - Project Info

프로젝트 시작전 설정및 필요한것들을 정리해본다.

http://www.op.gg/ 이 사이트를 참고하여

요즘 주로하는 게임인 league-of-legends의 상태정보 및 게임 전적을 조회할수 있는 App를 만들어 보려한다.

[시작 전 준비물]

• React, create-react-app  v 
• Riot games API KEY 생성 및 승인  v 
• GitHub Repository 생성 및 연결  v 

github Repository https://github.com/RyuJun/lol-state

01. op.gg사이트 구조 분석

첫번째로 http://www.op.gg/ 에서는 유저의 ID값을 input 박스에 입력받아 Riot Games API 로 요청을 보낸다.

요청 후 전 송 받은 데이터를 가공하여 위 사진과 같은 View 를 만들어준다.

나는 React를 통한 SPA 형식의 프로젝트를 진행해 볼것이기 때문에  위 사진의 빨간 테두리 안쪽 내용 을 컴포넌트로 분할하여 프로젝트를 진행할 것이다.

그렇다면 내가 구현해야할 것은 

• input box를 통한 User ID 정보 입력 폼 Component 구현
• 입력 받은 ID를 통하여 Riot Games API에 요청 후 결과 값 가공
• 사용자 정보, 아이콘 및 계급 테두리, MMR계산  Component 구현
• 계급 이미지 및 랭크 포인트 승/ 패 / 승률 Component 구현
• 최근 100게임 분석하여 선호 포지션, 챔피언  추출 Component 구현
• 게임 한판한판 상세 내용 ( 킬/데스/어시스트/팀원정보/아이템정보 )등의 Component구현