Android에서 Riot API 를 이용해 롤 전적 검색 어플 만들기

저번 home.js 설명을 이 포스팅에서 이어서 하겠다.

우선 해당 js 파일 자체는 현재 1400줄이 넘으므로 코드 구간별로 설명하겠음.

전문은 맨 아래에 복사해 두겠다.

코드는 2020년 3월 24일 현재 시각 가장 최근 업데이트된 코드를 기준으로 하였음.

23.11.26) 이건 거의 3~4년전에 만들었던 거 같은데 아직도 많은 분들이 봐주시네요. 멋모를 때 작성한 보잘것없고 초라한 내용이지만 도움이 되시길 바라겠습니다. 조금 더 도움이 되길 바라는 마음에서, 현재 개발 중인 전적검색 사이트인 team.gg (프론트엔드/백엔드) 깃허브 프로젝트를 공유합니다.

추가적으로 이제 와서 하는 말이지만 아래 내용에서 건질만한 부분은 3번 항목밖에 없는 것 같습니다. 저도 그렇고 요즘 개발자들이 바닐라스크립트나 jQuery로 웹개발을 하기보다는 React나 Ember, Vue 같은 프레임워크를 선호하기 때문에, 지금 시대에 별로 도움이 되는 내용은 아닙니다. 그냥 "얘는 이런 삽질을 해봤구나" 정도로 생각해주시면 감사하겠습니다.

1. 전체적인 프레임

Line 1~19: 전역 변수들 선언. 챔피언, 스펠 정보 등

Line 21~257: 실제로 html이 로드되고 실행될 스크립트. ajax 처리 및 static한 element들의 기본적인 동작들을 다룬다.

Line 259~: 페이지 로드 후 정보 처리 함수 및 유저 함수들

2. AJAX 처리

라이엇 API는 Request와 Response를 기반으로 한다.

필요한 데이터를 조건으로 하여 특정 URL로 요청을 쏘아 보내면 서버에서 판단을 하고 그에 맞는 응답을 주는 것이다.

전 포스트에서도 설명한 소환사 정보 가져오기가 그와 같은 것이다.

정보를 가져오는 것 뿐이므로 type은 모두 GET이다.

$.ajax({
    url: "",
    type: 'GET',
    dataType: 'json',
    async: false,
    data: {
        "api_key": key,
    },
    success: function(res){
        console.log(res);
    },
    error: function(req, stat, err){
        console.log(err);
    },
});

위는 ajax 통신의 예제이다.

url 인자에 요청을 보낼 주소를 적고 data에는 request parameter에 필요한 정보를 json 형식으로 넣는다. (또는 URL에 direct하게 넣을 수도 있음)

async: false는 이 ajax 처리가 끝난 뒤까지 기다린 후에 그 다음의 코드를 실행한다는 뜻인데, 반대로 이 말이 없으면 기다리지 않고 다음 코드를 실행한다.

이 통신이 처리가 되면 success 함수에서 따로 추후에 처리가 된다.

위 내용은 비동기 방식 함수에 대한 이해가 조금 필요하다.

Line 46~102 부분에서 확인할 수 있듯이, $.ajax() 함수를 변수에 담아 배열에 넣은 후,

$.when.apply(null, loadInitialDataRequestCallback).done(function(){
    getSummonerInfo("puuid", puuid);
});

위와 같이 배열 내의 ajax 처리 함수가 모두 끝난 후에 다음 코드를 실행할 수 있게 할 수 있다.

3. Request URL 설명

우선 모든 API에 대한 Request URL은 https://developer.riotgames.com/apis 에서 확인할 수 있다.

그리고 거의 모든 이미지(챔피언/스펠/프로필 아이콘 등)는 https://developer.riotgames.com/docs/lol (DataDragon)에 설명되어있다.

나머지 이미지들은 대부분 https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/ (CommunityDragon)에 있다.

Response 또는 위의 URL의 내용은 모두 json 이거나 이미지 형태로 되어있다.