[ Riot Games API 활용 전적 검색 App 04] - 리스트 구현 및 스타일링

오늘은.. 매치,리그 데이터를 axios를 통하여 받아와서 state에 저장시킨뒤에

게임 리스트화면을 구현해보자..  디자인이문제인데 

디자인은 bootstrap을 활용하여 대~~충 해보자!!

• 매치, 리그 데이터 받아오기  v 
• bootstrap을 활용한 리그 상태정보를 활용한 화면 레이아웃 구성  v 

01. 매치, 리그 데이터 받아오기

지난 번 axios를 통해서 소환사 정보를 받아왔었다.

같은방법을 통해서 매치,리그 데이터를 받아왔다.

  getLOLData = () => {
    let summonerUrl, matchUrl, leagueUrl;

    summonerUrl = `${apiDefault.url}/summoner/v3/summoners/by-name/${apiDefault.name}?api_key=${apiDefault.key}`;
    axios.get(summonerUrl)
    .then( summonerData => {
      matchUrl = `${apiDefault.url}/match/v3/matchlists/by-account/${summonerData.data.accountId}?api_key=${apiDefault.key}`;    
      axios.get(matchUrl)
      .then( matchData => {
        leagueUrl = `${apiDefault.url}/league/v3/positions/by-summoner/${summonerData.data.id}?api_key=${apiDefault.key}`;
        axios.get(leagueUrl)
        .then( leagueData => {
          this.setState({
            summoner: summonerData.data,
            match : matchData.data,
            league : leagueData.data[0]
          })
        }).catch( error => console.log("Data가 없습니다."));    
      }).catch( error => console.log("Data가 없습니다."));
    }).catch( error => console.log("Data가 없습니다."));
  }

데이터들을 요청한 뒤에 받아온데이터를 state에 저장시키는 함수이다.

저번에 만든 input에 요청때마다 아이디를 적어주고 하는게 번거로워서 apiDefault 라는 object를 생성하고 그안에 공통되게 들어가는,

url, name, apiKey 정보를 넣어서 submit만 하면 받아오도록 만들었다.

02. bootstrap을 활용한 리그 상태정보를 활용한 화면 레이아웃 구성 

디자인이 문제다.. 디자인이... 다행히도 bootstrap을 사용하면 간단하게 해결 가능하다.

Submit 시 Ajax요청을하고 요청에성공하면 리그상태정보를 보여주는 컴포넌트를 만들었다.

정상적으로 잘 받아서 View를 구성해준다..

티어나 소환사 ICON 이미지들은 http://www.op.gg/ 개발자도구로 이미지 URL 분석하여 땡겨왔다.

[정리]

오늘도 한게 지극히 없다.. 그래도 꾸준히 하자.. 조금씩이라도

리그 상태 쪽을 제작하다보디 생각보다 할게 많아서 list쪽은 당분간 손대기 힘들것같다.

일단 다음작업때 진행할것은 

가장 선호하는 챔피언, 라인 추출 해서 보여주는 컴포넌트

캐릭터별 승률 보여주는 컴포넌트 이 두개 진행 할것이다!