YumeHANA YUME'S DEV

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'..