[m] 라이언게임즈 api를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트...
Post on 07-Aug-2015
205 views
TRANSCRIPT
![Page 1: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/1.jpg)
여자친구 LOL 플레잉 감시 위한 javascript parse를 이용한
Riot API 접근하기 그리고..
0516 박민석
![Page 2: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/2.jpg)
어떻게 만들 것인가
![Page 3: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/3.jpg)
MYPAGE
League Of Legend
NAMECurrent
Player State
![Page 4: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/4.jpg)
어디서 가져올 것인가
![Page 5: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/5.jpg)
라이엇 게임즈에선 개발자들을 위한 API를 제공하고 있다.
![Page 6: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/6.jpg)
![Page 7: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/7.jpg)
![Page 8: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/8.jpg)
![Page 9: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/9.jpg)
{platformId} : 현재 서버 (KR, US) {summonerId} : 소환사(유저)의 고유 ID
Current-game v1.0
![Page 10: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/10.jpg)
![Page 11: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/11.jpg)
실패시 404
성공시 200
게임중이면 정보 출력 게임중이 아니면 에러
![Page 12: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/12.jpg)
게임중이면 정보 출력 게임중이 아니면 에러
실패시 404
성공시 200
이를 이용해서 현재 게임의 유무를 판단하자!
![Page 13: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/13.jpg)
MYPAGE
Current-game-v1.0
NAMECurrent
Player State
![Page 14: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/14.jpg)
{platformId} : 현재 서버 (KR, US) {summonerId} : 소환사(유저)의 고유 ID
![Page 15: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/15.jpg)
{platformId} : 현재 서버 (KR, US)
{summonerId} : 소환사(유저)의 고유 ID!==
소환사(유저)의 이름
![Page 16: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/16.jpg)
MYPAGE
SUMMONER-v1.4
NAME고유 ID를 포함한 Player 정보
![Page 17: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/17.jpg)
MYPAGE
Current-game-v1.0
summoner-v1.4
NAME
ID
Current Player State
![Page 18: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/18.jpg)
어떻게 받아올 것인가
![Page 19: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/19.jpg)
summoner-v1.4
의 Return 값
![Page 20: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/20.jpg)
xmlHttp Method를 이용!xmlHttp ( xml를 가져옴 )
JSON (xml를 자바스크립트 형식으로 변경)
summoner-v1.4
의 Return 값
![Page 21: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/21.jpg)
xmlHttp 의 기본 구조
![Page 22: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/22.jpg)
xmlHttp 의 기본 구조
1. 새 XMLHttpRequest 를 만든다.
![Page 23: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/23.jpg)
xmlHttp 의 기본 구조
1. 새 XMLHttpRequest 를 만든다.
2. 서버와 연결할 링크와 방식을 설정한다.
![Page 24: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/24.jpg)
xmlHttp 의 기본 구조
1. 새 XMLHttpRequest 를 만든다.
2. 서버와 연결할 링크와 방식을 설정한다.
3. 서버 연결 후 할 행동을 설정한다.
![Page 25: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/25.jpg)
xmlHttp 의 기본 구조
1. 새 XMLHttpRequest 를 만든다.
2. 서버와 연결할 링크와 방식을 설정한다.
3. 서버 연결 후 할 행동을 설정한다.
4. 요청 보낸다.
![Page 26: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/26.jpg)
summoner-v1.4
의 Return 값
![Page 27: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/27.jpg)
MYPAGE
Current-game-v1.0
summoner-v1.4
NAME
ID
Current Player State
xmlHttpRequst
xmlHttpRequst
![Page 28: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/28.jpg)
![Page 29: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/29.jpg)
![Page 30: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/30.jpg)
CORS(Cross-Origin-Resource-Sharing) Blocked로 인한 실패
알고보니 summoner-v1.4 가 CORS 이 Block 됨
![Page 31: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/31.jpg)
알고보니 summoner-v1.4 가 CORS 이 Block 됨
CORS(Cross-Origin-Resource-Sharing) Blocked로 인한 실패
CORS란? 다른 서버에서 제공하는 자원에 접근하기
![Page 32: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/32.jpg)
MYPAGE
Current-game-v1.0
summoner-v1.4
NAME
ID
Current Player State
xmlHttpRequst
xmlHttpRequst
![Page 33: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/33.jpg)
MYPAGE
Current-game-v1.0
summoner-v1.4
NAME
ID
Current Player State
Blocked!
xmlHttpRequst
xmlHttpRequst
![Page 34: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/34.jpg)
여자친구 LOL 플레이 감시 위해 javascript parse를 이용한
Riot API 접근하기
우리의 목표
![Page 35: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/35.jpg)
여자친구 LOL 플레이 감시 위해 javascript parse를 이용한
Riot API 접근하기
CORS란? 다른 서버에서 제공하는 자원에 접근하기
우리의 목표
Blocked!
Blocked!
![Page 36: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/36.jpg)
실패!
![Page 37: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/37.jpg)
그러나 의미 있는 삽질
1. 브라우저의 “요소점검”을 이용하자 2. 한 줄씩 탐구하자
3. CORS ( Cross-Origin-Resource-Sharing ) 개념
![Page 38: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/38.jpg)
![Page 39: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/39.jpg)
그러나 의미 있는 삽질
1. 브라우저의 “요소점검”을 이용하자 2. 한 줄씩 탐구하자
3. CORS ( Cross-Origin-Resource-Sharing ) 개념
![Page 40: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/40.jpg)
![Page 41: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/41.jpg)
그러나 의미 있는 삽질
1. 브라우저의 “요소점검”을 이용하자 2. 한 줄씩 탐구하자
3. CORS ( Cross-Origin-Resource-Sharing ) 개념
![Page 42: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/42.jpg)
![Page 43: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/43.jpg)
Do 삽질
![Page 44: [M] 라이언게임즈 API를 이용해 여자친구 롤(lol) 플레이 감시 자바스크립트 파서 만들기](https://reader031.vdocuments.net/reader031/viewer/2022012312/55c467bbbb61ebaa478b4776/html5/thumbnails/44.jpg)
참고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