Electron을 배우기 시작했고, 지금까지 배운 내용은 이렇습니다

Source: Dev.to

JavaScript를 배우면서 가장 흥미로웠던 점은 다양한 플랫폼용 애플리케이션을 쉽게 개발할 수 있다는 것이었습니다. 저는 주로 Windows PC에서 작업하기 때문에 생산성을 높여줄 맞춤형 앱을 만들고 싶었습니다.

Why I did not choose native development over Electron?

답은 간단합니다: 저는 JavaScript에 익숙하기 때문입니다. C 같은 새로운 언어를 배우는 것도 장점이 있지만, 진입 장벽을 높이기보다는 익숙한 것부터 시작하는 편이 좋습니다.

공식 문서를 읽는 것부터 시작했습니다: . 메인 페이지에서 main.js, preload.js, index.html 등 전형적인 파일 구조를 확인할 수 있습니다. 우리가 보통 집중하는 세 파일은 다음과 같습니다:

main.js

main.js는 애플리케이션의 핵심입니다. 메인 프로세스에서 실행되며 Node.js 통합, 창 생성, 앱 전체 라이프사이클을 담당합니다.

preload.js

preload.js는 UI(렌더러)와 메인 프로세스 사이의 다리 역할을 합니다. 보안상의 이유로 제한된 안전 API를 렌더러에 노출합니다.

renderer.js

renderer.js는 렌더러 프로세스에서 실행되어 UI를 조작합니다—즉 “기본 UI 스크립트”라고 할 수 있습니다. React와 같은 프레임워크를 사용할 경우, React가 자체적으로 HTML, CSS, JavaScript를 번들링하므로 이 파일이 필요 없을 때도 있습니다.

Scaffolding a new project

Using plain HTML, CSS, and JavaScript with Electron

세 가지 웹 기본 요소만으로 간단한 Electron 앱을 만들 수 있습니다. 최소 설정 예시는 다음과 같습니다:

이 예시에서는 preload.js를 생략했는데, 아주 작은 프로젝트에서는 선택 사항이기 때문입니다. app과 BrowserWindow 모듈은 Electron에서 가져와야 합니다; app은 애플리케이션 라이프사이클을 제어하고, BrowserWindow는 창을 생성·관리합니다. app.whenReady()는 Electron 초기화가 끝났을 때 해결되는 프라미스를 반환합니다.

Using React (Vite) and Electron

제가 선호하는 워크플로우는 React와 Electron을 결합하는 것입니다. 먼저 Vite 프로젝트를 스캐폴딩하고, Electron을 개발 의존성으로 추가합니다. 모듈 해석 문제를 피하기 위해 엔트리 파일을 .js에서 .cjs로 이름을 바꾸고 CommonJS 문법을 사용합니다.

지금까지 배운 내용에 대한 초반 개요에 불과합니다. Electron을 계속 탐구하면서 인사이트를 공유해 나가겠습니다.

Bye 👋