봄수의 연구실

Unplugin-auto-expose 사용 메뉴얼 unplugin-auto-expose는 Electron 애플리케이션에서 preload 스크립트를 통해 renderer 프로세스에 API를 쉽게 노출시킬 수 있게 해주는 플러그인입니다. 이 문서는 unplugin-auto-expose의 기본 사용법, 설정 방법 및 TypeScript 설정 방법을 안내합니다. 기본 사용 예시 preload.ts 예시: // preload.ts export const foo = 'foo string' // 동등한 기존 방식 electron.contextBridge.exposeInMainWorld('__electron_preload_foo', 'foo string') renderer.ts 예시: // renderer.ts imp..

Electron TSX Production 환경에서 윈도우에 로딩이 되지 않는 문제 해결 Electron과 TypeScript (TSX)를 사용하여 Single Page Application (SPA)을 구축하는 경우, Production 환경에서 여러 윈도우를 띄우면서 클라이언트 사이드 라우팅을 적절히 관리하는 방법에 대해 자주 질문을 받습니다. 특히, file:// 프로토콜을 사용하는 프로덕션 환경에서 SPA 구성을 유지하면서 멀티 윈도우를 효과적으로 띄우는 방법에 대한 해결책을 제공하고자 합니다. 문제 상황 Production 환경에서 file:// 프로토콜을 사용할 때 SPA의 클라이언트 사이드 라우팅이 제대로 작동하지 않는 문제가 발생할 수 있습니다. 멀티 윈도우를 SPA 구성으로 띄우고자 할 ..

Electron을 활용한 다중 모니터 화면 캡처 마스터하기 Electron은 웹 기술을 사용하여 크로스 플랫폼 데스크톱 애플리케이션을 개발하는 강력한 도구로, 다중 모니터 화면 캡처와 같은 고급 기능을 구현할 수 있습니다. 이 기능은 생산성 도구 및 그래픽 디자인 소프트웨어와 같이 여러 화면에서의 광범위한 사용자 상호작용이 필요한 애플리케이션에 필수적입니다. 이 블로그에서는 Electron의 screen API 및 기타 기술을 활용하여 사용자가 선택한 영역을 정확하게 다중 모니터에서 캡처하는 방법을 탐색하겠습니다. 모니터 정보 검색으로 시작하기 Electron의 screen API는 연결된 디스플레이와 그 속성을 식별하는 데 중요한 역할을 합니다. screen.getAllDisplays() 메서드는 모든..

Electron에서 TypeScript 경로 별칭 설정하기: module-alias를 사용한 실전 가이드 Electron과 TypeScript를 함께 사용하면 개발자는 강력한 타입 시스템과 함께 풍부한 API를 활용하여 데스크탑 애플리케이션을 개발할 수 있습니다. 그러나 프로젝트의 규모가 커지면서 파일 구조가 복잡해지고, 상대 경로를 사용하는 것만으로는 모듈을 관리하기 어려워질 수 있습니다. 이때, TypeScript의 paths 설정과 module-alias 패키지를 사용하여 이 문제를 깔끔하게 해결할 수 있습니다. 본 가이드는 TypeScript에서 설정한 경로 별칭을 Electron 애플리케이션의 런타임에서도 정확하게 해석할 수 있도록 설정하는 방법을 설명합니다. 시작하기 전에 본 가이드를 따라하기..

React 프로젝트가 로딩 되기 전에 Electron이 구동 되어 버릴 때 해결 방법 React 개발 서버가 완전히 준비된 후 Electron 앱이 시작되도록 설정하기 위해 wait-on 도구를 사용할 수 있습니다. wait-on은 특정 URL, 파일, 또는 포트가 사용 가능해질 때까지 기다리는 데 사용되는 유틸리티입니다. 이를 통해 Electron 앱이 React 개발 서버가 완전히 준비된 후에 시작되도록 구성할 수 있습니다. wait-on 설치 먼저 wait-on을 설치해야 합니다. 프로젝트의 루트 디렉토리에서 다음 명령어를 실행하세요: npm install --save-dev wait-on 또는 yarn을 사용하는 경우: yarn add --dev wait-on 설치가 완료되면, package.js..

require() Of ES Module A JavaScript error occurred in the main process Uncaught Exception: Error [ERR_REQUIRE_ESMI: require) of ES Module /Users/gobeomsu/ Documents/GitHub/PixelScriber/node_modules/electron-is-dev/index.js from /Users/gobeomsu/Documents/GitHub/PixelScriber/dist/main/main.js not supported Instead change the require of index.js in /Users/gobeomsu/Documents/ GitHub/PixelScriber/dis..

Electron Browser Window 숨기는 방법 방법 : mainWindow?.hide();, mainWindow?.show(); 목적 Electron 앱이 캡처 과정에 직접 개입하지 않도록 하여, 보다 정확한 화면 캡처를 가능하게 합니다. 😄 캡처 지연: 화면 캡처를 시작하기 전에 약간의 지연 시간(예: 1-2초)을 두어 Electron 앱 창을 최소화하거나 숨길 시간을 제공합니다. 이렇게 하면 desktopCapturer가 Electron 창을 제외한 나머지 화면을 캡처할 수 있습니다. ipcMain.on("capture-screen", async (event) => { // 창을 숨기거나 최소화 mainWindow?.hide(); // 약간의 지연 후 캡처 setTimeout(() => { ..

Electron 개발환경에서 캡처가 되지 않았던 이유 Electron에서 desktopCapturer API를 사용하여 화면을 캡처할 때, 다른 애플리케이션이 보이지 않고 오직 빈 배경화면만 나타나는 문제가 있었습니다. 여러 다른 라이브러리를 사용해 보았지만, 동일한 문제가 지속되었고, 이는 권한 문제로 의심되었습니다. 이에 대한 문제 해결 과정을 아래에 기록합니다. MacOS의 보안 정책 MacOS Catalina(10.15) 이상 버전에서는 새로운 보안 및 개인 정보 보호 기능들이 도입되었습니다. 특히 ‘화면 녹화’ 권한이 중요한 부분 중 하나입니다. Electron 앱이 화면을 캡처하려면 사용자로부터 명시적인 허가가 필요합니다. 이 권한 없이는 Electron 앱이 빈 화면이나 배경화면만을 캡처할 ..

Electron 애플리케이션 개발: Yarn을 활용한 기본 설정과 파일 구성 Yarn을 통한 Electron 설치 및 초기 설정 Yarn을 사용하여 Electron을 손쉽게 설치하고 프로젝트를 초기화합니다. yarn init -y yarn add electron --dev index.html의 기본 구조 설정 기본 HTML 구조를 설정하여 Electron 애플리케이션의 UI를 구성합니다. Welcome to My Electron App! main.js로 Electron 애플리케이션의 메인 프로세스 설정 Electron의 메인 프로세스를 정의하는 main.js 파일을 구성합니다. Electron 모듈 임포트: app과 BrowserWindow를 임포트합니다. BrowserWindow 인스턴스 생성: 애플리..