10000개 단위로 검색하는 디시의 불편한 검색 시스템을 개선하여
100배 이상의 속도로 한꺼번에 검색을 할 수 있는 프로그램입니다.
- 기존 파이썬으로 구현된 동기적 디시 글 검색기를 타입스크립트를 활용한 비동기 병렬 처리로 개선한 버전입니다.
- 데스크탑 앱 제작을 위해
Electron
프레임 워크를 백엔드로 사용합니다. - 화면 렌더링을 위해 클라이언트로
Vue
와Vuetify
프레임워크를 사용합니다. - 기존 파이썬 프로젝트와 다르게 페이지 단위가 아닌 전체 10000개 단위에서 모든 글을 추출하는 형태로 동작합니다.
- 예를 들어서 갤러리 글이 100만개인 경우 반복 횟수를 100으로 설정하면
100 * 10000
개 만큼 병렬 처리가 돌아가 모든 갤러리 글의 검색 결과를 가져올 수 있습니다. - 기존 파이썬 프로젝트보다
100
배 넘게 빨라졌습니다.
- 서버 상태에 따라 검색이 안될 수 있습니다.
- 검색량이 너무 많으면 메모리 부족으로 프로그램이 강제 종료될 수 있습니다.
- 해당 프로그램은 테스트 버전이며 잠재적인 버그가 많을 수 있습니다.
- 디시 서버 상태, 검색어에 따라 응답 속도가 매우 차이날 수 있습니다.
- 디시 서버 자체가 느려서 검색 속도를 극적으로 개선하기가 어렵습니다.
- 인기가 적은 검색어면 검색이 빨리 끝나고, 인기가 많은 검색어면 검색이 느리게 끝납니다.
- 현재는 인기가 많은 키워드로 국내야구 갤러리의 700만개의 글을 모두 검색하는데 평균적으로 40초 정도의 성능을 보입니다.
- 메모리 누수가 발생할 수 있습니다.
- Electron은 크로미움 엔진 (크롬 브라우저) 을 사용하기 때문에 메모리, CPU 사용량이 매우 많습니다.
- 크롬 브라우저가 컴퓨터 자원을 많이 먹는걸 생각해보면 됩니다.
node version == v22.15.0
npm i
git clone
을 통해 해당 프로젝트 복사 이후 필요한 패키지를 모두 설치합니다.
npm i --save --legacy-peer-deps
npm i
로 패키지 설치가 제대로 되지 않으면 위 명령어를 입력합니다.
npm run electron:serve
이후 실행을 원하면 위 명령어를 통해 Electron
과, Vue
를 구동해줍니다.
기본적으로 Electron 서버(background.js) 와 Vue 화면(App.vue)은 모두 핫 리로딩이 적용되어 있습니다.
Vue 화면에서 파일을 저장해 핫 리로딩을 걸었는데 소스 코드 반영이 안되는 경우 background.js 에서 저장을 해서
Electron 서버를 전체 재시작하면 보통 제대로 소스코드 수정이 반영됩니다.
npm run electron:build
exe 빌드를 원하면 위 명령어를 입력합니다.
결과물은 dist_electron
폴더에 저장됩니다.
현재 node.js v22
, vue3
, vite
로 마이그레이션을 계획중이나 기존에 사용하던 vuetify 2
, ag-grid-vue2
를 vuetify 3
및 ag-grid-vue3
로 마이그레이션 하는 과정에서 vuetify
의 css가 테이블 라이브러리의 css와 충돌하는 문제가 발생해서 마이그레이션 진행이 늦어지고 있습니다. 따라서 완전히 새로운 UI Framework 나 순수한 CSS로 마이그레이션을 진행 계획중이나 도구 사용 결정에 어려움을 겪고 있습니다.
최근 업데이트로 node.js
와 electron
정도만 버전 업그레이드했고 이외의 프레임워크는 버전 유지중 입니다.