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

[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] 11.타이틀바 추가(feat. Modal window 재사용 이슈) - 레시피 일렉트론 앱

[Electron] 11.타이틀바 추가(feat. Modal window 재사용 이슈) - 레시피 일렉트론 앱

개요 일렉트론의 기본 타이틀바를 제거하고, 최대화(Maximize), 최소화(minimize), 닫기(close) 기능만 있는 타이틀바를 새로 추가한다. Modal Window 재사용 이슈 모달 창에 데이터 표시는 잘되지만, 모달 창을 닫은 후 다시 열려고 하면 에러가 발생한다. Error decompressing a compressed file: TypeError: Object has been destroyed at viewRcpDetail (D:\\vscode workspace\\recipe.electron\\.webpack\\main\\index.js:13610:39) at D:\\vscode workspace\\recipe.electron\\.webpack\\main\\index.js:13411:..

  • format_list_bulleted 토이 프로젝트/레시피 일렉트론 앱 (완)
  • · 2024. 2. 4.
  • textsms
[Electron] 10.검색 기능 구현(4): 상세보기 기능(Decompress to modal window) - 레시피 일렉트론 앱

[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) - 레시피 일렉트론 앱

[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) - 레시피 일렉트론 앱

[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