https://www.clien.net/service/board/use/14908444CLIEN 1탄
https://www.clien.net/service/board/use/15471095CLIEN 2탄
-------------------------------------------------------------------------
2탄에서 이어지는 내용입니다.
(글을 쭉 쓰고 다시 앞으로 올라와서 첨언을 해보는데.. 생각보다 글이라는게 쓰기가 어렵네요. 초보가 겪은 세세한 과정을 상세히 서술하려 노력했습니다.)
아는 동생과 이야기를 나눈 후 저는 내 친구가 롤을 하고 있으면 알려주는 알람기능을 만들기로 마음먹습니다.
사실 처음에 롤 전적검색사이트를 만들려고 했던 것은 어차피 할 프로그래밍 공부, 기왕지사 관심있는 분야로 하면 시너지가 있지 않겠나 하는 것도 있었고, 기존의 롤 전적검색사이트에서 제시하는 데이터들 말고 제가 더 나은 데이터를 제시 할 수 있겠다고 생각을 했었기 때문입니다.
아무래도 전공이 통계다보니 이것저것 주워 들은것들을 활용하여 각 티어별로 더 참값에 가까운 챔피언별 데이터를 제시할 수 있을거란 생각때문이었지요.
그치만 일단 친구가 게임하고 있다는 알람을 주는 기능이 당장은 저나 친구들에게 더 필요한 기능이라고 판단했고, 가능하다면 다른 분들도 사용할 수 있도록 하고 싶다는 생각이 들었습니다.
여기서 3가지를 동시에 공부하기 시작합니다. 하나 공부하다 막히면 다른거 공부하고 이런식으로 돌려가면서 정보를 찾았습니다.
1) 롤 api
2) push
3) 서버에 프로그램 올리는 법
중간중간 필요하거나 도움을 받았던 사이트들은 맨 아래에 다시 정리해서 적어 놓도록 하겠습니다 :)
1.롤 api
https://developer.riotgames.com/
api라는 단어도 어색했던 시절이 있었는데 이제 아무렇지 않게 저런 단어를 스스로 쓰고 있는 것을 보니 소름돋네요.
롤과 관련된 정보들을 활용하려면 라이엇에서 제시하는 것들로만 쓸 수 있습니다. 라이엇이 제공하지 않는 무언가를 제가 얻어서 활용할 수는 없죠.
일단 들어가서 이것저것 눌러보면서 아 라이엇에서 이런정보를 제공하는구나 아 기존의 사이트들이 이런것들을 얻어다가 가공해서 제시했던 거였구나 하면서 탐색을 해 나아갔습니다.
그리고 들어가보면 설명이 전부 영어라... 좀 압박이 심했는데 근데 제가 또 그런 가이드, 튜토리얼 이런거 읽지 않고서는 움직이지 않는 스타일이라 열심히 읽어제꼈습니다. 진짜.. 영어 좀 잘했으면 공부 속도가 훨씬 빨랐을텐데..ㅠㅠ
여튼 그리하여 이것저것 눌러보면서 제가 원하는 정보를 받아올 수 있음을 확인했습니다. 단순히 게임 유저가 클라이언트에 로그인 했는지 여부는 알 수 없었고 해당 플레이어가 게임중인지 아닌지는 알 수 있었습니다.
정보를 불러오는 방식을 간단히 말씀드리자면 소환사api탭으로 가서 친구소환사명 검색 -> 친구소환사명에 복잡한 형태의 여러가지 id가 제공되어 있음을 확인(아래 사진으로 확인가능하도록 첨부하겠읍니다.) -> 라이엇이 제공해주는 데이터마다 원하는 형태의 id가 있는데 그 id를 복붙해서 또 검색 -> 원하는 결과를 얻음. 이런 형태를 띄고 있었습니다.
그리하여 "음 뭐 쉽네 금방하겠군" 이러면서 정보를 받아올 준비를 하였습니다. 그런데 이건 라이엇api페이지에서 띄워줘서 볼 수 있는 것이고, 실제로는 정보를 어떻게 받아오는건지 모르겠는겁니다 -_-;; api확인하는 페이지에 request url 이라고 있는 항목이 있는데
"아 이걸 다른사이트 들어가는 것처럼 브라우저 주소창에 쓰라는건가?" 하고 해보았습니다.
뭔가 안됩니다.
눈에 띄는 단어가 몇개있습니다. "JSON" "Unauthorized" "status_code 401"
라이엇이 api페이지에서 제시하는 상태표시를 확인했습니다.
음.. 뭐 대충 권한이 없다고 하는건가...
근데 JSON은 뭐지? JSON에 대해서 검색을 하기 시작합니다. 연관검색어에 xml어쩌구가 나오기 시작하고 "아 제발... 모르는거 그만 나와줘..ㅠㅠ 어디까지 배워야해 ㅠㅠ" 라고 울부짖으며 숱한 검색을 해본 결과
(사실 개발에 이게 가장 중요한 것 같습니다. 원하는 정보를 찾아내는 능력... 와 이거 완전 90년대 정보와컴퓨터 같은 학교 예체능과목 교과서에 맨날 나오는 내용 아닌가요...)
제가 받아들이고 싶은(?) 정보만 요약했던 것을 떠올려 보면 대충
1)클라이언트와 서버가 데이터를 주고 받을때 json형태로 주고 받음
2)예전에는 xml어쩌구 저쩌구 -> 예전이니까 지금은 xml 몰라도 된다는거겠지? 제발 그래라. 믿음을 가지고 더이상 찾아보지 않음
3)json형태는 보통 프로그래밍 언어 배울때 경험하는 객체 형태로 쓰여져 있는데 전부 문자열로 표현만 되어 있을 뿐.
지금 제 머릿속에 이렇게 기억하고 있는데 맞는지 확신은 없습니다 -_-;; 여튼 이렇게 받아들이고 이제 생각을 정리해봅니다. 흐음.. 어쨌든 라이엇서버에서 제공하는 데이터를 내가 받아오니 서로 클라이언트와 서버 관계가 성립되겠구나. 그래서 json형태로 정보가 제시 되는거겠구나. 끝.
(json에 관한 설명 참고 사이트 https://www.json.org/json-ko.html 요즘은 공식사이트나 프로그래밍관련 org사이트들을 보면 재능기부형태로 한국어 번역이 참 잘되어있습니다. 물론 처음에 영어로 쓰여졌던 텍스트는 영어 그대로 읽는게 좋을때가 더 많긴합니다만.... 초보는 둘다 읽어보면서 감을 잡아야 하는 것 같습니다. 이게 기술적인 용어인지 일상적인 용어인지 구분을 못하기때문에..)
오키 이제 json이 뭔지 대충 알겠어. 근데 api페이지에서는 정보를 주면서 왜 브라우저에서 접속하듯이 하면 정보를 안주는거야? -> 다시 검색시작. 여기서부터는 롤 api관련해서 데이터분석이나 저처럼 코딩공부하려는 분들이 작성한 블로그를 샅샅이 뒤졌습니다. 많은 선발대(?) 선배님들이 계시더군요.
(라이엇api 사이트에서는 아무리 찾아봐도 어떻게 하는건지 설명이 안나와있었습니다. 제가 못찾은걸 수도 있지만...지금 글을 작성하면서 생각해보건데 api관련해서 정보를 받을때는 아마 개발자들 사이에서 통일된 규칙이 있기때문에 굳이 그런것 까지 적어놓지 않은게 아닐까 생각해봅니다. 이건 2)push 공부할때 텔레그램을 만져보면서 라이엇과 텔레그램이 같은 방식으로 정보를 제공하는 것을 보고 유추하였습니다.)
선배님들 블로그 대부분은 '라이엇이 제공한 api 키를 이용해서 정보를 받아왔다' 이렇게만 적혀 있었습니다. "그래서 도대체 그 키를 어떻게 쓰는겁니까!!!ㅠㅠ" 외치면서 찾아보던중.. 딱 nodejs로 라이엇api를 활용한 코딩을 하신분 블로그를 발견하고 코드를 까보니 라이엇이 제공하는 request url 뒷부분에 쿼리스트링형태로 ?api_key=제공받은키 이렇게 붙여주더군요.(쿼리스트링 이런 고급단어를 내가 알다니 오오.)
그래서 저도 해보니까
이런식으로 잘 나오는 것을 확인할 수 있었습니다. 글로 쓰니까 몇줄이면 자세하게 설명이 되는데 저것도 아마 이틀인가 걸려서 찾았을 겁니다... 나이 30넘고 무언가를 해서 본능적으로 기쁘고 즐거워 본적이 있으신가요? 저는 작지만 저 정보가 원하는대로 잘 출력되는 것을 보고 기뻐서 의자에서 박차고 일어나 "나이스됐다!!!"를 외쳤습니다.
자 이제 브라우저에서 원하는 정보가 출력되는 것 까진 알았는데 나는 vscode를 활용해서 코드를 작성하고 있고... 원하는 정보를 내 vscode 터미널창에 뜨게 만들어야 뭔가를 할 수 있을 것 같은데... 그건 어떻게하지?
다시 또 검색 ->(이런저런 숱한 검색어 삽질 끝에) npm에서 request모듈을 써라 -> 넵 알겠습니다. https://www.npmjs.com/package/request -> 근데 전부 영어네요? -> 사용법을 한글로 다시 이케저케 검색 -> 다시 공식사이트 영어 읽고 개략적인 모듈내용 확인 -> 공식사이트 제일 처음에 나와있는 대표적인 사용법을 써보면서 직접 어떻게 데이터를 들어오는지 확인
const request = require('request');
request('http://www.google.com', function (error, response, body) {
//이렇게 예제코드가 제시되어 있으면
//대충 눈치껏 'http://www.google.com'부분에 라이엇api에서 얻었던 request url 주소를 붙여넣고
//일일이 console.log(response) console.log(body)를 터미널창에 찍어보면서 어떻게 데이터가 들어오는지 확인하고 원하는 정보를 캐치하여 코드 작성
});
여기까지 오면서 공부법이 정립되었는데요. 일단 필요한 모듈이나 내용이 있으면
1)공식사이트 확인 -> 2) 내가 이해한 내용이 맞는지 한글로 검색 후 여러 블로그 선배님들 내용 확인 -> 3) 코드는 공식사이트 것을 이용해 적용 (왜냐하면 블로그코드는 작성자가 편의적으로 작성한게 있을 수 있고 가져다 써야하는 모듈같은 것들은 시간이 흐름에 따라 업데이트가 이루어지는데 블로그는 과거의 내용을 다루고 있을 수 있기 때문에 결과적으로 항상 공식사이트에서 제시하는 방식을 따라 코드를 작성하였습니다.)
이후로는 새로운 내용을 접할때마다 이방식을 반복하며 학습하였습니다.
친구가 게임중인지 아닌지를 알기위해서 필요한 도구들은 대충 다 정리가 되었다고 생각이 들었습니다. 위의 샘플예제 코드에 게임중 유무를 확인하는 url을 넣고 제공하는 status code를 받아서 실제로 게임중일때와 게임중이 아닐때 status code 차이점을 확인하고 그대로 바로 if문을 작성했습니다.
if(statuscode가 게임중일때 나타내는 statuscode){
//친구가 접속중인 것을 폰으로 받아볼 수 있게 push
} else {
//다음 작업을 위해 원활하게 넘길 수 있는 코드를 대충 작성
}
이렇게 구조를 짜보고 나니 이제 친구정보를 받기위해 등록한 사용자에게 push로 쏴주는 것만 배우면 될 것 같았습니다. 그러면 저기 if문 코드에 넣고 끝! 이니까요.
실제로 그렇기도 했지만... push 코드를 이해하고 작성하는데만 두달반이 걸렸습니다.. 사실상 제 프로젝트는 정보를 쏴주는 push를 어떻게 구현할 것인가가 문제였던 것이지요. 라이엇 api 사용법은 큰 장애물이 아니었던 것입니다....
간단하게 1)2)3) 이번글에 쫙 정리하고 push코드를 공부하면서 어려웠던 부분은 이후에 정리해서 다시 글을 작성하려했는데 쓰다보니 벌써 소일거리를 하러 갈 시간이네요. 글 쓰는것도 써보니까 참 만만치 않네요.ㅠㅠ
소일거리하고 쉰다음에 다시 2)3) 작성하여 올리도록 하겠습니다.
읽어주셔서 감사합니다.
오늘도 혼자 외로히 고군분투하고 있는 누군가를 응원합니다.
화이팅입니다.
참고 : npm request는 들어가보면 This package has been deprecated 이라고 되어 있는데 더이상 업데이트나 어떤 지원은 하지 않겠다는 뜻인것 같습니다. 모듈은 잘 돌아갑니다만 시간이 흐르고나면 문제가 생길 수 있지않을까하는 생각이드네요. 왜 지원을 멈췄는지 들어가서 읽어보았는데 영어가 짧아 전부 이해하기 어려워 그냥 이제 지원안하나보다 하고 넘어갔습니다.
이후에 기능을 구현할때는 다른 모듈을 활용해보도록 해야겠습니다..
---참고한 사이트 정리---
1.라이엇개발자 사이트 https://developer.riotgames.com/
2.json 형태에 관한 설명을 볼 수 있는 곳 https://www.json.org/json-ko.html
3.npm request https://www.npmjs.com/package/request