How To Use Worker Threads In Electron JS

ElectronJS에서 계산 집약적인 작업을 워커 스레드로 분리하여 메인 스레드(UI) 블로킹을 방지하고 애플리케이션 응답성을 유지합니다. 🚀
메인 스레드에서 실행되는 무거운 작업은 UI를 멈추게 하지만, 워커 스레드에서 실행하면 UI가 계속 반응하며 사용자 경험을 향상시킵니다. 🧊
워커 스레드는 worker_threads 모듈을 사용하여 생성하며, 워커 파일 경로와 초기 데이터를 전달할 수 있습니다. 🧵
워커 스레드 파일은 번들링 시 호환성을 위해 CommonJS 모듈(.cjs)로 작성하는 것이 권장됩니다. 📦
워커 스레드 내에서는 workerData로 전달받은 데이터를 처리하고, parentPort.postMessage()를 통해 처리 결과를 메인 스레드로 다시 전달합니다. 📤
메인 프로세스와 렌더러 프로세스 간의 통신은 IPC (Inter-Process Communication)를 통해 이루어지며, contextBridge를 사용하여 렌더러에 안전하게 API를 노출합니다. 🌉
TypeScript 환경에서 global.d.ts 파일을 통해 window 객체에 노출된 Electron API의 타입을 선언하여 개발 시 타입 안정성을 확보합니다. ✍️
electron-forge와 vite-plus-typescript 템플릿을 활용하여 ElectronJS 프로젝트를 효율적으로 초기 설정할 수 있습니다. 🛠️

K-POP Seattle - K-POP Play Day at Bellevue City by BigHug