[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

[Git] Sourcetree 원격 브랜치 푸시 (Remote branch push) 무한로딩 오류

이슈 Sourcetree에서 커밋 후 원격 브랜치(Remote branch)에 푸시(Push)하려는데, 무한 로딩이 발생했다. 에러 메시지나 로그가 뜨지는 않았다. 원인 원인은 해당 원격 저장소의 계정 인증이 되지 않아서였다. Sourcetree를 한 번 정리하다가 해당 저장소의 계정 인증을 삭제한 것으로 추측한다. 경과 및 해결 사진1, 사진2와 같이 Sourcetree 상단탭에서 도구 > 옵션> 인증 탭으로 이동하면 계정을 추가할 수 있다. 추가 버튼을 누르고 원격 저장소를 선택해 계정을 인증하면 추가된다.

• format_list_bulleted 개발/이슈
• · 2024. 1. 26.
• 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

[Electron] 5.레시피 압축 파일 생성 및 바이너리화

개요 검색 결과 페이지에서 레시피의 다운로드 버튼을 클릭하면 받을 수 있는 압축 파일을 만들 것이다. 압축 파일에는 레시피 이미지 파일과 레시피 title, ingredients, instructions 가 포함된 .txt 파일을 포함한다. 이 압축 파일은 이미지 image_file 컬럼 처럼 recipe_zip_file 이라는 새 컬럼을 만들어 바이너리 데이터로 DB에 삽입한다. DB 컬럼 추가 및 데이터 삭제 -- 값이 누락된 데이터 삭제 DELETE * FROM tb_recipe WHERE title = '' OR ingredients = '[]' OR instructions = '' OR image_name = ''; -- 손상된 이미지 파일의 레코드 삭제 (파일은 존재하지만 손상된 파일) DEL..

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