[ Riot Games API 활용 전적 검색 App 05] - 선호하는 챔피언 라인

받아온 매치 Data를 활용하여 최근 100게임 내에서 선호하는 챔피언 및 라인을 추출해주는 작업을 진행해보자.

• 선호 챔피언 및 라인 추출   v 

01. 선호 챔프 및 라인 추출

Axios를 통해 받아온 데이터 중에 match Data를 잘보면  최근 100경기의 Data가 간략하게나온다.

여기서 프로젝트를 진행할때 필요할만한 것은, 

해당 게임에서 자신이 플레이한 챔피언, 라인, 포지션 정도이다.

이 Data들을 활용하여 선호챔프,라인 추출하는 함수를 제작하였다.

getPreferData = (data) => {
    let champ = [], 
        playChamp = [], 
        playChampCnt = [],
        preferData = {
            preferChamp : '',
            preferLane : '',
            champ : [],
            lane: [
                {
                  lane : "SUPPORT", 
                  playCount: 0, 
                  style : {
                    backgroundImage: `url('http://opgg-static.akamaized.net/assets/site.png')`,
                    backgroundPosition: "-70px -2794px",
                  }
                },
                {
                  lane : "TOP", 
                  playCount: 0,
                  style : {
                    backgroundImage: `url('http://opgg-static.akamaized.net/assets/site.png')`,
                    backgroundPosition: "-80px -2872px",
                  }
                },
                {
                  lane : "MID", 
                  playCount: 0,
                  style : {
                    backgroundImage: `url('http://opgg-static.akamaized.net/assets/site.png')`,
                    backgroundPosition: "-80px -2719px",
                  }
                },
                {
                  lane : "JUNGLE", 
                  playCount: 0,
                  style : {
                    backgroundImage: `url('http://opgg-static.akamaized.net/assets/site.png')`,
                    backgroundPosition: "-83px -2640px",
                  }
                },
                {
                  lane : "BOTTOM", 
                  playCount: 0,
                  style : {
                    backgroundImage: `url('http://opgg-static.akamaized.net/assets/site.png')`,
                    backgroundPosition: "-80px -2564px",
                  }
                },
                { lane : "NONE", playCount: 0 },
            ]
        };
    data.map((item) => {
        if(item.role === "DUO_SUPPORT"){
            preferData.lane[0].playCount ++;
        }else{
            switch (item.lane){ 
                case "TOP" : preferData.lane[1].playCount ++;
                break; 
                case "MID" : preferData.lane[2].playCount ++;
                break; 
                case "JUNGLE" : preferData.lane[3].playCount ++;
                break; 
                case "BOTTOM" : preferData.lane[4].playCount ++;
                break; 
                case "NONE" : preferData.lane[5].playCount ++;
                break; 
                default : return preferData.lane; 
            }
        }
        return champ.push(item.champion);
    })
    playChamp = champ.filter((item, pos) => champ.indexOf(item) === pos)
    playChamp.map((item) => playChampCnt.push(champ.filter((items) => item === items)))
    
    preferData.champ =  playChampCnt;
    preferData.preferChamp = preferData.champ.reduce((prev, current) => (prev.length > current.length) ? prev : current)
    preferData.preferLane = preferData.lane.reduce((prev, current) => (prev.playCount > current.playCount) ? prev : current)
    return preferData;
}

소스를 확인하면 알겠지만 getPreferData라는 함수에는 우리가 받아온 매치 Data가 파라미터로 전달된다.

그 뒤 preferData 라는 객체 안에 미리 값을 선언해놓고 하단부분에서 매치 Data를 loop를 돌려서 조건에 해당할 때

preferData에 값을 하나씩 채워가는 방식이다.

이 함수를 사용하여 추출된 선호 챔프, 라인을 꾸며주는 View 컴포넌트를 구현하여 아래와같이 마무리를 해준다.