여자친구 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