Electron의 아키텍처

Electron 앱은 Main Process(메인 프로세스) + Renderer Process(렌더러 프로세스)로 이루어져 있다.

Main Process는 NodeJS, 운영체제에 접근할 수 있는 프로세스.

Renderer Process는 웹 페이지만 실행하고, 보안상의 이유로, Node.js를 실행할 수 없는 프로세스이다.

preload라는 특별한 스크립트를 통해서 이 두 프로세스 간 통신이 일어난다.

https://www.electronjs.org/docs/latest/tutorial/tutorial-preload

Inter Process Communication

2023.10.01

Electron에서의 렌더러 프로세스는 View와 관련된 프로세스이다. 웹 개발에서 생각하면 HTML, CSS, JavaScript로 표현되는 화면 말이다.

웹 개발을 하면서 우리는 브라우저 API를 활용하게 된다. 우리가 작성한 프론트엔드 코드는 브라우저 위에서 구동되는 코드니까.

그런데 Electron을 통한 개발에서는 우리가 작성한 프론트엔드(화면) 코드에 기기와 관련된 기능들을 활용할 수 있게 된다. 기기와 관련된 기능들은 OS 레벨인데, 어떻게 이것이 가능할까?

이 작업은 메인 프로세스와 렌더러 프로세스를 연결해주는 징검다리 역할인 preload가 담당한다. 렌더러 프로세스와 메인 프로세스 간 통신을 우리는 Inter Process Communication, 줄여서 IPC라 부른다.

IPC channel handler

IPC는 이벤트 기반으로 통신한다. 특정 작업과 관련된 이벤트(channel)을 정의해놓고, 이 이벤트가 발생하면 관련 작업을 핸들러 콜백 함수를 통해 처리하는 식이다.

Electron + ESLint + Prettier

2023.10.04

이미 일렉트론 팀에서 사용하고 있는 린트 규칙을 사용해보고 싶어 설치했다.

https://github.com/electron/eslint-config

렌더러에 React 적용하기 + webpack + typescript

2023.10.05