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

Gomi·2022년 10월 17일
0
post-thumbnail

리팩토링 시작


🤔 Electron이거 어떻게 돌아가는거지?


 Electron 공식문서를 보면 근본적인 동작과정을 파악할 수 있다.
기본적으로 electron 설치 후, package.json에 main으로 동작할 스크립트를 지정해주고, electron 스크립트를 실행하는 것이 전부라고 할 수 있다.

"main": "main.ts",
"scripts": {
  "start": "electron .",
}

이런 식으로 작성하고 main.ts에 콘솔 스크립트 입력 후 npm start를 해보면 콘솔이 찍히는 것을 확인할 수 있다. React나 Vue 같은 프레임워크를 얹을 때에는 main 스크립트에 BrowserWindow API를 이용해 빌드된 웹뷰를 띄워준다는 개념이 정리되어있다면, 프론트엔드 스택에 구애받지않고 electron앱을 구성할 수 있을 것이다.

이전에 Electron forge + react + ts + webpack으로 구성되어있던 프로젝트를
쌩 Electron + vite + react +ts로 바꾸려고 한다.
이 과정에서 hot reload나 빌드 엔트리 포인트 등을 새로 직접 설정해줘야 한다.


👓 미친...너무 어려운데?


electron-forge는 웹팩 기반의 electron 빌딩 툴이다. 웹팩이라는 점이 좀 싫지만 hot reload나 multiple entry build 등의 기본 설정이 너무나 잘 되어있다. 이를 직접 구현하는건 지금 내 능력 밖인데...?
그래도 조금만 공부를 해보자.

electron forge에서는 npm start 실행 시 다음과 같이 main process script와 renderer process script가 동시에 빌드되면서 빌드된 엔트리 기반으로 dev서버가 동작한다.

vite로 이러한 multiple entry build를 구현해보려 하는데....
마침 좋은 레퍼런스를 발견했다.
vite + electron 템플릿인데 multiple entry point가 세팅되어있다. 이를 기반으로 나만의 템플릿을 하나 만들어 보기로 한다.


🎐 코드 이식 완료


  코드 이식을 모두 완료했다. 코드를 좀 더 분할했고, 쓸데없는 부분들을 쳐냈다. 디자인은 생각보다 고칠점이 많지 않았고, 클라이언트에 직접 오버레이 되는 부분의 디자인이 많이 개선되었다. 다만 이전에 만든 코드들에 애정을 갖고 시동을 걸기까지의 시간이 꽤나 많이 걸렸다.

하지만......

 프로그램을 만드는 중에 프로그램이 사형선고를 받아버리는데.... 일단 다 만들긴 했지만 곧 사망할 코드를 써가는 건 너무 가슴아픈 일이었다. 일반 유저로서도 맘에드는 조치는 아니다. 전적 검색 후 픽창에서부터 전략을 구상하는 것 또한 롤의 일부로 여겨왔기 때문이다. 유저들 반응은 생각보다 반반으로 갈리는 것 같다. 개발자 입장에서는 관련 써드파티 앱들이 전부 사형선고를 받는 결정을 저렇게 급작스럽게 내놓는 라이엇의 독선적인 일처리가 제일 불만이다.

 라이엇이 게임성 하나로 배짱장사하는 모습이 낯설지는 않다. 아마 저 계획도 수정될 가능성은 몹시 낮을 것이다. 일단 바꿔버리면 유저들은 적응할테니... 하지만 내가 즐겨온 컨텐츠 하나와, 그걸 위해 만든 프로그램이 사라지는 경험이 유쾌하지는 않은 것 같다.

마지막으로 electron-builder와 할수있으면 updater세팅을 해서(유지보수는 없을 것 같지만....) 파일까지 공유해보며 프로젝트를 끝내보려 한다.

profile
터키어 배운 롤 덕후

0개의 댓글