View
204
Download
9
Category
Preview:
Citation preview
여자친구 LOL 플레잉 감시 위한 javascript parse를 이용한
Riot API 접근하기 그리고..
0516 박민석
어떻게 만들 것인가
MYPAGE
League Of Legend
NAMECurrent
Player State
어디서 가져올 것인가
라이엇 게임즈에선 개발자들을 위한 API를 제공하고 있다.
{platformId} : 현재 서버 (KR, US) {summonerId} : 소환사(유저)의 고유 ID
Current-game v1.0
실패시 404
성공시 200
게임중이면 정보 출력 게임중이 아니면 에러
게임중이면 정보 출력 게임중이 아니면 에러
실패시 404
성공시 200
이를 이용해서 현재 게임의 유무를 판단하자!
MYPAGE
Current-game-v1.0
NAMECurrent
Player State
{platformId} : 현재 서버 (KR, US) {summonerId} : 소환사(유저)의 고유 ID
{platformId} : 현재 서버 (KR, US)
{summonerId} : 소환사(유저)의 고유 ID!==
소환사(유저)의 이름
MYPAGE
SUMMONER-v1.4
NAME고유 ID를 포함한 Player 정보
MYPAGE
Current-game-v1.0
summoner-v1.4
NAME
ID
Current Player State
어떻게 받아올 것인가
summoner-v1.4
의 Return 값
xmlHttp Method를 이용!xmlHttp ( xml를 가져옴 )
JSON (xml를 자바스크립트 형식으로 변경)
summoner-v1.4
의 Return 값
xmlHttp 의 기본 구조
xmlHttp 의 기본 구조
1. 새 XMLHttpRequest 를 만든다.
xmlHttp 의 기본 구조
1. 새 XMLHttpRequest 를 만든다.
2. 서버와 연결할 링크와 방식을 설정한다.
xmlHttp 의 기본 구조
1. 새 XMLHttpRequest 를 만든다.
2. 서버와 연결할 링크와 방식을 설정한다.
3. 서버 연결 후 할 행동을 설정한다.
xmlHttp 의 기본 구조
1. 새 XMLHttpRequest 를 만든다.
2. 서버와 연결할 링크와 방식을 설정한다.
3. 서버 연결 후 할 행동을 설정한다.
4. 요청 보낸다.
summoner-v1.4
의 Return 값
MYPAGE
Current-game-v1.0
summoner-v1.4
NAME
ID
Current Player State
xmlHttpRequst
xmlHttpRequst
CORS(Cross-Origin-Resource-Sharing) Blocked로 인한 실패
알고보니 summoner-v1.4 가 CORS 이 Block 됨
알고보니 summoner-v1.4 가 CORS 이 Block 됨
CORS(Cross-Origin-Resource-Sharing) Blocked로 인한 실패
CORS란? 다른 서버에서 제공하는 자원에 접근하기
MYPAGE
Current-game-v1.0
summoner-v1.4
NAME
ID
Current Player State
xmlHttpRequst
xmlHttpRequst
MYPAGE
Current-game-v1.0
summoner-v1.4
NAME
ID
Current Player State
Blocked!
xmlHttpRequst
xmlHttpRequst
여자친구 LOL 플레이 감시 위해 javascript parse를 이용한
Riot API 접근하기
우리의 목표
여자친구 LOL 플레이 감시 위해 javascript parse를 이용한
Riot API 접근하기
CORS란? 다른 서버에서 제공하는 자원에 접근하기
우리의 목표
Blocked!
Blocked!
실패!
그러나 의미 있는 삽질
1. 브라우저의 “요소점검”을 이용하자 2. 한 줄씩 탐구하자
3. CORS ( Cross-Origin-Resource-Sharing ) 개념
그러나 의미 있는 삽질
1. 브라우저의 “요소점검”을 이용하자 2. 한 줄씩 탐구하자
3. CORS ( Cross-Origin-Resource-Sharing ) 개념
그러나 의미 있는 삽질
1. 브라우저의 “요소점검”을 이용하자 2. 한 줄씩 탐구하자
3. CORS ( Cross-Origin-Resource-Sharing ) 개념
Do 삽질
참고http://godpage.tistory.com/entry/Ajax정리-2-XMLHttpRequest의-메서드와-프로퍼티 https://breadmj.wordpress.com/2013/08/21/implement-cors-using-spring-mvc/ https://developer.riotgames.com/discussion/technical-help/show/EdF0RywZ
https://opentutorials.org/course/1375/6844 https://opentutorials.org/course/1375/6843
Recommended