# RIOT API
MVC 완료 및 CSS 추가
📌 디렉토리 정리완료 📌 정리 후기 애 먹었던 디렉토리 별 모듈정리를 드디어 끝냈다. 정리하면서 느낀 과정은, 확실히 만들기 전부터 분리해놓고 구상하는 것이 훨씬 더 유지보수에 좋다고 느낀 것이다. 처음에 한 코드에 다 때려박았을 때는, 에러가 났을 때 고치기가 너무 힘들었다. 지금도 보면 토나온다... 근데 정리하고 나서는, 에러가 무섭지 않다 이게 가장 크게 느낀 점 같다. 에러가 나오면 어디서 났지를 너무 쉽게 찾고 접근하게 된다. 유지보수가 쉽다는 말이 괜히 있는 것이 아니다.. 그러다 보니 기능추가가 자연스레 쉬워지고, 루프하는 함수를 정리하게 되는 습관이 생겼다. CSS에도 눈을 돌리는 중이다. 어쨌든 좀 이쁘게 사이트를 만들고 싶기에 ㅎ.. db구현도 천천히 해나가며, 후에는 db와 소통하며 편리하게 만들 예정이다. 추가하고 싶은 기능이라 함은, 회원가입제, 게시판, 분석기능 및 관련 자료 업데이트 등등이 있다. 진짜 별거 아닌 것 같은데 학교다니면
롤 전적 사이트 구현 - Riot API
Riot API key 발급 https://developer.riotgames.com/ 접속 REGENERATE API KEY API 쓸 API : SUMMONER-V4, MATCH-V5 전적을 불러오려면 matchId 가 필요한데 SUMM 어쩌고에서 받아서 다시 넣어야함 밑줄 친거 클릭해서 호출해보자~
Riot API LEAGUE-V4에서 200이지만 빈 Body가 넘어올 때
개요 상태코드가 200이지만 비어서 오는 Body > 왜 200인데 Body가 비어서 오는거지? Riot API에서 LEAGUE-V4의 사용자 ID로 정보를 얻는 API를 사용하게 됐다. 분명 페이커님의 아이디인 는 정상작동 하는데, 왜 내 아이디는 작동이 안되는걸까? 거기다가 상태코드도 200으로 성공인데, 왜 빈 Body가 넘어오는걸까? 원인 [스택 오버플로우 답변](https://stackoverflow.com/questions/54615794/riot-league-v4-api-returns-empty-respon
너 쌩배지(리그오브레전드 닷지 경보기) 작성일지 - 9 [完..인데 써보실분?ㅋㅋ]
⚙ 자잘한 버그들   RIOT API나 LCU에는 자잘한 버그들이 있다. 예를들면 솔랭 데이터를 가져오는데 있어 챔피언의 공식 이름이 다른 경우 (Fiddlesticks -> FiddleSticks), LCU에서 추출한 participant에는 gameName과 name이 둘 다 있는데 이게 같을 때도 다를 때도 있었고, 전 시즌 티어에 대한 데이터는 줬다가 안줬다가 property가 오락가락한다(이게 사실상 매우 치명적이었다). 그리고 API에러도 상당히 빈번하게 발생한다.   API상태가 정상이라면 이런 에러가 발생했을 때 같은 요청을 계속 수행할 수 있도록 이전에 짜놓은 코드를 응용해 api call메소드를 다시 만들었다. 우리가 잘 아는 페이지들에서 유사한 방식을 쓰지 않을까(?) 생각해 본다.   또한 프로젝트 시작할 때는 몰랐던 Promise.all을 API Call에 적용했고 멀티서치 시 엄청난 속도 향상을 맛봤다....
너 쌩배지(리그오브레전드 닷지 경보기) 작성일지 - 8
리팩토링 시작 🤔 Electron이거 어떻게 돌아가는거지?  Electron 공식문서를 보면 근본적인 동작과정을 파악할 수 있다. 기본적으로 electron 설치 후, package.json에 main으로 동작할 스크립트를 지정해주고, electron 스크립트를 실행하는 것이 전부라고 할 수 있다. 이런 식으로 작성하고 main.ts에 콘솔 스크립트 입력 후 npm start를 해보면 콘솔이 찍히는 것을 확인할 수 있다. React나 Vue 같은 프레임워크를 얹을 때에는 main 스크립트에 BrowserWindow API를 이용해 빌드된 웹뷰를 띄워준다는 개념이 정리되어있다면, 프론트엔드 스택에 구애받지않고 electron앱을 구성할 수 있을 것이다. 이전에 Electron forge + react + ts +
롤 전적 검색 사이트 프로젝트 2
이전에 올린 프로젝트를 2주간 이어서 진행을 했다. 중간에 추석이 있어 좀 시간이 오래 걸리긴 했지만 여차저차 완성했다. 이전에는 오로지 api 호출로만 전적을 불러왔다면 이번에는 호출을 통해 불러온 전적 데이터들을 db에 저장해주고 db에 있는 데이터를 불러와 보여준다. 이 과정에서 기술 스택이 몇가지 추가되었다. 기술 스택 Springboot Riot api Thymeleaf jQuery Spring Data JPA MySQL 화면 구성 변경 갱신이 추가되었다. ERD 회고록 만들고 보니
롤 전적 검색 사이트 프로젝트
3주간 진행했던 토이 프로젝트가 끝이 났다. 스프링부트에서 외부 api를 사용한 것은 처음이고 혼자 진행하다보니 생각보다 시간이 오래 걸렸다. 간단한 프로젝트 주제로 어떤게 좋을까 고민을 하다가 즐겨하는 게임인 리그오브레전드의 검색 사이트를 한번 만들어보자 생각하여 만들어보게 되었다. riot api key는 https://developer.riotgames.com/ 에서 personal api key를 신청해서 발급받았다. 발급 받는데 대략 3주정도 걸렸다. (사실상 프로젝트 종료 며칠전에 받았다...) 기술 스택 Springboot Riot api Thymeleaf jQuery 화면 구성 초기 화면 검색 화면 
Spring Boot 라이엇 API 써보기 [1] - 데이터 받아오기 - RestTemplate
라이엇 API 바로가기 위 링크로 가시고, API 키값을 할당 받으면, 라이엇 API를 사용할 수 있습니다. (처음 2주동안은 Develop Key를 사용했고 그 뒤에는 Personal Key를 받아서 사용했습니다.) 먼저, 라이엇에 API 요청을 하면 응답으로 받은 JSON데이터를 JAVA 객체로 변환을 해야했습니다. 변환된 객체를 Entity로 만들어서 Mysql DB에 저장되게 하는 연습을 하는 과정을 가졌습니다. 롤 챔피언 정보를 가지고 연습하기 되게 좋아서, 챔피언 정보를 저장하는 걸 확인하며, 코딩을 했습니다. 챔피언 정보는 위 링크와 다르게 여기📌로 가셔서 게임관련 데이터를 받을 수 있습니다. 챔피언 정보 받아오기 위 API는 해당 버전에 맞
Spring Boot 라이엇 API 써보기 [0] - 시작
스터디를 통해서 친해진 사람들과 팀프로젝트를 해볼 기회가 생겼습니다. 총 6명이였고, 3명씩 팀을 나눠서 개발을 해보기로 했습니다. 👨🦱 팀원 저희 팀 3명을 간략히 소개하자면,, 팀장 - 등대지기 팀원 - 입실론(나), 디아볼로스 깃허브 링크 📌 개요 주제 - 롤 통계 사이트 라이엇 API를 사용해서 롤 통계 사이트를 만들기로 결정한 이유는 6명 모두 팀프로젝트 경험이 없었고, 외부 API와 대량의 데이터를 다뤄보기 좋은 경험이 될 것 같아서 주제로 결정했습니다. ⚙️ 기술 스택 IntelliJ JAVA 11 Mysql Spring boot ✋ 커뮤니케이션 및 버전관리 Slack 게더타운 Git / Github
너 쌩배지(리그오브레전드 닷지 경보기) 작성일지 - 7
🔧 구현 가능성을 봤다면....리팩토링....  개인 프로젝트를 할 짬이 많지는 않았는데 간만에 조금 짬이 생긴 것 같다. 이 프로젝트 목표는 >- 어딘가 공개할 만한 퀄리티의 코드 인스톨러 까지 꾸며서 배포 Riot API Production Key를 Proxy Server로 제공하여 key보안성 강화 였는데, 정신없이 기능 구현에만 몰두하고 보니 영 품질이 좋지 못하다. 또한 코드 퀄리티와 포매팅에 큰 신경을 안썼는데, 정신차리고 보니 남들에게 선보일만한 것이 전혀 못된다는 생각이 들었다.  또한 프로젝트 규모가 커짐에 따라 확실히 기본세팅된 웹팩 환경에서는 빌드나 개발모드가 속도면에서 영 좋지못한 경험을 안겨줬다. Electron forge를 이용해 프로젝트 빌딩을 해왔는데, Electron 숙련도가 낮다면 좋은 방법이 될 수 있겠으나, 사실상 검색하면 나오는 프로젝트들 중에 Electron을 처음 사용해보는
롤 포지션 찾아보기
나에게 맞는 포지션 찾아보기 저는 리그오브레전드를 플레이 할 때 어떤 포지션이든 마다 하지 않는 올라운더입니다. 하지만 이제는 주 포지션을 정해서 T자형 인재가 되고싶네요. 그런 의미에서 riot 에서 제공하는 저의 매치 데이터로 어떤 포지션이 안성맞춤인지 알아보겠습니다. 가설 > 라인전 0~15분 동안 death 횟수가 적은 lane을 잘한다. 어떤 포지션이 잘 맞는지 여러가지 기준에 의해서 정할 수 있겠지만 이번 분석에서는 초반 라인전의 죽음 횟수를 기준으로 판단하겠습니다. 📁 데이터 불러오기 riot api 데이터 저장하는 방법 riot api를 사용해서 미리 저장해 놓은 데이터를 불러오겠습니다. 매치 정보를 json으로 저장한 데이터 목록을 불러오고 해당 목록에서 데이터 하나하나에 접근해 데이터프레임(표)를 만들겠습
RIOT API 데이터 저장하는 방법
이제까지 롤 데이터를 분석하면서 매번 riot api를 호출해서 데이터분석을 진행했습니다. 이 때 다음의 문제가 있었습니다 > 1. api key를 갱신해야 한다는 점 요청 횟수가 초과 할 수도 있는 문제점 그래서 이번에는 데이터를 json 파일로 저장해서 다음부터 api호출없이 저장된 데이터를 읽어 올 수 있도록 하겠습니다. .env에서 api key 가져오기 데이터를 저장하기 위해서는 일단, 첫 번째의 호출이 필요합니다 코드를 웹 상의 다른 사람과 공유하는데 자신의 api키를 그대로 변수에 할당하고 사용한다면 불특정한 사람의 무분별한 호출로 api key가 제한 당할 수도 있습니다. 그렇기 때문에 .env라는 숨겨진 파일에 api key를 저장해놓고 불러오는 방식을 사용하겠습니다. .env 작성 하는방법을 모르시는 분들은 따라해 주세요 😃 [.env 작성법](https://core.today/story/Z
Riot API - 챔피언 이름과 이미지 파싱
LOL 밴픽 페이지를 구현하기 위해 필요한 정보로는 모든 챔피언의 이름과 이미지가 있다. 단순 검색을 통해서 챔피언들의 이름을 구할 수 있지만, Riot API를 활용하는 것이 목표였기에, Riot API에서 JSON으로 주어진 데이터들에서 챔피언 이름과 이미지들을 파싱하는 것을 진행해보았다. 구현 챔피언 이름 과정 먼저 챔피언에 대한 데이터를 가지고 있는 JSON 파일을 찾아야 한다. 해당 파일은 League of Legends Docs에서 제공하고 있다. League of Legends Docs를 보면 Champions 부분이 있다. 여기에 JSON파일을 확인할 수 있다. 위의 사진의 URL 클릭
Riot API 경험하기
Riot API URL : Riot Developer Portal 먼저, Riot이 개발한 게임들은 LOL뿐만 아니라, 발로란트, 레전드오브룬테라, 전략적 팀 전투(롤토체스) 등 많은 종류가 있다. 나는 LOL 밴픽 시스템을 구현해보고자 하기에, LOL과 관련된 내용들을 주로 다루어보고자 한다. Riot API를 활용하기 위해서는 먼저 Riot Developer Portal에 접속하여야 한다. 접속하면 상단 바에 APIS, DOCS, POLICIES, STATUS, CHANNELS 등 5가지의 내용이 존재한다. APIS는 사용할 수 있는 API들에 대한 정보 및 활용 방법 등을 설명하고 있다. DOCS는 쉽게 설명하자면 설명서와 관련 정보들을 정리해놓은 문서이다. POLICIES는 이 API드을 활용하는 것과 관련된 정책이다. STATUS는 현재 API 서버들의 상태를 보여준다. CHANNELS는 현재 이
RIOT API 사용법 2
지난 번에는 RIOT DEVELOPER 사이트에서 API KEY 발급받는 방법을 알아 봤습니다. 이번에는 최근 한 게임을 선택해서 제가 움직인 경로를 미니맵에 나타내보겠습니다. > 저는 잘했다고 생각합니다 👨💻 최근 1게임 선택해서 데이터 보기 RIOT API를 통해 받은 매치기록 중 최근 1게임의 게임 id 입니다. > 'KR_5873049405' 해당 게임아이디로 매치기록을 요청합니다. 데이터 프레임으로 만들어서 대략적인 부분을 살펴보겠습니다. 
너 쌩배지(리그오브레전드 닷지 경보기) 작성일지 - 6
😎 Data Dragon을 활용한 유저 정보창 꾸미기  롤에서는 공식적으로 게임asset들을 무료로 제공하고 있다. 유저 아이콘이나 챔피언 초상화 같은 것들이다. 하지만 공식적으로 제공하는 asset들은 다소 한정적이고, 비공식적으로 거의 모든 asset들을 이용할 수 있는 Community Dragon같은 사이트들이 있다.  디자인에는 영 감각이 없다는걸 자각하고있지만...ㅋㅋ 오버레이 화면 작업전에 일단 기본 페이지부터 작업하고 있다. 미완성이지만 롤 클라이언트 실행시 다음과 같은 홈화면을 볼 수 있다. 🥨 커스텀 알고리즘 설정 페이지   플레이어의 위험지수를 나타내는 알고리즘을 사용자가 커스텀 할 수 있도록 설계 중이다. 여러가지
RIOT API 사용법
RIOT DEVELOPER 사이트에서 API KEY 발급받기 라이엇게임즈 디벨로퍼 주소 해당 사이트에서 로그인을 합니다. 로그인을 하면 아래처럼 API KEY가 나옵니다! 빨간색 글씨로 만료일이 나와있고 RATE LIMITS이 안내 되어있습니다. 1초에 20건의 요청, 2분에 100건의 요청이 가능하다고 합니다. > RATE LIMITS를 지키지 않
너 쌩배지(리그오브레전드 닷지 경보기) 작성일지 - 5
💫 styled-components에서 테마 팔레트, 폰트 공급  일단 전역적인 테마 팔레트와 폰트를 DefaultTheme으로 공급했다. 디자인에는 영 재능이 없는 듯 하다. 별거 아니지만 typeScript 관련해서 재밌는 오류가 있어서 작성한다.  벨로퍼트님의 리액트 강의를 보면 다음과 같은 코드가 있다.  이를 타입스크립트에 적용하면, theme.palette[color] 부분에서 오류가 발생한다. 타입스크립트에서는 오브젝트 인덱싱을 위해 string literal type만을 허용하는데,string literal type은 string보다 좁은 의미의 타입으로 불변하는 read only string에만 시스템이 부여한다. 위 코드의 color는 매개변수로 언제든 변하는 sting이므로 default theme에 index signature 속성을 부여하면 된다. style.d.ts 💭 Ready 컴포
🎉롤 전적검색 사이트 만들기(2) - 가져온 데이터를 페이지에 적용
- ✔ Riot API를 인증 📝XMLHttpRequest을 이용해서 Riot API 데이터 파싱 Express를 이용해서 Front에 데이터 넘기기 뉴모피즘을 이용하여 사이트 꾸미기 채택한 파싱방법 서브파티라이브러리를 아직 숙지한게 없어서 XMLHttpRequest을 사용하여 데이터를 파싱하기로 하였다. 나중에 사이트를 다듬을때 Spring boot나 다른 라이브러리를 사용하여 데이터를 파싱하는걸 공부해보도록 하자. 파싱할 데이터 정하기 Riot Developer사이트에서 가져올 만한 데이터를 추려내 보자. > SUMMONER-V4 소환사정보 /lol/summoner/v4/summoners/by-name/{summonerName} >LEAGUE-V4 리그 정보 /lol/league/
🎉롤 전적검색 사이트 만들기(1) - RIOT API 승인받기
사이트 구조 다른 전적검색 사이트에는 광고가 너무 많아서 전적검색을 보기가 좀 불편하여 나만의 광고없는 깔끔한 리그오브레전드 전적검색 사이트를 만들어 보기로 하였다. 1차적인 목표는 간단하게 아래처럼 정하기로 했다. > 📝Riot API를 인증 XMLHttpRequest를 이용하여 Riot API 데이터 파싱 Express를 이용해서 Front에 데이터 넘기기 뉴모피즘을 이용하여 사이트 꾸미기 RI