반응형 FE28 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. Web Cache(웹 캐시) 캐싱의 기본 개념 caching 은 어플리케이션의 처리 속도를 높여주는 효율적인 아키텍처 패턴이다. 대부분의 프로프램은 동일한 데이터에 대한 엑세스가 반복되기 때문에, 이미 가져온 데이터나 계산된 값의 복사본을 저장함으로써 처리속도를 향상시킬 수 있다. 웹 캐시(Web Cache) 클라이언트가 웹 사이트에 접속 할때 정적인 컨텐츠들을 특정위치에 저장하여, 서버에서 컨텐츠를 매번 요청하는 것이 아니라, 저장되어있는 특정 위치에서 불러옴으로써 응답시간을 줄이고, 서버의 부하를 감소시킬 수 있다. *정적 컨텐츠 : HTML, CSS, JS, 이미지, 동영상 등 *캐시 저장 위치 : client, network 등 웹 캐시의 종류 1. Browser Caches - 클라이언트(브라우저)의 내부 디스크에 저장 -.. 2023. 1. 29. vite 환경변수 번들링 도구에는 개발환경과 배포환경의 차이가 있고, 그것들을 환경변수로 관리를 합니다. vite 에서는 import.meta 에 추가적으로 변수를 삽입합니다. import.meta.env dotenv vite는 추가적인 환경변수를 불러오는 dotenv를 내장해서 사용하고있습니다. .env # 모든 케이스에서 로딩 .env.local # 모든 케이스에서 로딩되지만 git에 추가되지 않습니다. .env.[mode] # 특정 모드에서만 로딩 .env.[mode].local # 특정 모드에서만 로딩되지만 git에 추가되지 않습니다. - 여기서 .env.production 은 최우선 순위입니다. - 또한 기존의 환경변수를 .env 에서 정의한 변수가 덮어써지 않습니다. - .env 파일은 vite 서버 실행시 한.. 2023. 1. 13. 이전 1 2 3 4 5 다음 반응형
