Electron, Vue2 + Vuetify, TS, Node.js를 활용해 다시 만든 디시 글 검색기 #1 - 개발중

이전 글에서 파이썬으로 동기적 코드로 만든 디시 글 탐색기를 일렉트론이랑 Node.js로 다시 만든다고 했었는데 생각보다 빨리 개발을 완성하였습니다. 사실 디시 글을 비동기적으로 탐색하는 코드보다 Vue 2랑 일렉트론, 뷰티파이, 타입 스크립트 무려 4개의 기술 스택을 한꺼번에 프로젝트에 적용하느라 훨씬 고생이 많았습니다.

 

Babel 이나 ts-node나 각 기술 의존이 꼬이고 꼬여서 예전에 Vue2, 뷰티파이, 자바스크립트만 써서 웹 개발했을때랑 차원이 다르게 삽질을 많이 했습니다 ㅠㅠ

 

일단은 기능 자체는 잘 작동하며 Vuetify 를 사용해서 공대 감성도 전혀 없고 타이틀바도 Vuetify 에서 지원하는 앱바를 사용해서 구진 윈도우의 타이틀 바 대신 이쁜 앱 같은 디자인을 가지고 있습니다.

 

애초에 파이썬으로 만든 동기식 디시글 탐색기의 탐색 속도를 개선하려는게 본 프로젝트 목적이라 일단은 목적 자체는 달성했다고 볼 수 있습니다.. 검색 자체는 Promise.all([]) 을 통해 비동기 처리해서 최대 100회 제한을 걸고 작업을 수행하기 때문에 이론상으론 탐색은 100배 넘게 빨라졌습니다.

 

그리고 확인 결과 웹 파싱 라이브러리에 의존하는것도 큰 퍼포먼스 저하를 불러와서 웹 파싱 라이브러리는 전혀 사용하지 않고 한땀 한땀 정규식을 작성해서 파싱합니다. 

 

일단은 현재까지 일렉트론과 파이썬으로 만든 클라이언트 사이드의 디시글 검색기의 차이를 비교해봤을때 결과는 아래와 같습니다.

 

메모리 : 파이썬과 PyQT 라이브러리로 작성된 검색기의 경우 끽 해봤자 100MB 안밖으로 메모리 차지가 끝입니다. 물론 이것도 처음엔 많다고 생각했습니다.. 근데 일렉트론으로 만든것의 경우 국내야구 갤러리에서 약 700만개의 글 탐색을 수행 시키면 메모리가 무려 1GB까지도 차지하고, CPU 역시 20~30%를 점유하는 무시무시한 쓰레기 최적화를 자랑합니다.

 

사실 이건 어쩔 수 없는게 일렉트론이란게 애초에 크롬 웹 브라우저를 통째로 박은다음에 웹 사이트를 열고 이걸 데스크탑 프로그램~ 이야 속인거라서 사실상 크롬이랑 동일하게 메모리를 차지할 수 밖에 없습니다. 지금 구글 크롬 26개 열어놨는데 2GB 먹고 있는거 보이시죠?

 

그나마 다행인건 글 탐색 작업이 끝나면 무식하게 먹던 메모리가 GC에 의해 회수되서 일단은 300~400MB 안밖으로 돌아온다는 겁니다. 사실 사진에서 Visual Studio Code, Discord 모두 일렉트론으로 만든 프로그램입니다

다 메모리 차지를 한몫 하고 있죠 ㅋㅋㅋ;; 이건 크로미움 엔진이 최적화 되지 않는 이상 용량을 더 줄이는건 힘들어 보입니다. 일렉트론용으로 엔진을 좀 더 최적화 하면 몰라.. 크롬 엔진이 C++로 작성했다는데 확실히 컴퓨터 자원 소모량이 많습니다.

 

탐색 속도 : 이건 이견 없이 일렉트론으로 만든 버전의 승입니다. 사실 파이썬으로도 asyncio 라이브러리 등으로 비동기 코드를 작성해도 Node.js의 비동기 처리와 거의 동일한 퍼포먼스의 웹 탐색을 수행할 수 있습니다. 그러나.. UI로 옮기는 과정에서 PyQT엔 동기적 쓰레드 코드만 작성할 수 있었지 비동기 코드는 적용할 수 없었습니다 ㅠㅠ

 

Qasync라고 PyQT에 비동기 작업을 수행할 수 있도록 얹어주는 라이브러리가 있는데 빡센 비동기 작업을 돌리면 UI가 엄청 렉걸리더라구요.

 

사실 파이썬에서 비동기 코드를 GUI로 쉽게 옮길 수 있다면 메모리나 CPU나 어마어마하게 쳐먹는 일렉트론을 사용하지 않았겠죠.

 

UI 경험 : 여기서 UI 경험은 전체적은 프로그램 디자인이나, 작업을 돌렸을때 렉이 걸린다던가 하는 경험입니다. 아시다 싶이 크롬 브라우저를 쓰면서 렉이 걸린다던가 느리다던가 하는 경험을 느껴보신적 있나요? 컴퓨터 성능이 어느정도 받쳐준다면 사실 웹 탐색에서 불편함은 전혀 없었을 겁니다.

 

애초에 일렉트론도 크로미움 엔진(웹 브라우저) 을 데스크탑 앱인척 보여주고 있는거라서 크롬에서 웹 페이지 돌리는거랑 똑같습니다. CPU, 메모리 자원을 많이 쳐먹는 만큼 성능은 당연히 아주 아주 우수합니다. 그리고 Vuetify 를 사용해서 디자인 역시 훌륭하구요.

 

Promise.all로 아주 빡센 비동기 작업을 돌리는데도 UI 화면엔 렉 하나 없이 동작합니다.

Discord , VSCode 써보신 분들도 렉 느껴보셨나요? 거의 없습니다 ㅋㅋ 자원은 많이 먹지만 그만큼 훌륭한 엔진이라서요..

 

결론 : 속도는 취했고 컴퓨팅 자원은 줄줄센다.. 어쩔 수 없음..

저는 애초에 램을 32GB나 쓰고 있고 게임 돌리면 막 16GB씩 먹는 게임도 있어서 그냥 일단은 그러려니 합니다.

나중에 PyQT에서 공식으로 asyncio 코드를 사용할 수 있게 되면 그때쯤 사용해보려는데 일단은 일렉트론을 처음 사용해본 입장으로선 만족합니다.

 

근데 작업할 때 1GB까지 메모리를 쳐먹는건 좀 아닌거 같네요.. 만들어본 데스크탑 앱 (PyQT, C#, WPF, 비베 등등) 에서 정말 저 세상 자원 사용률인거 같습니다 ㅎ; 한때 pyinstaller로 파이썬 패키징 하면 느린 로딩속도나 용량이 많다고 불평했는데 일렉트론에 비하면 뭣도 아니였네요.

 

하지만 확실히 성능은 뛰어납니다. 크로미움 엔진이 워낙 뛰어나서..

 

일단은 일렉트론은 본질적으로 웹브라우저다 보니깐 크로스 플랫폼 지원은 꽁짜로 따라왔는데 메모리나 cpu 점유율만 어떻게 하면 아마 데스크탑 앱 개발의 미래가 되지 않을까요? 나중에 스마트폰에서 돌아가는 node.js 환경도 나와서 완벽한 크로스 플랫폼 프레임워크가 되기를 기원해봅니다.