채팅 프로그램 - 2
React 채팅 프로젝트를 Electron 데스크톱 앱으로 실행 React와 Vite로 만든 채팅 프로젝트를 Electron으로 감싸 데스크톱 창에서 실행해 봤다. 프론트엔드 폴더에서 Electron을 설치했다. npm install -D electron package.json에는 진입점과 실행 명령을 추가했다. 기존 스크립트는 그대로 유지했다. { "main": "electron/main.cjs", "scripts": { "electron": "electron ." } } main.cjs 파일을 생성했다. const { app, BrowserWindow, Menu } = require('electron') function createWindow() { const window = new BrowserWindow({ width: 1200, height: 800, webPreferences: { nodeIntegration: false, contextIsolation: true, sandbox: true, }, }) window.loadURL('http://localhost:5173') } app.whenReady().then(() => { Menu.setApplicationMenu(null) createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit() }) Vite 개발 서버를 연 후 npm run electron를 터미널에 입력해서 프로그램을 실행했다. 결과물 디스코드처럼 프로그램으로 실행되고, 로컬에서 테스트 했을 때 정상적으로 작동한다. (디스코드도 일렉트론을 사용한다) 서버 배포 후 자동 업데이트를 구현해보고 싶지만 남아있는 서버가 없다. 방식은 깃허브 릴리즈 버전을 확인해서 버전이 다를 시 업데이트 되게 할 수 있을 것 같다. 실행파일 설치파일
