스크린샷 버전 정보Electron v28.1.3Electron forge v7.2.0Node.js v18.18.0SQLite3 v3.39.0Jquery v3.7.1기능검색 기능다운로드 기능상세 보기 기능추가SQLite - Full Text Search를 활용한 검색 기능 최적화Web worker를 활용한 앱 성능 안정화 (응답 없음 이슈 해결)DB 내에 파일을 압축하고 바이너리화하여 데이터 용량 경량화요약Kaggle에서 csv 데이터 및 이미지 파일 탐색데이터 및 이미지 DB 테이블 삽입 자동화SQLite - FTS 테이블 및 쿼리문 구현기능 구현HTML 마크업 및 CSS 소스 반영이슈 및 기능 수정빌드 및 패키징 설정
GitHubhttps://github.com/bsorryman/recipe-bag 개요생각해두었던 기능은 모두 구현 완료했고, 이제 마지막으로 빌드와 패키징이 남았다. electron forge를 이용해 프로젝트를 구성했기 때문에, 간단한 script 명령어 하나로 설치파일(setup)을 패키징할 수 있다. 패키징 설정{ "name": "recipe.electron", "productName": "Recipe Bag", "version": "1.0.0", "description": "What should I eat today", "main": ".webpack/main", "scripts": { "start": "electron-forge start", "package": "ele..
GitHubhttps://github.com/bsorryman/recipe-bag 개요메인 화면 및 검색 결과 화면 내의 검색창에서 최근 검색어를 저장하는 기능을 추가한다. JavaScript 코드 req_loadRecentKeywords: () => ipcRenderer.send("req_loadRecentKeywords"), resp_loadRecentKeywords: (keywordList) => ipcRenderer.on('resp_loadRecentKeywords', keywordList), req_pushRecentKeyword: (keyword) => ipcRenderer.send("req_pushRecentKeyword", keyword), req_delRece..
GitHubhttps://github.com/bsorryman/recipe-bag개요 기존에는 '레시피 상세 보기 기능'을 위해, DB에 바이너리 타입으로 들어있는 파일을 압축 해제(Decompress)하여 텍스트 파일을 보여주도록 했다. 해당 기능을 수정하고 마크업 디자인 적용 및 검색어 Highlight 기능을 구현한다. JavaScript 코드 selectRecipeByIdAndKeyword(keyword, id) { if (this.db == null) return ''; let query = ''; if (keyword==null || keyword=='') { query = ` SELECT id, title, ingredients, instruc..
사실 이미 프로젝트는 4월 초에 끝나서 v1.0으로 빌드까지 완료되었다. 근래에 일이 있어 기록이 소홀해졌는데, 더 늦기전에 다시 기억을 더듬으며 기록하기로 한다. GitHubhttps://github.com/bsorryman/recipe-bag개요기획, 디자인 틀만 잡아두었던 HTML 코드를 걷어내고, 회사 동료가 작성해준 HTML, CSS 소스를 적용하였다. 기본적인 틀은 비슷하지만 검색 결과 페이지 내 페이징 방식을 버튼 식에서 무한 스크롤 식으로 변경하였다. 무한 스크롤 selectRcpByKeyword(keyword, column, offset) { if (this.db == null) return ''; if (column == 'all') { column = ..
개요이전 포스팅에서는 HTML, JavaScript API만으로 구글 로그인 버튼(Iframe)을 렌더링하여, 아주 간단하게 구글 소셜 로그인을 구현했었다. 하지만 버튼 UI 커스터마이징에 한계가 명확하여 서버 단에서만 Google OAuth2 API로 인증하고 버튼을 자유롭게 만들 수 있도록 구현하도록 한다. 구글 OAuth2 인증 단계참조 Docs: https://developers.google.com/identity/protocols/oauth2?_gl=1*vvbfvd*_up*MQ..*_ga*MzM4ODY1MDMuMTcxMzA4MDcyOA..*_ga_34B604LFFQ*MTcxMzA4MDcyNy4xLjEuMTcxMzA4MTYxMi4wLjAuMA..&hl=ko#scenarios 구글 OAuth2 인증..