너 쌩배지(리그오브레전드 닷지 경보기) 작성일지 - 4

💬 RIOT API Hook, Module 만들기

 IPC통신이 매끄럽게 해결된 이후로 폭주해서 본격적으로 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(작성중)

import{useState, useRef} from "react";
import riotAPI from "../apis/riotAPI";
import { PickAPI_type, Team } from "../types/champSelect.type";
import { userInfo_type } from './../types/userInfo.type';

export default function useRiotAPI(initialState?:JSON){

    const callAPI = useRef<riotAPI>(null);

    const [pickStatus, setPickStatus] = useState([]);
    const [isSelect, setIsSelect] = useState(false);

    const setUserInfo = (data:userInfo_type) =>{
        callAPI.current = new riotAPI(data);
    }

    const pickToData = (data:PickAPI_type) =>{
        let pickArray: Pick<Team,'cellId'|'championId'>[] = [];
        if(data.myTeam.length==0){
            pickArray = [];
            setIsSelect(false);
        }
        else{
            data.myTeam.forEach((player)=>{
                pickArray.push(player);
            })
        }
        console.log(pickArray)
        setPickStatus(pickArray);
    }

    const setSelectLive = async() =>{
        setIsSelect(true)
    }

    return {isSelect, setSelectLive, setUserInfo, pickStatus, pickToData}
}

 마지막 부분의 리턴값이 원래 배열이었는데, 계속 수정하다보니 작성 순서대로 리턴하지 않게되었다. 그 경우 함수를 호출할 때 에러가 생긴다. 그래서 항목이 적을 때는 array, 많을 때는 object를 추천한다는 글을 봤다.

---

👀 Electron axios

 본격적으로 Riot API를 사용하기에 앞서 여러가지 오류를 만났다. 노드 모듈인 axios는 일렉트론 renderer위의 리액트 컴포넌트에서 사용할 수가 없다. 사용하려면 nodeIntegration이 필요한 것 같은데, nodeIntegration이 금지사항이니 못쓰는 것과 다름없는 것 같다. 리액트 컴포넌트에서 별 짓을 다해봤는데, 메인프로세스에서는 CSP설정만 해주면 별도의 프록시서버나 CORS에러도 없이(브라우저 취급을 받지 않나보다)잘 작동하니 메인프로세스에서 API요청 후 IPC 메시지를 교환하자.

CSP설정 (devContentSecurityPolicy에 RIOT API 도메인 추가)

"plugins": [
        [
          "@electron-forge/plugin-webpack",
          {
            "devContentSecurityPolicy":"script-src 'self' https://kr.api.riotgames.com 'unsafe-eval'",
            "mainConfig": "./webpack.main.config.js",
            "renderer": {
              "config": "./webpack.renderer.config.js",
              "entryPoints": [
                {
                  "html": "./src/index.html",
                  "js": "./src/renderer.ts",
                  "name": "main_window",
                  "preload": {
                    "js": "./src/preload.ts"
                  }
                }
              ]
            }
          }
        ]
      ]

---

👊 LCU APi - 우리팀 닉네임 추출하기

 아무리 봐도 없는 것 같다. LCU 클라이언트 API에서 전적검색을 위해 유저ID나 닉네임을 추출하려 했으나 픽창에서 얻을 수 있는 정보는 생각보다 한정적이었다. 닉네임 뻔히 눈으로 보여주면서 왜 API에서는 뺀건지 이해가 잘 안된다. 그런데 잘 생각해보니 opgg desktop앱은 픽창에서 멀티서치 자동으로 불러오는데.... 어떻게 한거지? 하다가 이 '멀티서치'라는 단어에 눈이 갔다. fow도, opgg도 아마 멀티서치를 원래 채팅창의 입장내역을 수동으로 복붙하는 방식으로 제공했었다는 사실이 불현듯 떠올랐다. 그래서 LCU에서 채팅내역을 불러와 멀티서치를 하는데 아닐까.... 추측해보았다.

 역시 정답은 채팅창에 있었다. 픽창에 진입했을 때 받은 채팅창 ID로 아래의 엔드포인트를 요청하여 채팅방 참가자들의 정보를 추출할 수 있었다.

export const LCU_ENDPOINT_PARTICIPANTS = (id:string)=>{
   return `/lol-chat/v1/conversations/${id}/participants`
}

 이제 모든 백엔드 API설정이 끝났다. 프로그램 시작 시 롤 클라이언트 프로그램의 동작 여부에 따라 프로그램이 attach되고, 픽창을 인식하여 처음엔 참가자 정보를, 챔피언 픽 이벤트가 발생할 때마다 픽 정보를 리액트앱에 IPC통신을 통해 전송한다.

 이제 본격적으로 리액트에서 이 데이터들을 시각화 해봐야지.