Process Model

일렉트론은 chromium에서 다중 프로세스 아키텍처를 상속받았기 때문에 최신 웹 브라우저와 매우 유사하다.

Why not a single process?

• 웹 브라우저는 엄청나게 복잡한 애플리케이션이다.
• 웹 콘텐츠를 표시하는 기본 기능 외에도 여러 창을 관리하고 타사 확장 프로그램을 로드하는 등 많은 부차적인 책임이 있다.
• 초기 브라우저는 일반적으로 이 모든 기능을 단일 프로세스에서 처리했다.
• 이 패턴은 열려 있는 각 탭에 대한 오버헤드가 적다는 것을 의미했지만, 하나의 웹 사이트가 충돌하거나 중단되면 전체 브라우저에 영향을 미칠 수 있다는 것을 의미하기도 했다.

다중 프로세스 모델

• 이 문제를 해결하기 위해 chrome은 각 탭이 자체 프로세스에서 렌더링되어 웹 페이지의 버그나 악성코드가 앱 전체에 미칠 수 있는 피해를 제한하기로 결정했다.
• 단일 브라우저 프로세스가 이러한 프로세스와 전체 애플리케이션 수명 주기를 제어한다.
• Electron 애플리케이션은 main 및 rendere라는 두 가지 유형의 프로세스를 제어한다.

main process

• 각 Electron 앱에는 애플리케이션의 진입점 역할을 하는 단일 메인 프로세스가 있다.
• 메인 프로세스는 Node.js 환경에서 실행되기 때문에 모든 Node.js API를 모듈화하고 사용할 수 있다.

1. 메인 프로세스의 주 목적

• 메인 프로세스의 주 목적은 모듈을 사용하여 애플리케이션 창을 만들고 관리하는 것이다.
• brewserWindow
• 클래스의 각 인스턴스는 별도의 렌더러 프로세스에서 웹 페이지를 로드하는 애플리케이션 창을 만든다.
• EventEmitter로 다양한 사용자 이벤트(ex. 창 최소화, 최대화)에 대한 핸들러를 추가할 수 있다.
• 인스턴스가 종료되면, 해당 렌더러 프로세스도 종료된다.

2. Application lifecycle

• electron의 app모듈을 통해 애플리케이션의 라이프사이클을 제어한다.
• 이 모듈은 사용자 정의 애플리케이션 동작을 추가하는데 사용할 수 있는 다양한 메서드 세트를 제공한다.
  ex) 애플리케이션 프로그래밍 방식 종료, 애플리케이션 도크 수정 또는 About 패널 표시 등

3. Native APIs

• 일렉트론의 메인 프로세서는 네이티브 API에 접근하여 운영 체제에서 제공하는 기능을 활용할 수 있게 하는 인터페이스 이다.

• 예시: 운영 체제 상호작용 (OS Interaction)

  • Node.js의 os 모듈을 사용하여 시스템 정보, 메모리 사용량, CPU 정보 등을 얻을 수 있다.

  const os = require('os');
  
  console.log('OS type:', os.type());
  console.log('Total memory:', os.totalmem());
  console.log('Free memory:', os.freemem());
  

  ---

renderer process

• 각 일렉트론 앱은 열려 있는 각 브라우저창(및 각 웹 임베드)에 대해 별도의 렌더러 프로세스를 생성한다.
• 브라우저 창 내 모든 사용자 인터페이스와 앱 기능은 웹에서 사용하는 것과 동일한 도구와 패러다임으로 작성해야 한다.- 렌더러가 require 또는 기타 Node.js API에 직접 액세스할 수 없다는 의미이다.
  

HTML: 이 파일은 렌더러 프로세스의 시작점이다.
CSS: ui스타일은 css(cascading style sheets)를 통해 추가된다.
JS: 실행 가능한 자바스크립트 코드는 script 요소를 통해 추가할 수 있다.

• 렌더러프로세스는 require 또는 기타 Node.js API에 직접 액세스할 수 없다는 의미이다.

• 예를들어, fs모듈의 경우 OS의 파일 경로를 추출할 때 사용되는데, 이러한 native API를 사용하려면 main process에서만 가능하다.

// main에서만 실행 가능

const fs = require('fs');

fs.readFile('/path/to/file', 'utf-8', (err, data) => {
  if (err) {
    console.error('File read error:', err);
    return;
  }
  console.log('File content:', data);
});

💁🏻렌더러에 NPM 모듈을 직접 포함하려면?

• 웹에서 사용하는 것과 동일한 번들러 툴체인(예: webpack또는 )을 사용해야한다.

---

preload scripts

메인 프로세스에서만 엑세스 할 수 있는 경우, 렌더러 프로세스가 node.js 및 일렉트론의 기본 데스크톱 기능과 어떻게 상호 작용할 수 있는가? 사실, electron의 콘텐츠 스크립트를 가져오는 직접적인 방법은 없다.

• 메인 프로세스와 렌더러 프로세스 간의 다리 역할을 한다.
• 프리로드의 스크립트는 렌더러 프로세스에서 로드되기 전에 실행된다.
• DOM API와 제한된 Node.js 및 Electron API에 접근할 수 있다.

✅ 프리로드 스크립트가 렌더러 프로세스에서 로드되기 전에 실행되는 이유?

• 보안과 기능성 두 가지 주요 이유가 있다.
• 보안의 이유: 프리로드 스크립트는 샌드박스 환경에서 실행되어, 렌더러 프로세스가 전체 node.api에 직접 접근하지 못하게 한다. 이는 렌더러 프로세스가 악의적인 웹 콘텐츠를 로드할 때 시스템의 보안을 유지하는데 도움을 준다.
• 기능성의 이유: 프리로드 스크립트는 렌더러 프로세스가 DOM과 상호작용하기 전에 필요한 API를 미리 설정할 수 있게 한다. 이렇게 하면 렌더러 프로세스에서 사용할 수 있는 안전한 인터페이스를 제공할 수 있다.

✅ 프리로드 스크립트가 어떻게 DOM API와 node.js 및 Electron API에 접근할 수 있는가?

• DOM API 접근 :

  • 프리로드 스크립트는 브라우저 환경에서 실행되기 때문에 DOM API에 접근하는 것이 가능하다.
  • 이는 웹 페이지가 로드되기 전에 DOM에 접근할 수 있어, 초기 설정이나 이벤트 리스너를 등록하는 데 유용하다.

• Node.js 및 Electron API 접근:

  • 프리로드 스크립트는 제한된 node.js, electron API에 접근할 수 있다.
  • Electron 20부터는 프리로드 스크립트가 샌드박스 환경에서 실행되기 때문에 전체 Node.js 환경에 접근하지 못하지만, 필요한 특정 API는 사용할 수 있다.
  • 예를 들어, require 함수를 통해 Node.js 모듈에 접근할 수 있다.

샌드박스란?

• 애플리케이션이나 코드가 독립되고, 제한된환경에서 실행되도록 하는 보안 기법.
• 이 환경에서는 외부 시스템 리소스나 파일에 접근할 수 없도록 제한하여 시스템 전체의 보안을 강화하는 것이다.
• 주요 개념으로는 격리, 보안, 제한된 권한 등이 있다.