너 쌩배지(리그오브레전드 닷지 경보기) 작성일지 - 9 [完..인데 써보실분?ㅋㅋ]

⚙ 자잘한 버그들

  RIOT API나 LCU에는 자잘한 버그들이 있다. 예를들면 솔랭 데이터를 가져오는데 있어 챔피언의 공식 이름이 다른 경우 (Fiddlesticks -> FiddleSticks), LCU에서 추출한 participant에는 gameName과 name이 둘 다 있는데 이게 같을 때도 다를 때도 있었고, 전 시즌 티어에 대한 데이터는 줬다가 안줬다가 property가 오락가락한다(이게 사실상 매우 치명적이었다). 그리고 API에러도 상당히 빈번하게 발생한다.

  API상태가 정상이라면 이런 에러가 발생했을 때 같은 요청을 계속 수행할 수 있도록 이전에 짜놓은 코드를 응용해 api call메소드를 다시 만들었다. 우리가 잘 아는 페이지들에서 유사한 방식을 쓰지 않을까(?) 생각해 본다.

  static async callAPI(endpoint:string, data:string, orAnd:string, asia = false)
  :Promise<AxiosResponse<any, any>> {
    const URL = encodeURI(
    `${asia ? RIOT_API_URL_ASIA : RIOT_API_URL}${endpoint}${data}${orAnd}api_key=${}`);
    return new Promise((resolve, reject) => {
      axios.get(URL)
        .then((result) => {
          resolve(result);
        })
        .catch(() => {
          this.callAPI(endpoint, data, orAnd, asia).then(resolve).catch(reject);
        });
    });
  }

  또한 프로젝트 시작할 때는 몰랐던 Promise.all을 API Call에 적용했고 멀티서치 시 엄청난 속도 향상을 맛봤다.... 또한 undefined state에 대응하는게 매우 까다로웠다. 에러가 날 때 마다 조건을 추가하면서 디버깅했는데.... 이에 대한 좋은 방법론을 더 익혀야 한다.

  Electron에서도 문제가 있었는데, 하나의 창을 띄우고 창의 컨텐츠를 채우는 메소드는 다음과 같다.

• loadFile
• loadURL

loadFile 메소드는 리액트 빌드 후 file 프로토콜을 통해 index.html을 불러올 때 쓰이고, loadURL은 http 프로토콜로 dev서버를 불러오거나 할 때 쓰인다.....

라고 생각했는데, Electron 공식문서에서는 loadFile 메소드의 사용을 추천하지 않고있었다.
file 프로토콜은 Node의 url모듈 + loadURL의 조합을 권장하는 듯 했다.

따라서 프로젝트에서는 다음과 같은 코드가 만들어졌다.

readyWindow.loadURL(url.format({
    protocol: app.isPackaged ? 'file:' : 'http:',
    slashes: true,
    pathname: `${rendererEntry}`,
    hash,
  }));

여기서도 자잘한 버그(?) 가 있었는데, url.format에는 쿼리스트링을 객체로 넣어줄 수 있다.

ex) query: { index: id }

원인을 알 수는 없었지만, 아래 처럼 hash값에 쿼리스트링을 같이 써넣음으로써 해결했다.

hash: `/info?index=${id}`

---

✨ Electron builder

  builder를 설정하는 것은 넷상에 템플릿들이 꽤 있기 때문에 그리 어렵지는 않았다. 다만 이 프로젝트는 유저가 커스텀한 알고리즘을 json파일로 관리한다. web API를 활용할 수도 있겠지만, 반영구적인 느낌이 있어 파일시스템을 선택했다. 빌드 시 과제는 dist에 묶이는 자원 중 algorithms 폴더만 빼내와 리소스로 활용하는 것이다.

  그 해결책으로 electron-builder 스크립트에서 extraResources 속성을 활용하였다. 이 속성은 프로그램 설치 후 resource 폴더에 별도로 리소스들을 빼준다. fs모듈을 일렉트론에 사용하기 위해서는 반드시 필요한 테크닉으로 보인다.

  프로그램의 수명이 몇 달 남지 않았을 것으로 예상된다. updater도 간단히 달 수 있는데 생략하고 beta 버전을 드디어 릴리즈 해보았다.

---

후기

 혼자서 익히고싶은 기술들을 익히고, 오래 전 부터 염원하던 프로그램의 완성을 경험하는 일은 분명 성장이라는 측면에선 효율적이지는 못하다는 것을 뼈저리게 느낀다.

 그러나 사람은 생계가 걸린 상황에도 분명 시동이 켜졌다 꺼졌다 할 때가 있다. 재미를 좇아 코드를 짜던 이 때의 경험이 나중에 꼭 도움이 되었으면 좋겠다.

 혹시나 있을지는 모르겠지만 완성물이 궁금하신 분은 아래 링크에서 exe를 받아 실행시켜보시면 됩니다!
프로덕션 키가 아니기 때문에 쓰는사람이 많을리는 없지만 몇 명이 동시에 쓰면 느려질 수 있습니다.

릴리즈 링크