본문 바로가기

ELECTRON

(14)
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..
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...
[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..
[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..
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..
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..