YumeHANA YUME'S DEV

실제 다른 사용자들이 사용할 수 있게 하기 위해서 만든 electron app을 build 작업을 진행우선 electron을 빌드를 하기 위한 순서는 Vite + Vue를 사용하고 있기때문에Vite Build 후 build된 vue를 포함해서 다시 electron을 build한다.Vite Build우선 vite프로젝트를 build하기 위해서 build option을 설정js와 css파일은 하나로 만들어서 사용base는 './'으로 설정해야 build후 index.html에서 js와 css파일을 상대경로로 정상적으로 가져온다.base: './', build: { sourcemap: 'inline', cssCodeSplit: false, rollupOptions: { output:..

데스크톱 앱을 만들면서 서버를 안쓰고 만들다보니 버전 관리 및 정보를 어디선가 가져와야 할 것같아구글 시트를 이용해서 가져오는 방식을 사용 이 방식은 구글 시트의 접근이 누구나 가능하게 만들어서 공유하는 방식이기 때문에보안이 중요한 데이터는 사용을 안하는 것이 좋다.Google Drive우선 구글 시트로 버전과 업데이트 날짜 업데이트 내용만을 사용 우선 해당 시트를 공유해야하는데 데이터를 가져오기 위해서는 단순 링크 공유 방식이 아니라 web에 올려서 크롤링을 하는 방식으로 데이터를 가져오기 때문에 publish to Web으로 해당 시트를 공유해준다. .tsv 파일로 만들어 해당 내용에 쉼표나 데이터 구조를 안정적으로 가져와서 사용할 수 있도록 한다.이제 publish를 누르면 해당 공유 링크가 생성되..

electron app을 만들다 보면 맥과 윈도우 둘다 고려했을때 윗 부분이 다르기때문에 똑같이 만들어주기 위해 직접 네비게이션바를 만들어주어야한다.Title Bar Component우선 타이틀바 컴포넌트를 만들어 앱의 메인 화면들이 나오는 곳에 맨 상단에 붙힌다. 항상 상단에는 타이틀이 나오도록 타이틀 최대화 아이콘은 사용하지않고, 최소화와 닫기 아이콘만 사용할려고 해서 두개만 추가했다. preload.jselectron의 닫기와 최소화 기능 구현을 위해 preload를 만들어 electron config에 붙혀준다.더보기Electron에서 preload.js는 렌더러 프로세스(=브라우저 환경, 예: Vue/React)와 메인 프로세스(Node.js/Electron A..

Desktop app 을 만들때 Electron 을 활용하여 만들 수 있다는 것을 알고,한번 만들어보기로 도전 개발 환경은 Vite + Vue + Typescript + Electron를 활용Initalized우선 vite + vue + typescript 프로젝트를 생성 이후 electron을 설치npm install electron --save-dev 그리고 루트 프로젝트에서 electron 폴더를 만들고 main.js파일을 생성이때 win.loadURL은 vite 포트랑 동일하게 세팅 electron의 main.js에서 ts로 하고싶었지만 ts로 할려니까 이것저것 세팅을 추가로 해줘야하고, 잘 안되어서 js로 그냥 진행import { app, BrowserWindow } from 'electron'..