ELECTRON (18) 썸네일형 리스트형 Electron 앱에서 dark모드 사용하기. Electron의 Main Process 모듈 중 nativeTheme을 사용하면 프로그램 프레임에 다크모드를 적용할 수 있다. https://www.electronjs.org/docs/latest/api/native-theme nativeTheme 모듈의 themSource 프로퍼티에 "system", "light" 또는 "dark"를 넣어주면 된다. const {nativeTheme} = require("electron/main")nativeTheme.themeSource = "dark" Electron과 React를 같이 사용해 보자 - react router Electron과 React를 연동해서 만든 프로젝트에서 React Router를 사용할 때 createHashRouter를 사용해야 한다. createBrowserRouter를 사용하면 빌드한 결과물을 실행하면404 not found 에러가 발생한다. https://reactrouter.com/en/main/routers/create-hash-router 공식 문서에 의하면 웹서버 없이 사용할 때 crateHashRouter를 사용하라면서그 밑에 보면 이건 추천하지 않으니, 기능이 유사한 createBrowserRouter를 사용하란다. WHAT??? 어쨌든, 에러가 발생하니 createHashRouter를 사용하자.참고로 이글을 쓰는 2024년 7월 5일, React Router 버전은 6.24.. Electron과 React를 같이 사용해 보자 - 배포하기 2024.06.26 - [ELECTRON] - Electron과 React를 같이 사용해 보자. (Electron + React 연동) 지난 글에 이어서 electron과 react가 연동된 프로젝트를 배포해 보자. 당연하지만 react를 먼저 빌드하고 electron을 나중에 해야 한다. React react관련 설정은 이미 package.json에 다 되어 있다. "scripts": { ...... "build": "react-scripts build", ...... }, npm run build를 해주면 public폴더 내용을 build로 옮겨준다. Electron electron을 위해서는 설정할 게 몇 가지 있다. 우선 윈도용 빌드 스크립트를 추가한다. "scripts.. Electron과 React를 같이 사용해 보자. (Electron + React 연동) Electron으로 윈도우용 프로그램을 만들다보니UI를 만드는데 문제가 있더라. HTML과 css를 사용해서 UI를 만들다 보니UI 라이브러리 같은게 있으면 좋겠다는 생각이 들었다. 그러다 불현듯 React가 생각났다. React로 웹 어플리케이션을 만들 수 있는데이것을 Electron에 넣을 수 있지 않을까?Electron도 어차피 크롬을 사용하잖아?? 이런 생각에 구글링 잠깐 해보니 관련 글이 있다!! ㅎㅎ 몇 가지 시행 착오를 겪었지만 결국 Electron과 React를 같이 사용하는 데 성공했다. 윈도우 11에서 테스트 한 결과를 공유합니다! React 프로젝트 설정 먼저, React 프로젝트를 만들자. npx create-react-app electron-react --template ty.. electron 으로 만든 프로그램에 중복 실행 방지 코드 넣기! electron으로 만든 프로그램에 중복 실행 방지 코드를 넣어 봅시다. 공식 문서를 찾다보니 requestSingleInstanceLock이라는게 있습니다. https://www.electronjs.org/docs/latest/api/app#apprequestsingleinstancelockadditionaldata app | ElectronControl your application's event lifecycle.www.electronjs.org 프로그램이 실행될 때 lock을 얻을 수 있는지 확인해 주는 함수라고 합니다! 이미 실행되고 있는 같은 프로그램 인스턴스가 있으면 false를 반환합니다. 제공되는 예제는 다음과 같습니다. const { app, BrowserWindow } = requ.. [electron] autoUpdater 사용 시 주의 사항. electron-updater로 최신 릴리스가 있는 지 확인 할 때 checkForUpdates 함수를 사용한다. 이 함수의 결과로 "update-available" 또는 "update-not-available" 이벤트가 발생한다. 자동 업데이트를 구성하는 코드는 대략 아래와 같다. import { autoUpdater } from "electron-updater"; ...... autoUpdater.on("update-available", (info) => { console.log("Update available."); autoUpdater.downloadUpdate(); }); autoUpdater.on("update-not-available", (info) => { console.log("Updat.. [electron] github private repo.를 사용하는 자동 업데이트. electron-updater와 github repository를 사용해서 자동 업데이트 기능을 추가할 수 있다. 2020.04.21 - [ELECTRON] - electron-updater 프로그램 자동 업데이트 electron-updater 프로그램 자동 업데이트 2020/03/31 - [ELECTRON] - electron-builder 초간단 사용법 지난 글에서 사용한 예제에 GitHub를 사용하는 자동 업데이트 기능을 추가해 보겠습니다. 자동 업데이트 기능 테스트를 위해서 GitHub에 repository를.. junglow9.tistory.com 그런데 어떤 상황 때문에 private repository를 사용해야 한다면? 물론, 보안 상의 이슈로 private repo.사용은 권장하지 않는다.. [electron] electron-builder를 사용할 때 vc_redist.exe 실행하기 electron으로 윈도용 프로그램을 만들고 있는데 어찌어찌하다 보니 vc++ redistributable 파일을 설치해야 할 필요가 생겼습니다. 추가로 파일을 설치하는 것도 NSIS 스크립트로 간단하게 해결할 수 있습니다. NSIS 스크립트 https://www.electron.build/configuration/nsis.html#custom-nsis-script NSIS - electron-builder NSIS The top-level nsis key contains set of options instructing electron-builder on how it should build NSIS target (default target for Windows). These options also app.. 이전 1 2 3 다음
