최근 게임 10게임
15GG
15gg.info
매치 데이터를 매치 ID값에 대해서 가져오기 때문에 , 게임 정보가 중심이 된다.
유저 중심으로 나오지 않는다.
해당 유저가 어느팀에 있는지 판별한 후, 그 팀의 승패 유무를 알아야했다.
버전 정보 - 이미지를 주소 대상으로 가져올때 버전이 필요하다.
https://ddragon.leagueoflegends.com/api/versions.json
1. 표시할 정보가 정말 많았다.
페이지에서 사용할 객체들을 정리했다.
MATCHDATA_TYPE
export interface IMatchInfo {
gameDuration: number,
gameEndTimestamp: number,
gameMode: string,
participants: IParticipants[],
teams: ITeams[]
queueId: number
}
export interface IParticipants {
summonerId: string,
kills: number,
deaths: number,
assists: number,
champLevel: number,
championId: number,
championName: string,
totalDamageDealtToChampions: number,
wardsKilled: number,
wardsPlaced: number
summonerName: string,
summonerLevel: string,
visionWardsBoughtInGame: number,
totalMinionsKilled: number,
summoner1Id: number,
summoner2Id: number,
win: boolean,
item0: number,
item1: number,
item2: number,
item3: number,
item4: number,
item5: number,
item6: number,
perks: IPerks
}
interface IPerks {
styles: IPerks_Style[]
}
interface IPerks_Style {
description: string,
selections: IPerk[]
}
interface IPerk {
perk: number,
var1: number
var2: number
var3: number
}
export interface ITeams {
bans: IBans[]
objectives: IObjectives
win: boolean
}
interface IBans {
championId: number,
}
interface IObjectives {
champion: {
kills: number
}
}
export interface IDevidedTeam {
team1: IParticipants[],
team2: IParticipants[]
}
2. 커스텀해야하는 데이터가 있다.
RIOT에서 제공해주는 json들을 참고했다.
1. 주룬, 부룬
https://ddragon.canisback.com/img/perk-images/Styles/
이와같은 주룬과 부룬, 주룬에 대해서는 ID값 그대로 이미지를 넣어 주면 그만이지만
부룬의 경우 ID값 그대로 넣어주면 상세 룬 이미지가 박혔다.
따라서 8200번 일 경우, 앞에 2번째 자리만 추출 , 82, 따로 분류해줘서 포괄적인 부룬을 표시했다.
예외적으로 정밀 룬이었나, 앞자리수 2개가 같지 않은 경우가 있었다. 예외 처리를 해줬다.
2. 랭크 타입
매치데이터에 QueueType이 담겨서 온다. 이것으로 게임 종류를 판별한다.
구글링하다가 잘 정리해둔게 있어서, 변형해서 사용했다.
QUEUE_TYPE
export const QUEUETYPE: any = {
400: "norm", //Normal Draft Pick
420: "solo",
430: "norm",
440: "flex",
450: "aram",
700: "clash",
800: "ai", // Deprecated
810: "ai", // Deprecated
820: "ai", // Deprecated
830: "ai",
840: "ai",
850: "ai",
900: "urf",
920: "poro",
1020: "ofa",
1300: "nbg",
1400: "usb", // Ultimate Spellbook
2000: "tut",
2010: "tut",
2020: "tut",
};
export const ko: any = {
solo: "솔랭",
norm: "일반",
aram: "칼바람",
flex: "자랭",
nbg: "돌넥",
usb: "궁주문서",
urf: "URF",
ofa: "단일",
ai: "AI대전",
poro: "포로왕",
tut: "튜토리얼",
etc: "기타",
clash: "격전",
};3. 스펠
http://ddragon.leagueoflegends.com/cdn/13.5.1/data/ko_KR/summoner.json
스펠 또한 마찬가지
SPELL_TYPE
export const SPELLTYPE: any = {
1: "SummonerBoost",
3: "SummonerExhaust",
4: "SummonerFlash",
6: "SummonerHaste",
7: "SummonerHeal",
11: "SummonerSmite",
12: "SummonerTeleport",
13: "SummonerMana",
14: "SummonerDot",
21: "SummonerBarrier",
30: "SummonerPoroRecall",
31: "SummonerPoroThrow",
32: "SummonerSnowball",
39: "SummonerSnowURFSnowball_Mark",
54: "Summoner_UltBookPlaceholder",
55: "Summoner_UltBookSmitePlaceholder",
};
3. 로컬 이미지 활용
서버 올리고 돌려봤는데 너무 느렸다.
이미지를 다른 사이트에 호출해서 가져와서 뿌려주고 있었다.
퍼즐 조각 하나하나 맞추듯이 추가되니까 보기 싫어서 로컬에 전부 저장했다.
이미지는 여기서 받을 수 있다.
https://developer.riotgames.com/docs/lol
4. 하고 싶은거
검색 페이지 로드 할때마다 api가
유저 네임 대상 검색 - 1회
유저 랭크 점수 검색 - 1회
유저 최근 0~100 게임 검색 - 1회
유저 최근 게임 ID 대상 검색 - 10회
13회 이다.
게임 상세 보기는 구현 안되어있지만 한다고하면 소환자 별 랭크도 볼수있게하고 싶다.
그렇다면 게임 1개 당 개개인에 대해서 랭크 점수를 조회해야하는데 고유한 소환사ID값이 필요하다.
소환사 이름 대상으로 지정할 수없으니, 각각에 소환사 정보에 대해 호출하고 소환사ID값으로
랭크 점수를 호출한다.
1게임 = 10명( 소환사ID추출 ) + 10번( 소환사 랭크점수 추출 ) 20번 호출이다.
한페이지에 10게임을 보여준다면 10 * 20 = 200번 호출한다.
그렇다면 DB가 필요할 것 같다.
1. 최초 검색 시 소환사, 게임에 대해 저장
2. 나중에 같은 값으로 호출이 들어올때 해당 데이터가 DB에 존재하면 출력, 아니면 api 호출하여 DB에 저장
db 구축하고 저장하는 식으로 구현한다면 재밌을 것 같다.
찾아보니까
각 포지션 동선에 대한 정보들도 제공해주던데 이런 데이터들을 많이 제공해준다.
사이트에서 활용하기 나름인 것 같다.
#마주한 문제점들
nginx, 도메인 설정
EC2에서 amazone linux 2023 사용했다.
SSL인증하는데 certbot을 깔 방법이 없었다.
다른 패키지 툴로 깔려고 시도했는데 해내지 못했다.
apt-get도 안된다.
yum 밖에 사용하지 못하고 yum으론 아무것도 할 수가 없었다.
git - amazone linux 2023에 pip로 설치하면 된다는 말이 있어서 따라해봤다.
안된다. 의존성에서 문제가 생기는 것 같다.
certbot 패키지를 추가해 달라는 티켓이 있는거 보니까
나랑 비슷한 사람이 있는 것 같다.
ubuntu로 인스턴스 다시 생성해서 진행했다.
Filezila
이미지를 로컬에 저장해야해서 tar로 압축하고 filezila로 넘겨야했다.
갑자기 드래그가 안됐다. 권한 문제인줄 알고 chmod 명령어
파일질라 폴더 우클릭 - F 파일 속성 777설정 이것 저것했는데 소용없었다.
https://koreaparks.tistory.com/144
이거 보고 해결했다.