🎉롤 전적검색 사이트 만들기(2) - 가져온 데이터를 페이지에 적용

준석(준석아)·2021년 10월 1일

RIOT API 롤전적검색 사이트 만들기

목록 보기

2/5

✔ Riot API를 인증

📝XMLHttpRequest을 이용해서 Riot API 데이터 파싱

Express를 이용해서 Front에 데이터 넘기기

뉴모피즘을 이용하여 사이트 꾸미기

채택한 파싱방법

서브파티라이브러리를 아직 숙지한게 없어서 XMLHttpRequest을 사용하여 데이터를 파싱하기로 하였다.
나중에 사이트를 다듬을때 Spring boot나 다른 라이브러리를 사용하여 데이터를 파싱하는걸 공부해보도록 하자.

파싱할 데이터 정하기

Riot Developer사이트에서 가져올 만한 데이터를 추려내 보자.

SUMMONER-V4 소환사정보

/lol/summoner/v4/summoners/by-name/{summonerName}

LEAGUE-V4 리그 정보

/lol/league/v4/entries/by-summoner/{encryptedSummonerId}

Match-V4 소환사 전적리스트

/lol/match/v5/matches/by-puuid/{puuid}/ids

/lol/match/v5/matches/{matchId}

CHAMPION-V3 챔피온 정보

/lol/platform/v3/champion-rotations

RIOT API키를 받았다면 개발자사이트에서 데이터가 어떻게 날아오는지 미리 테스트해 볼 수 있다

데이터 파싱

function httpGet(theUrl)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
    xmlHttp.send( null );
    return JSON.parse(xmlHttp.responseText);
}

요청한 데이터를 JSON데이터로 파싱하는 함수이다. 간단하게 JSON객체 형태로 바꿀 수 있었다.
아래 사진은 파싱한 JSON데이터이다.

위와 같이 긁어온 데이터를 내가 만든 모듈에 파람으로 넘겨주기로 하였다.

search_summoner.js File

const template = require('./lib/template.js');
...
html = template.HTML(
                        results
                        ,list
                    )
res.send(html);

template.js


module.exports = {
    HTML:function (SummonerObject,list) {
        let queType ="UnRanked";
        let soloInfo ='';
        let soloImg;
        let queTypeTeam ="UnRanked";
        let teamInfo ='UnRanked';
        let teamIMG;
        
        if(SummonerObject[0].tier1==undefined){
            console.log('실행?');
            soloImg='undefined'
        }else{
            queType ="솔로랭크";

            soloInfo = SummonerObject[0].tier1 + '&nbsp' + SummonerObject[0].rank1 + '&nbsp' + SummonerObject[0].leaguePoints1 + '<br>' +
            SummonerObject[0].wins1+'승' +SummonerObject[0].losses1+'패';

            soloImg = SummonerObject[0].tier1;
        }

        if(SummonerObject[0].tier2==undefined){
            teamIMG='undefined';
        }else{
            queTypeTeam ="팀 랭크";

            teamInfo = SummonerObject[0].tier2 +'&nbsp '+SummonerObject[0].rank2 +' &nbsp'+SummonerObject[0].leaguePoints2+'<br>'+
            SummonerObject[0].wins2+'승' +SummonerObject[0].losses2+'패';

            teamIMG = SummonerObject[0].tier2;
        }
        return`
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="what.css" rel="stylesheet">
            <title>Document</title>
        </head>
        <script src="../search_summoner.js"></script>
            <body>
           
                <header>
                    <div class="profile">
                        <div id="profile_left">
                            <span class="face">
                                <img src="profileicon/${SummonerObject[0].profileIconId}.png" alt="">
                            </span>
                            <span class="profile_left">
                                <div>
                                    <span class="name">${SummonerObject[0].summonerName}</span>
                                </div>
                                <div>
                                    <form action="http://localhost:3000/search" id="form_style" method="get">
                                        <div class="search_form">
                                            <input type="text" id="search_summoner" placeholder="소환사 이름을 입력하세요" name="id">
                                            <Button type="submit" id="btn_search">검색</Button>
                                        </div>
                                    </form>
                                </div>
                                <div>
                                    <button id="reload">전적갱신</button>
                                </div>
                            </span>
                        </div>
                        <div id="logo">
                            <img src="logo.png" alt="">
                        </div>
                    </div>
                    <div class="ranks">
                        <span class="rank">
                            <span class="tier">
                                <div>${queType}</div>
                                <img style='width:10vh' src="ranked-emblems/${soloImg}.png" alt="">
                            </span>
                            <span> 
                                ${soloInfo}
                            </span>              
                        </span>
                        <span class="rank">
                            <span class="tier">
                                <div>${queTypeTeam}</div>
                                <img src="ranked-emblems/${teamIMG}.png" alt="">
                            </span>
                            <span> 
                                ${teamInfo}
                            </span>              
                        </span>                   
                    </div>                                                                                                            
                </header>
                ${list}
            </body>
      
        </html> 
        `;
    }

정상적으로 데이터가 전달된걸 확인할 수 있었다.

준석(준석아)

뉴비개발자

이전 포스트

🎉롤 전적검색 사이트 만들기(1) - RIOT API 승인받기

다음 포스트