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

개요 레시피 상세보기 기능과 이를 표시할 모달 창(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

[Electron] 6.프로세스와 IPC 통신 - 레시피 일렉트론 앱

개요 이미지 파일과 압축 파일 모두 DB에 삽입했으면, 이제 기능을 구현해야한다. 현재까지는 앱 실행시에 이미지 파일과 압축 파일을 DB에 넣는 클래스만 main.js(메인 프로세스)에 Import하여 사용했다. 어차피 DB 테이블 완성을 위한 1회성 클래스 및 함수였기 때문에, 구조를 생각하지 않고 메인 프로세스에서 한번만 돌아가면 됐었다. 하지만 이제부터는 몇가지 기능에 관련된 요청과 응답이 메인 프로세스(Main process)와 렌더러 프로세스(Renderer process) 사이에서 오가며, 그러한 통신들을 처리해줄 클래스들이 필요하다. 소스 구조 변경 우선 사진1과 같이 프로세스에 맞춰 프로젝트 경로를 재구성해주었다. main 폴더에는 각 메인 프로세스에서 돌아갈 스크립트들을 넣어주고, ren..

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