티스토리

프로그래머?

검색하기

블로그 홈

프로그래머?

junglow9.tistory.com/m

이것저것 유용한 지식의 흔적 남기기.

구독자: 0

방명록 방문하기

주요 글 목록

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" 공감수 0 댓글수 1 2024. 10. 24.
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.. 공감수 0 댓글수 0 2024. 7. 8.
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.. 공감수 0 댓글수 0 2024. 7. 5.
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.. 공감수 0 댓글수 0 2024. 6. 26.
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.. 공감수 0 댓글수 0 2024. 5. 16.
[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.. 공감수 0 댓글수 0 2022. 9. 7.
[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.사용은 권장하지 않는다.. 공감수 0 댓글수 0 2022. 9. 6.
[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.. 공감수 0 댓글수 0 2022. 8. 5.
[electron] Windows 에서 electron-builder를 사용할 때 프로그램 설치 폴더 변경하기. electron-builder로 프로그램 설치 파일 만들고 프로그램을 설치하면 아래와 같은 경로에 설치되는 것 같습니다. C:\Users\사용자이름\AppData\Local\Programs\프로그램이름 그런데 보통 C:\Program Files 또는 C:\Program Files (x86)를 사용하잖아요??? 그래서 설치 폴더를 변경하는 방법을 찾아보았습니다. 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 .. 공감수 1 댓글수 0 2022. 8. 5.
electron에서 WIN32 API SendMessage 사용하기. electron프로그램에서 다른 윈도우 프로그램으로 메시지를 전달해야할 일이 생겼습니다. 오잉??? 이게 되려나??? 물론 되기야 하겠죠? 제 내공이 얕아서 잘 모를뿐 ㅎㅎ 역시나 이런 저런 키워드로 검색해보니 딱 있습니다. Node.js Foreign Function Interface for N-API - node-ffi-napi Node라이브러리 말고, 윈도우 DLL 라이브러리등을 사용할 수 있게 해 줍니다. Linux, OS X, Windows, Solaris에서도 돌아간다는데 저는 Windows에서만 사용해 봤습니다 EnumWindows로 실행중인 프로그램을 하나 찾아 그 녀석에게 메시지 하나를 날려주는 간단한 작업입니다. * 윈도우 개발툴이 필요합니다. Visual Studio 없으시면, 개발툴.. 공감수 1 댓글수 0 2021. 9. 28.
맥(MacOS)에서 globstar 패턴 인식 안 될때!!! ELECTRON으로 프로그램 만들고 동작 확인할 때 운영체제마다 약간의 차이로 코드가 안 돌아갈 때가 있습니다. 이번에 부딪힌 문제는 npm으로 파일 복사 스크립트를 실행할 때 globstar 패턴인식에 문제가 있었습니다. 예를 들어 아래와 같은 npm 스크립트가 있다면, copyFiles scr/assets/**/* 윈도 10에서는 scr/assets/ 하위에 있는 폴더와 파일을 다 불러올 수 있는데 맥에서는 안 되더군요. 한동안 테스트 끝에 스크립트의 문제가 아니라 각 종 설정의 문제란 걸 알게 되었습니다. 1. bash 버전 문제 현재 bash 버전이 너무 낮아 globstar 패턴을 제대로 인식하지 못했습니다. 터미널에서 아래 명령 실행에 실패하면 bash 업데이트를 해야 합니다. shopt -s.. 공감수 1 댓글수 0 2021. 9. 13.
electron-builder 결과물 사이즈가 너무 클 때!!! electron-builder로 win32를 빌드했는데 파일 사이즈가 무려 400MB !!!??? 아무래도 이상해서 원인을 찾아봤습니다. 먼저, build 옵션 중 asar을 false로 한 후 어떤 파일이 배포 파일에 들어있나 확인했습니다. { ...... "build": { ...... "asar":false, ...... }, ...... } 그랬더니, 프로그램 소스 파일 외 각종 자료가 들어 있는 폴더가 들어있었습니다. 그 외 vscode 관련 설정 파일도 있더군요. 불필요한 파일을 제외하는 방법을 찾아보니 electron-builder 옵션 중 files란게 있었습니다. https://www.electron.build/configuration/contents 공감수 2 댓글수 0 2021. 9. 9.
ELECTRON + TypeScript 사용해 보기(2) - cannot find module ... 2021.06.21 - [ELECTRON] - ELECTRON + TypeScript 사용해 보자(1) 이번에는 모듈 경로 설정에 대해서 살펴보겠습니다. 간단한 테스트를 위해 src/modules에 util.ts를 추가하고 함수를 하나 추가하고, export function testUtil():void { console.log("testUtil") } renderer.ts에 testUtil을 사용하는 코드를 추가했습니다. import { testUtil } from "./modules/util"; const newWindowBtn = document.getElementById('new-window'); newWindowBtn.addEventListener('click', (event) => { testU.. 공감수 0 댓글수 0 2021. 6. 22.
ELECTRON + TypeScript 사용해 보기(1) electron과 javascript로 데스크톱 앱을 개발하다 TypeScript를 적용해보기로 했다. TypeScript 개발 환경을 만들어 본 적이 없어서 겪은 시행착오를 남겨봅니다. 1. electron-quick-start-typescript TypeScript에 대해서 하나도 모르기 때문에 electron에서 제공하는 예제를 그대로 사용! https://github.com/electron/electron-quick-start-typescript electron/electron-quick-start-typescript Clone to try a simple Electron app (in TypeScript) - electron/electron-quick-start-typescript github... 공감수 0 댓글수 0 2021. 6. 21.
[electron] 파일 경로를 설정할 때 path 모듈을 사용하자. 파일 입, 출력 처리할 때 파일 경로를 입력해야 합니다. 이 경로를 설정할 때 문제가 되는 것은 운영체계마다 구분자가 다를 수 있다는 것입니다. 예로, 윈도는 C:\users\data.bin 이렇게 표현되고 맥 OS는 /users/data.bin으로 표현됩니다. 프로그램을 특정 OS 전용으로 만들 때는 문제가 안되지만, 멀티플랫폼을 지원할 경우 문제가 될 수 있습니다. 아래와 같이 하면 맥 OS에서는 문제가 될 수 있습니다. const makePath = (path, fileName) => { return `${path}\\${fileName}` } node에서 제공하는 path모듈을 사용하면 OS와 상관없이 잘 실행됩니다. const path = require("path"); const makePath.. 공감수 0 댓글수 0 2021. 6. 11.
[ELECTRON] vscode에서 디버깅 환경 설정 Electron 앱을 vscode를 사용해서 개발할 때 main process를 디버깅하려면 아래 절차를 따릅니다. 1. .vscode/launch.json 파일 추가. Electron 프로젝트 폴더에 .vscode 폴더를 만들고 그 안에 launch.json 파일을 추가합니다. 2. 디버깅 환경 설정. launch.json 파일에 아래 내용을 추가합니다. { "version": "0.2.0", "configurations": [ { "name": "Debug Main Process", "type": "node", "request": "launch", "cwd": "${workspaceFolder}", "runtimeExecutable": "${workspaceFolder}/node_modules/.bi.. 공감수 0 댓글수 0 2020. 5. 18.
electron-updater 프로그램 자동 업데이트 2020/03/31 - [ELECTRON] - electron-builder 초간단 사용법 지난 글에서 사용한 예제에 GitHub를 사용하는 자동 업데이트 기능을 추가해 보겠습니다. 자동 업데이트 기능 테스트를 위해서 GitHub에 repository를 하나 만든 후 소스코드는 push 한 상태입니다. electron-builder는 자동 업데이트 기능을 electron-updater 모듈로 제공하고 있는데 사용법이 매우 간단합니다. 1. electron-updater 설치 npm install --save electron-updater 2. 자동 업데이트 관련 코드 작성. https://www.electron.build/auto-update Auto Update - electron-builder Aut.. 공감수 4 댓글수 8 2020. 4. 21.
electron-builder 초간단 사용법 Electron으로 만든 애플리케이션을 배포하려면 여러 가지 절차가 필요합니다. 하지만, 이 절차를 도와주는 여러 가지 서드파티 패키징 툴이 있습니다. 그중에서, 개인적으로, electron-builder가 사용하기 편해서 그 사용법을 기록으로 남기려고 합니다. 애플리케이션 배포에 대한 공식 문서 애플리케이션 배포 | Electron www.electronjs.org electron-builder electron-userland/electron-builder A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box - electron-userlan.. 공감수 2 댓글수 0 2020. 3. 31.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.