Electron && 세팅

Electron 이란

• 데스크톱 애플레이케이션을 개발 할 수 있는 프레임워크
• Chromium + Node.js를 사용하여 이루어짐
• 크로스 플랫폼 : 맥,윈도우,리눅스 호환

 

 

 

 

 

 

Electron은 프론트를 담당하는 "크로미늄" 와 파일시스템 및 윈도우 객체 관리를 하는 "node.js" 으로 이루어져있다.

 

 

 

메인 프로세스

 

• 윈도우 창을 생성하고, 종료시키며, 생명주기를 관리한다
• 파일시스템,네트워크에 접근할려면 메인프로세스를 통해서 관리한다

 

 

렌더러프로세스

 

• 크로미움(Chromium)은 구글이 개발한 오픈 소스 웹 브라우저 프로젝트
• 크롬을 기본베이스로 사용된다
• 웹페이지를 렌더링을 한다.

 

 

본격적으로 Electron을 세팅하고자 한다. 그 전에 현재 프로젝트는 vite + vanila으로 이루어져 있다

 

 

Electron 설치

npm install electron --save-dev

 

Electron main script

import { app, BrowserWindow } from "electron";

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });
  // 1.Vite 개발 서버
  win.loadURL("http://localhost:5173"); // Vite 개발 서버
}

// 2. 메인 프로세스 실행완료
app.whenReady().then(() => {
  // 3. 렌더러 프로세스 생성
  createWindow();

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});

 

#Electron 실행 스크립트 추가(package.json) 추가

"scripts": {
    "electron": "electron electron-main.js"
}