반응형 FE/electron4 electron Process Model electron은 Chromium의 멀티 프로세싱 방식을 그대로 차용했기 때문에 현대 브라우저와 비슷한 아키텍처를 가지고 있습니다. 브라우저가 멀티 프로세싱을 사용하는 이유는 웹 컨텐츠 표시 외에도 다양한 기능을 독립적으로 수행하기 위함인데 electron 에서도 마찬가지로 main, renderer 프로세스를 구분해서 관리합니다. Native APIs 데스크탑의 메뉴, 알림 등 네이티브 모듈은 electron 에서 컨트롤 할 수 있도록 제공한다. main process electron은 main 프로세스를 반드시 한개 가지고, 그것은 엔트리 포인트가 된다. main 프로세스는 모든 node API를 사용할 수 있다. 메인 프로세스의 가장 중요한 목적은 BrowswerWindow 모듈로 윈도우를 생성하고.. 2023. 2. 12. electron 패키징과 배포 그리고 업데이트 electron 은 core 모듈에 패키징하는 모듈이 포함되어있지 않고, 별도의 모듈인 @electron-forge/cli 를 사용해야한다. 세팅하기 npm install --save-dev @electron-forge/cli npx electron-forge import 위 커맨드라인 실행으로 패키징에 필요한 script 와 추가적인 modules 을 설치한다. 그리고 forge.config.js 파일도 생성된다. 패키징 아래 cli 실행한 결과로 out 파일이 생성되고 패키징이 끝난다. npm run make 서명 OS 별로 서명되지 않은 앱에 대해서 다운로드나 실행을 어렵게하는 서명 시스템이 있기 때문에 불특정 다수에게 배포될 앱이라면 forge.config.js 에서 서명을 해주는 것이 바람직하다.. 2023. 2. 12. Electron 의 핵심 Preload contextBridge preload 스크립트 파일은 node, DOM, electron API 세가지의 context 에 접근이 가능하기 때문에 bridge 역할을 할 수 있다. contextBridge 를 통해서 변수, 함수, 객체를 전달할 수 있다. main.js function createWindow() { const win = new BrowserWindow({ width: 1920, height: 1080, webPreferences: { preload: path.join(__dirname, "preload.js"), }, }); win.webContents.openDevTools(); win.loadURL("http://localhost:5173"); } preload.js const { .. 2023. 2. 11. Electron 핵심 Electron을 한번 쯤 익혀 보고싶다고 생각난 이유는 업무 효율성이다. node로 이것저것 필요할 때마다 스크립트를 작성해서 전체 파일명을 바꾼다던지, 복사한다던지.. 등 작업을 해왔다. 하나, 둘 쌓여가니 편하게 데스크탑 앱으로 만들어 내 생산성을 높여보고자 정리해본다. 핵심 app, BrowserWindow const { app, BrowserWindow } = require('electron') app : 일렉트론 이벤트 라이프사이클 컨트롤 BrowserWindow : 윈도우창 컨트롤 * app 의 ready 이벤트가 emitt 되야 윈도우를 생성할 수 있다. 일반적인 데스크탑 앱 UX 구현 app.on('window-all-closed', () => { if (process.platform !.. 2023. 2. 11. 이전 1 다음 반응형
