[Electron] 13.멀티스레딩 구현 with worker(2) - 레시피 일렉트론 앱

개요Worker thread가 되어줄 script를 작성한다.Worker를 생성하고 통신해줄 Class를 작성하고, 각종 리스너를 설정한다.Worker에 맞춰서 IPC및 DB 쿼리문 호출 로직을 수정한다.Worker를 통한 검색 로직기존에는 Renderer 단에서 검색을 요청할 시, Main에서 바로 Sqlite DB의 쿼리문을 호출 해 결과를 보냈다. Worker를 추가하게 되면 Main에서 DB 대신 Worker로 검색 결과를 요청하게 된다.Worker는 RcpIPC 인스턴스가 Main에서 생성될 때 함께 생성되고 대기 중에 있다.Worker는 RcpSqliteDB 인스턴스를 생성한다.Renderer 단에서 검색 요청 시, Main은 요청을 바로 Worker thread로 전달한다.Worker는 생성..

• format_list_bulleted 토이 프로젝트/레시피 일렉트론 앱 (완)
• · 2024. 2. 12.
• textsms

[Electron] 12.멀티스레딩 구현 with worker(1) - 레시피 일렉트론 앱

개요 웹 워커(Worker)로 멀티스레딩(Multithreading)을 구현할 준비를 한다. 웹 워커는 워커 스레드(Worker thread)를 따로 만들어 메인 프로세스와 별도로 검색을 처리할 예정이다. Electron의 멀티스레딩 현재까지 구현한 것만으로도 레시피 검색 속도 및 성능은 나쁘지 않았다. 하지만 이는 레시피의 수, DB 사이즈가 작기 때문에 큰 문제를 일으키지 않는다고 볼 수 있다. 더 많은 수의 레코드 및 데이터를 다루게 된다면 단일로 돌아가는 Electron의 main process는 부하를 견디지 못할 수 있다. main에서 Sqlite DB 검색 결과를 처리할 때 까지 일렉트론 앱은 다른 작업 수행(창 위치 옮기기, 최소화, 최대화 등)을 하려 하면 ‘응답없음’ 현상을 보일 것이 ..

• format_list_bulleted 토이 프로젝트/레시피 일렉트론 앱 (완)
• · 2024. 2. 11.
• textsms

[Electron] 10.검색 기능 구현(4): 상세보기 기능(Decompress to modal window) - 레시피 일렉트론 앱

개요 레시피 상세보기 기능과 이를 표시할 모달 창(Modal Window)을 구현한다. DB 내에 저장된 레시피 압축 파일 Buffer를 임시 파일로 작성하고, 해당 파일을 압축 해제하여 모달 창에 이미지와 텍스트 파일을 표시한다. 검색 기능 및 결과 화면 정의 검색어를 입력하고, 컬럼을 선택해 제출하면 검색 결과 목록을 표시한다. 레시피는 한 페이지에 10개 표시하며, 페이지 버튼 또한 10개씩 표시하고 하단 부에 위치시킨다. 검색 결과 목록의 각 레시피는 이미지, title, ingredients, 다운로드 버튼, 상세 보기 버튼을 포함한다. (id, instrunctions 제외) ingredients 컬럼 값의 개수(배열 크기)가 3개 이상일 때는 값 목록을 접고 펼치도록 한다. (추가) 검색 결..

• format_list_bulleted 토이 프로젝트/레시피 일렉트론 앱 (완)
• · 2024. 2. 3.
• textsms

[Electron] 9.검색 기능 구현(3): 다운로드 기능(Download buffer) - 레시피 일렉트론 앱

검색 기능 및 결과 화면 정의 검색어를 입력하고, 컬럼을 선택해 제출하면 검색 결과 목록을 표시한다. 레시피는 한 페이지에 10개 표시하며, 페이지 버튼 또한 10개씩 표시하고 하단 부에 위치시킨다. 검색 결과 목록의 각 레시피는 이미지, title, ingredients, 다운로드 버튼, 상세 보기 버튼을 포함한다. (id, instrunctions 제외) ingredients 컬럼 값의 개수(배열 크기)가 3개 이상일 때는 값 목록을 접고 펼치도록 한다. (추가) 이번엔 recipe_zip_file 컬럼에 있는 압축 파일 데이터를 다운로드 하는 기능을 구현하겠다. 단, 이전에 했던 이미지 작업과는 달리 Buffer를 변환할 필요는 없다. 윈도우의 Save as - 다른 이름으로 저장 기능을 활용하여 ..

• format_list_bulleted 토이 프로젝트/레시피 일렉트론 앱 (완)
• · 2024. 2. 2.
• textsms

[Electron] 8.검색 기능 구현(2): 이미지 설정(Buffer to Data URL) - 레시피 일렉트론 앱

검색 기능 및 결과 화면 정의 검색어를 입력하고, 컬럼을 선택해 제출하면 검색 결과 목록을 표시한다. 레시피는 한 페이지에 10개 표시하며, 페이지 버튼 또한 10개씩 표시하고 하단 부에 위치시킨다. 검색 결과 목록의 각 레시피는 이미지, title, ingredients, 다운로드 버튼, 상세 보기 버튼을 포함한다. (id, instrunctions 제외) ingredients 컬럼 값의 개수(배열 크기)가 3개 이상일 때는 값 목록을 접고 펼치도록 한다. (추가) 이전 게시물에서 작성했던 검색 기능 및 결과 화면 정의에서 3번까지 구현했지만, 모두 기능이 빠져있는 빈 이미지와 버튼들이었다. 이미지 src는 없고, 버튼은 작동하지 않는다. 가장 먼저 img 태그의 src 속성을 채워서 이미지를 표시해보..

• format_list_bulleted 토이 프로젝트/레시피 일렉트론 앱 (완)
• · 2024. 2. 1.
• textsms

[Electron] 7.검색 기능 구현(1): 검색 결과 및 페이징 - 레시피 일렉트론 앱

검색 기능 및 결과 화면 정의 기능 구현을 위한 IPC 통신 방식을 설계했으니, 본격적인 구현을 시작해야 한다. 우선 레시리 검색 결과를 표시하는 검색 기능과 그 결과 목록 화면에 대한 것을 정의했다. 검색어를 입력하고, 컬럼을 선택해 제출하면 검색 결과 목록을 표시한다. 레시피는 한 페이지에 10개 표시하며, 페이지 버튼 또한 10개씩 표시하고 하단 부에 위치시킨다. 검색 결과 목록의 각 레시피는 이미지, title, ingredients, 다운로드 버튼, 상세 보기 버튼을 포함한다. (id, instrunctions 제외) ingredients 컬럼 값의 개수(배열 크기)가 3개 이상일 때는 값 목록을 접고 펼치도록 한다. (추가) 현 단계에서는 3번까지 개발하고, 4번 항목은 마크업, CSS 등이 ..

• format_list_bulleted 토이 프로젝트/레시피 일렉트론 앱 (완)
• · 2024. 1. 28.
• textsms