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

📚 Layout

우선 레이아웃 처리부터 했다.
다음과 같은 코드로 롤 클라이언트에 프로그램을 붙이고,

overlayWindow.attachTo(mainWindow, 'League of Legends')

html과 body 100%를 줘보니 롤 클라이언트는 1280x720로 되어있었다. 픽창에 맞춰 픽셀단위로 컨테이너를 설정하고 absolute포지션을 줬다. 픽에 방해가 되지않게 클라이언트 창의 남는 부분을 최대한 활용하고, 세부정보는 모달로 띄워서 보여주기로 계획했다.

---

📋 LCU Library

 롤에서 쓰이는 API는 크게 두 갈래이다. 라이엇 디벨로퍼에서 자체 제공하는 게임데이터를 제공하는 Riot APi와, 롤 클라이언트에서 소켓 통신으로 클라이언트 상태를 불러올 수 있는 LCU API가 있다. 우선 LCU API연결을 통해 클라이언트가 픽창에 진입했는지 여부를 알아내야 한다. LCU소켓 프로그램을 직접 구현하기는 상당히 까다롭고 npm에 꽤 많은 LCU커넥터 모듈이 올라와있다. 그 중 최근에 릴리즈 되었으며 생김새도 꽤나 모던한 커넥터 모듈을 찾았는데

league-connect 라는 모듈이다.

이런 외부 프로세스와 소통하는 모듈들은 이전의 overlay모듈도 그렇고, main 프로세스에서 사용해야만 에러가 발생하지 않는다. main프로세스에서 LCU관련 이벤트 발생 시 IPC통신을 통해 렌더러 부분으로 넘겨주는 방식으로 진행하면 된다.

npm i league-connect

npm 설치 후 externals에 등록

webpack.main.config.js

module.exports = {
  /**
   * This is the main entry point for your application, it's the first file
   * that runs in the main process.
   */
  entry: './src/index.ts',
  // Put your normal webpack config below here
  externals:{
    "electron-overlay-window":"electron-overlay-window",
    "league-connect":"league-connect"
  },
  module: {
    rules: require('./webpack.rules'),
  },
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
    }
}

일단 롤 클라이언트가 미실행 중일때는 작은 창을 띄우고 클라이언트 실행시 자동으로 attach하며 소켓연결을 정의, 픽창에서 유저정보를 subscribe하는 코드를 완성했다. 다음에는 IPC통신과 Riot API를 통해 유저 정보를 불러오는 코드를 작성할 것이다.