Electron, Vue, Typescript으로 개발을 도전 해보려 합니다

예전에 파이썬으로 작성한 디시인사이드 글 검색기가 있습니다. 아직도 잘 작동하고 디시에서 글 검색할때마다 실제로 유용하게 사용하고 있는 상태입니다. 문제는 디시인사이드 서버가 느린데, 비동기 형태의 코드가 아니라 동기 멀티 쓰레딩 방식이라 검색이 좀 많이 느립니다.

 

실제로 디시에서 야구갤러리를 기준으로 모든글을 검색하려면 요청을 약 1000번 정도 보내야 하는데 비동기, 멀티쓰레딩, 멀티 프로세싱 등 여러가지 방법을 사용해본 결과 asyncio 모듈을 사용한 비동기 요청이 가장 빨랐으며 모든 페이지 탐색 및 글 내용 정제에 40초 정도 소요됩니다. 

 

디시 서버가 네이버 같은 사이트 보다 한 3~4배 정도 느려서 이 이상 속도를 개선하기가 어렵더라구요.

일단은 asyncio 로 작성한 비동기 단일 쓰레딩 코드를 (엄밀히 따지면 멀티 쓰레딩으로 작성한 것이지만 이벤트 루프는 단일 쓰레드? 라고 들었던 거 같습니다. Javascript의 경우엔 확실한데 파이썬의 경우엔 정확히 모르겠습니다.) PyQT 프레임 워크에 옮겨서 적용해보려고 했는데

 

PyQT 프레임 워크에서는 멀티 쓰레드 밖에 지원을 안하고 (QThread라는 객체가 있음) 그 멀티 쓰레드 마저 대부분의 언어가 지원하는 쓰레드 종료를 기다리는 join() 메서드도 없고.. 여러가지로 마음에 들지가 않습니다.

 

qasync라는 외부 라이브러리를 사용하면 PyQT나 PySide에 이벤트 루프를 추가하여 비동기 코드를 사용할 수 있게는 하는데 이게 무거운 비동기 작업을 돌리면 파이썬 GIL? 때문인지 asyncio 이벤트 루프 작업이 진행되는 동안 너무 심각하게 UI 렉이 걸려서 QThread로 작성한 멀티 쓰레딩 코드에 비해 성능이 너무 떨어지더라구요.

 

결국 파이썬에서 비동기로 작성한 코드를 GUI 화 시키는건 아무래도 어려운 거 같아서 포기하고 멀티 쓰레딩 없이 단일 쓰레딩과 이벤트 루프를 활용하여 비동기 처리를 대표적으로 사용하는 Javascript로 코드를 다시 작성하였습니다.

정확히는 JS는 아니고 TS입니다. Typescript 로 작성하니 파이썬하고 퍼포먼스는 비슷한데 뭔가 더 빠르고 편안한(?) 느낌이 들더라구요.

 

사실 타입스크립트를 많이 안써봐서 Promise.all 을 쓸 때 속도 제한을 안걸고 보내서 진짜 디시에서 IP차단 개많이 먹었습니다

 

이제 이전에 Vue로 경험했던 경험을 살려서 Vue와 Typescript로 웹 페이지를 구성하고, 이 웹페이지를 통째로 포장해서 데스크탑 실행 프로그램으로 만들어주는 Electron 프레임 워크를 사용하여 기존 디시 편집기의 성능을 극적으로 개선해보려고 합니다.

 

사실 Electron 으로 VSCode나 Discord 같은 웹앱을 데스크탑 버전으로 출시했다고만 들었지 실제로 사용해본 적은 없어서 두근 두근 하네요. 용량은.. Electron 원리가 크롬 브라우저를 통째로 프로그램에 박고 렌더링 하는거라 무겁다보니 파이썬보다 전체적인 사용자 경험은 떨어질 수 도 있을 거 같습니다.

 

그럼에도 사실 C#의 WPF 같이 배우기 어려운 프레임워크는 아닌 거 같고 그냥 웹 개발만 할 줄 알고 Node.js 정도만 다룰줄 알면 사용이 되는 거 같아서 도전해보려고 합니다.

 

일렉트론으로 만든 프로그램을 사실 그렇게 많이 보진 않았는데 (맨날 VSCode 보고있긴 하지만) 제 컴퓨터 성능이 떨어지지 않아서 그런가 다들 속도나 사용감 면에서 그렇게 나쁘지 않았긴 합니다. 이전 개발에 사용했던 Vuetify 프레임워크를 사용하면 아주 이쁜 데스크탑 프로그램을 웹으로 만들 수 있지 않을 까 싶습니다.

 

근데 Electron 이란거 자체가 진짜 신기하긴 합니다.. VSCode는 C나 C++로 작성되었을 줄 알았더니 사실은 웹이였다니;; Visual Studio는 왜 VSCode보다 그렇게 느려터진거지..?