☕ 배경 주저리
난 초보 주제에 100라인 당 롤 세판을 주기적으로 해줘야 에너지가 공급되는 쓰레기 개발자다. 그정도로 롤에 진심이기에 라이엇 API를 사용한 프로그램 짜기는 내 오랜 염원이었달까... 일례로 OPGG 데스크톱 앱이 출시되기 전 클로즈 베타테스터 모집때도 '일렉트론으로 개발 될 것 같은데 만들어지는 과정이 궁금해서 뽑아주세요'라고 적었고, 당시 디스코드에서 여러 의견도 내어봤다.
그 중 하나 기억에 남는 것은 '오버레이로 픽창에서 전적검색이 용이하게 해주세요'라는 제안이었는데, '검토해보겠다'는 답변을 받았지만 이루어지지는 않았다. 별도의 창에서 전적검색을 일일이 확인하는 것은 다소 불편하다. 별개의 창에 시간을 뺏기면 상대 픽을 확인하고 룬 스펠을 고민할 시간이 그만큼 줄어들기 때문이다. 그래서 오버레이 형식의 전적 검색이 있었으면 했는데, 받아들여지지 않은 것은 일렉트론에서 오버레이에 대한 레퍼런스가 적고 기존 프로그램과 호환성이 원활하지 않았던게 이유가 아닐까 생각한다. (인게임 오버레이는 구현을 했던데, 그냥 픽창에서의 오버레이는 유용하지 않다 생각한 것도 같다.)
그래도 창 최소화해달라는 요청은 받아들여져서 뿌듯했던게 기억난다.
🧭 프로그램 개요
따라서 이번에는 일렉트론으로 오버레이 형식의 라이엇LCU(클라이언트 API)와 일반 라이엇API를 사용한 전적 검색기를 한번 제작해보려 한다. 처음으로 타입스크립트도 적용해보려 한다. 전적 검색 후 알고리즘을 적용해 닷지 추천까지 할 수 있도록 하는 것이 목표다.
🚀 프로젝트 빌딩
일렉트론 관련한 글들을 보면 electron forge를 통해서 템플릿 구성을 하는 사람은 많지 않은 것 같다... 난 편해서 좋던데...ㅠㅠ 이번에도 electron-forge문서에 있는 React with Typesctipt템플릿 가이드를 따라 작성해 주었다.
Electron + React with Typescript
⏳ 시작부터 골치아팠던 오버레이 윈도우
특정 프로그램에 오버레이를 붙이는 일은 생각보다 네이티브 윈도우 앱에 대한 지식이 필요한 것으로 보였다. 일렉트론은 웹 개발자'도' 간단하게 데스크톱 앱을 구성할 수 있게 하는데 그 의의가 있으니 적합해 보인다고 보기는 어렵지않을까 싶다. 그럼에도 c로 작성한 프로그램을 노드 모듈로 만든 오버레이 라이브러리가 npm에는 한개 있었다.
electron-overlay-window라는 건데, 한번 데모를 보고 따라해 봤다.
index.ts
import { app, BrowserWindow } from 'electron';
import { overlayWindow } from 'electron-overlay-window';
// This allows TypeScript to pick up the magic constant that's auto-generated by Forge's Webpack
// plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
// whether you're running in development or production).
declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
app.disableHardwareAcceleration();
// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) {
// eslint-disable-line global-require
app.quit();
}
const createWindow = (): void => {
// Create the browser window.
const mainWindow = new BrowserWindow({
height: 600,
width: 800,
webPreferences: {
nodeIntegration: true
},
...overlayWindow.WINDOW_OPTS
});
// and load the index.html of the app.
mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
// Open the DevTools.
mainWindow.webContents.openDevTools({ mode: 'detach', activate: false });
overlayWindow.attachTo(mainWindow, '제목 없음 - 그림판')
};dev모드 실행 시 다음과 같은 메시지와 함께 오류를 뱉었다. 웹팩에서 네이티브 모듈을 사용하려면 특별한 설정이 필요해 보였다.
해결하는데 하루 종일 걸렸는데, webpack 설정에 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',
externals: {
"electron-overlay-window": 'electron-overlay-window'
},
// Put your normal webpack config below here
module: {
rules: require('./webpack.rules'),
},
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
},
};
그림판에 attach
완벽하게 이해하고 추가한 코드가 아닌게 좀 걸린다. 리액트 내부에서 쓰는 노드모듈은 알아서 처리해주는데 일렉트론에서 모듈을 사용하는데는 별도의 외부모듈 처리가 필요한게 아닐까 추측해본다....ㅠ
