# LCU

gomiseki

⚙ 자잘한 버그들 &nbsp RIOT API나 LCU에는 자잘한 버그들이 있다. 예를들면 솔랭 데이터를 가져오는데 있어 챔피언의 공식 이름이 다른 경우 (Fiddlesticks -> FiddleSticks), LCU에서 추출한 participant에는 gameName과 name이 둘 다 있는데 이게 같을 때도 다를 때도 있었고, 전 시즌 티어에 대한 데이터는 줬다가 안줬다가 property가 오락가락한다(이게 사실상 매우 치명적이었다). 그리고 API에러도 상당히 빈번하게 발생한다. &nbsp API상태가 정상이라면 이런 에러가 발생했을 때 같은 요청을 계속 수행할 수 있도록 이전에 짜놓은 코드를 응용해 api call메소드를 다시 만들었다. 우리가 잘 아는 페이지들에서 유사한 방식을 쓰지 않을까(?) 생각해 본다. &nbsp 또한 프로젝트 시작할 때는 몰랐던 Promise.all을 API Call에 적용했고 멀티서치 시 엄청난 속도 향상을 맛봤다....

gomiseki

리팩토링 시작 🤔 Electron이거 어떻게 돌아가는거지? &nbspElectron 공식문서를 보면 근본적인 동작과정을 파악할 수 있다. 기본적으로 electron 설치 후, package.json에 main으로 동작할 스크립트를 지정해주고, electron 스크립트를 실행하는 것이 전부라고 할 수 있다. 이런 식으로 작성하고 main.ts에 콘솔 스크립트 입력 후 npm start를 해보면 콘솔이 찍히는 것을 확인할 수 있다. React나 Vue 같은 프레임워크를 얹을 때에는 main 스크립트에 BrowserWindow API를 이용해 빌드된 웹뷰를 띄워준다는 개념이 정리되어있다면, 프론트엔드 스택에 구애받지않고 electron앱을 구성할 수 있을 것이다. 이전에 Electron forge + react + ts +

gomiseki

🔧 구현 가능성을 봤다면....리팩토링.... &nbsp개인 프로젝트를 할 짬이 많지는 않았는데 간만에 조금 짬이 생긴 것 같다. 이 프로젝트 목표는 >- 어딘가 공개할 만한 퀄리티의 코드 인스톨러 까지 꾸며서 배포 Riot API Production Key를 Proxy Server로 제공하여 key보안성 강화 였는데, 정신없이 기능 구현에만 몰두하고 보니 영 품질이 좋지 못하다. 또한 코드 퀄리티와 포매팅에 큰 신경을 안썼는데, 정신차리고 보니 남들에게 선보일만한 것이 전혀 못된다는 생각이 들었다. &nbsp또한 프로젝트 규모가 커짐에 따라 확실히 기본세팅된 웹팩 환경에서는 빌드나 개발모드가 속도면에서 영 좋지못한 경험을 안겨줬다. Electron forge를 이용해 프로젝트 빌딩을 해왔는데, Electron 숙련도가 낮다면 좋은 방법이 될 수 있겠으나, 사실상 검색하면 나오는 프로젝트들 중에 Electron을 처음 사용해보는

gomiseki

😎 Data Dragon을 활용한 유저 정보창 꾸미기 &nbsp롤에서는 공식적으로 게임asset들을 무료로 제공하고 있다. 유저 아이콘이나 챔피언 초상화 같은 것들이다. 하지만 공식적으로 제공하는 asset들은 다소 한정적이고, 비공식적으로 거의 모든 asset들을 이용할 수 있는 Community Dragon같은 사이트들이 있다. &nbsp디자인에는 영 감각이 없다는걸 자각하고있지만...ㅋㅋ 오버레이 화면 작업전에 일단 기본 페이지부터 작업하고 있다. 미완성이지만 롤 클라이언트 실행시 다음과 같은 홈화면을 볼 수 있다. 🥨 커스텀 알고리즘 설정 페이지 &nbsp 플레이어의 위험지수를 나타내는 알고리즘을 사용자가 커스텀 할 수 있도록 설계 중이다. 여러가지

gomiseki

💫 styled-components에서 테마 팔레트, 폰트 공급 &nbsp일단 전역적인 테마 팔레트와 폰트를 DefaultTheme으로 공급했다. 디자인에는 영 재능이 없는 듯 하다. 별거 아니지만 typeScript 관련해서 재밌는 오류가 있어서 작성한다. &nbsp벨로퍼트님의 리액트 강의를 보면 다음과 같은 코드가 있다. &nbsp이를 타입스크립트에 적용하면, theme.palette[color] 부분에서 오류가 발생한다. 타입스크립트에서는 오브젝트 인덱싱을 위해 string literal type만을 허용하는데,string literal type은 string보다 좁은 의미의 타입으로 불변하는 read only string에만 시스템이 부여한다. 위 코드의 color는 매개변수로 언제든 변하는 sting이므로 default theme에 index signature 속성을 부여하면 된다. style.d.ts 💭 Ready 컴포

gomiseki

💬 RIOT API Hook, Module 만들기 &nbspIPC통신이 매끄럽게 해결된 이후로 폭주해서 본격적으로 API를 이용하기 위한 hook과 모듈들을 짜기 시작했다. 꽤 시간 잡아먹은 오류 중에 기억에 남는 건 >This expression is not callable. Not all constituents of type 'boolean | any[] | ((data: any) => void)' are callable. Type 'false' has no call signatures. 이런 것이었는데, 원인은 커스텀 훅의 리턴 배열 순서에 있었다. useRiotAPI(작성중) &nbsp마지막 부분의 리턴값이 원래 배열이었는데, 계속 수정하다보니 작성 순서대로 리턴하지 않게되었다. 그 경우 함수를 호출할 때 에러가 생긴다. 그래서 항목이 적을 때는 array, 많을 때는 object를 추천한다는 글을 봤다.

gomiseki

📚 Electron IPC > 갑자기 생각난건데 드디어 &nbsp를 외웠다. 나는 문단 처음이 띄워지지 않으면 굉장히 화가나던데 아무도 그런데서 불편함은 없나보다. 자동으로 첫 스페이스에 넣어줄 순 없는걸까..... &nbsp아무튼 이전에 나는 다른 프로세스들과 상호작용해야 하는 기능들()을 메인프로세스 코드(index.ts)에서 작성했다. 이전에 설정한 LCU코드에의해 픽창에서는 이벤트가 발생할 때 마다 정보가 찍힌다. > ** data 일부** &nbsp위에서는 지웠지만 우리 팀 정보에도 summonerId가 다 존재한다. 이제 이 정보들을 main프로세스에서 renderer프로세스(React component)로 옮겨서 riot API에 의해 전적이 불려오도록 가공해야한다. 따라서 main프로세스와 renderer프로세스의 통신(Inter Process Communication) IPC가 필요하다. &nbsp리액트는 렌더러 프로세스 위

gomiseki

📚 Layout 우선 레이아웃 처리부터 했다. 다음과 같은 코드로 롤 클라이언트에 프로그램을 붙이고, >overlayWindow.attachTo(mainWindow, 'League of Legends') html과 body 100%를 줘보니 롤 클라이언트는 1280x720로 되어있었다. 픽창에 맞춰 픽셀단위로 컨테이너를 설정하고 absolute포지션을 줬다. 픽에 방해가 되지않게 클라이언트 창의 남는 부분을 최대한 활용하고, 세부정보는 모달로 띄워서 보여주기로 계획했다. 📋 LCU Library &nbsp롤에서 쓰이는 API는 크게 두 갈래이다. 라이엇 디벨로퍼에서 자체 제공하는 게임데이터를 제공하는 Riot APi와, 롤 클라이언트에서 소켓 통신

gomiseki

☕ 배경 주저리 &nbsp난 초보 주제에 100라인 당 롤 세판을 주기적으로 해줘야 에너지가 공급되는 쓰레기 개발자다. 그정도로 롤에 진심이기에 라이엇 API를 사용한 프로그램 짜기는 내 오랜 염원이었달까... 일례로 OPGG 데스크톱 앱이 출시되기 전 클로즈 베타테스터 모집때도 '일렉트론으로 개발 될 것 같은데 만들어지는 과정이 궁금해서 뽑아주세요'라고 적었고, 당시 디스코드에서 여러 의견도 내어봤다. &nbsp그 중 하나 기억에 남는 것은 '오버레이로 픽창에서 전적검색이 용이하게 해주세요'라는 제안이었는데, '검토해보겠다'는 답변을 받았지만 이루어지지는 않았다. 별도의 창에서 전적검색을 일일이 확인하는 것은 다소 불편하다. 별개의 창에 시간을 뺏기면 상대 픽을 확인하고 룬 스펠을 고민할 시간이 그만큼 줄어들기 때문이다. 그래서 오버레이 형식의 전적 검색이 있었으면 했는데, 받아들여지지 않은 것은 일렉트론에서 오버레이에 대한 레퍼런스가 적고 기존 프로그램