Welcome to my space
Thanks for stopping by

✔️ 1. Setup.exe 실행 후 앱이 깜박이는 현상앞에서 Electron Forge를 이용해 Windows용 Setup.exe를 만들어보았습니다.실제로 Setup.exe를 실행해보니 설치 과정에서 룰렛 앱 창이 잠깐 나타났다가 사라지는 현상이 발생했습니다.처음에는 앱이 설치되면서 정상적으로 실행되는 과정이라고 생각할 수도 있지만, 설치 과정에서 발생하는 실행이라면 사용자에게 불필요한 화면이 보이게 됩니다. 🔹 electron-squirrel-startup 설치 이번에 사용한 Setup.exe는 단순히 파일을 복사하는 설치 프로그램이 아니라 Squirrel.Windows를 이용해 Electron 앱을 설치하는 프로그램입니다.Electron Forge의 Squirrel.Windows 문서에 따르면,..

✨ 문제 상황Electron 앱을 Windows에서 실행할 수 있는 설치파일로 만들기 위해 Electron Forge의 make 명령어를 실행했습니다.npm run make 하지만 Windows용 설치파일을 만드는 과정에서 다음과 같은 오류가 발생했습니다.Authors is required.npm run make 명령 자체가 잘못된 것은 아니었고, 앱 패키징까지는 정상적으로 진행된 후 Windows용 Squirrel 설치파일을 만드는 과정에서 오류가 발생했습니다. 더보기C:\electron-app>npm run make> electron-app@1.0.0 make> electron-forge make✔ Checking your system✔ Loading configuration✔ Resolving ma..

✨ 목표지금까지는 npm start 명령어를 통해 개발 환경에서만 앱을 실행했습니다.이번에는 지금까지 만든 Electron 앱을 Windows에서 일반 프로그램처럼 실행할 수 있는 형태로 패키징해보겠습니다.Electron Forge 설치하기기존 Electron 프로젝트를 Forge 프로젝트로 변환하기Electron 앱 패키징하기Windows용 설치파일 만들기생성된 설치파일로 실제 프로그램 설치 및 실행하기✔️ 1. Electron 앱 패키징이란?지금까지는 프로젝트 폴더에서npm start명령어를 실행해야 Electron 앱을 사용할 수 있었습니다.하지만 실제로 다른 사람에게 프로그램을 전달하려면 개발 환경 없이도 실행할 수 있는 형태로 만들어야 합니다.Electron에서는 앱의 코드와 Electron 실..

✨ 목표지난 글에서는 Electron을 이용해 간단한 랜덤 룰렛 프로그램을 만들어봤습니다.이번 글에서는 기존에 만든 랜덤 룰렛의 화면을 조금 더 다듬어 실제로 사용할 수 있는 데스크톱 앱 형태로 개선해보겠습니다.이번 작업에서는 앱 창 크기부터 화면 구성, 색상, 참가자 관리 기능까지 함께 수정했습니다.🎨 앱 디자인 변경 후 완성된 화면✔️ 1. Electron 창 설정 변경하기먼저 main.js에서 Electron 창의 기본 설정을 변경합니다.기존에는 테스트를 위해 단순히 창의 크기만 지정했지만, 이번에는 실제 프로그램처럼 사용할 수 있도록 창의 크기와 배경색 등을 설정했습니다.const { app, BrowserWindow, Menu } = require('electron');const createW..

✨ 목표이번 글에서는 앞에서 준비한 Electron 개발환경을 이용해 간단한 랜덤 룰렛 프로그램을 만들어보겠습니다.단순히 Hello Electron!을 출력하는 것을 넘어, 직접 화면을 구성하고 버튼을 클릭하면 참가자 중 한 명을 랜덤으로 선택하는 프로그램을 만들어봅니다.이번에는 다음과 같은 기능을 구현해보겠습니다.랜덤 룰렛 화면 구성참가자 추가 및 삭제 룰렛 실행 랜덤 당첨자 표시 간단한 설정창 구성 처음부터 복잡한 기능을 만들기보다는 Electron에서 HTML, CSS, JavaScript로 데스크톱 앱을 만드는 과정​을 직접 경험해보는 것을 목표로 하겠습니다.✔️ 1. 프로젝트 파일 구성하기먼저 #2에서 생성한 Electron 프로젝트를 그대로 사용합니다. 현재 프로젝트에는 다음과 같은 파일..