Electron 튜토리얼 프로그램 디렉토리 구조

프로그램 디렉토리 구조

Electron 애플리케이션은 세 가지 기본 모듈로 나뉩니다.

1. 주요 과정
2. 프로세스 간 통신
3. 렌더링 과정
   

순수한 웹 개발을 처음 접하는 사람들에게는 다중 프로세스 개발 구조에 익숙하지 않을 수 있습니다. 브라우저에서 보안 정책 고려 사항에 따라 웹 페이지는 일반적으로 샌드 박스 환경에서 실행되며 기본 리소스에 액세스 할 수 없습니다. 그러나 Electron에서는 페이지 (렌더링 프로세스)가 Node.js API를 호출 할 수 있으므로 페이지가 운영 체제의 맨 아래 계층과 상호 작용할 수 있습니다.

우리는 각 프로세스가 독립적 인 운영 단위이며 서로 직접 통신 할 수 없다는 것을 알고 있습니다. Electron은 메인 프로세스와 렌더링 프로세스 사이에서 통신하기 위해 두 가지 방법을 제공합니다.

• ipcRenderer 및 ipcMain 모듈을 사용하여 메시지 보내기
• RPC 통신을 위해 원격 모듈 사용

Electron 프로그램 디렉토리의 기본 디렉토리 구조는 다음과 같습니다.

app----------------------------应用程序代码目录
├─main.js----------------------程序启动入口，主进程
├─ipc--------------------------进程间通信模块
└─browserWindows---------------窗口管理，渲染进程
    └─src----------------------窗口业务模块
        ├─窗口A----------------窗口A
        └─窗口B----------------窗口B

주요 과정

주요 프로세스는 전체 애플리케이션의 수명주기를 관리하고 모든 렌더링 프로세스를 생성하는 애플리케이션의 관리자와 같습니다.

렌더링 과정

렌더링 프로세스 창 인스턴스는 Electron에서 제공하는 BrowserWindow 개체에 의해 생성되며 각 인스턴스는 독립적 인 프로세스이며 실행중인 웹 페이지에만 관심이 있습니다. 인스턴스가 소멸되면 해당 렌더링 프로세스도 소멸됩니다. 그리고 메인 프로세스가 파괴되면 모든 렌더링 프로세스도 파괴됩니다. 크롬 브라우저의 기본 전략에 따라 각 탭은 독립적 인 프로세스이며 Electron도이 전략을 사용합니다.

기본 프로세스 모듈 디렉토리

메인 Electron 프로세스는 전체 프로그램 시스템 모듈의 시작을 관리하고 전체 애플리케이션 수명주기를 관리하고 관리 창 인스턴스 (렌더링 프로세스)를 생성합니다. Electron 프로그램의 경우 관련 기능 모듈에 따라 몇 가지 기본 시스템 모듈이 있으며 그 구조는 아래 그림과 같습니다.

주요 프로세스 디렉토리 구조 :

app----------------------------应用程序代码目录
├─main.js----------------------程序启动入口，主进程
├─common-----------------------通用模块
├─log--------------------------日志模块
├─config-----------------------配置模块
├─ipc--------------------------进程间模块
├─appNetwork-------------------应用通信模块
└─browserWindows---------------窗口管理，渲染进程

다음은 각 모듈의 책임을 간략하게 설명합니다.

1. 일반 모듈

일반 모듈은 시스템의 일반 도구 및 플러그인입니다. 예를 들어 시스템 레지스트리 용 SDK를 패키징하고, 로컬 DLL 호출 모듈을 패키징하고, HTTP 모듈을 패키징하는 등의 작업을 수행합니다.

2. 로그 모듈

어떤 시스템도 로그 모듈이 부족할 수 없습니다. 로그 모듈은 프로그램 오류 수집을 담당하며 문제를 찾고 디버깅하는 데 편리합니다.

3. 모듈 구성

구성 모듈은 전체 프로그램의 일반 매개 변수 구성을 관리합니다. 여기서 구성은 반드시 로컬 구성은 아니지만 원격 구성 센터가 될 수도 있습니다.

4. 프로세스 통신 모듈

Electron은 ipc 및 remote 프로세스 통신 방법을 제공하며 프로세스 통신 모듈은 렌더링 프로세스 간의 통신 이벤트 열거를 관리합니다. 메인 프로세스 main.js에서 창 중 하나로 메시지 데이터를 보내야하는 경우 양측이 동의 한 이벤트를 등록해야합니다.이 모듈은 특히 이러한 이벤트를 관리합니다.

5. 애플리케이션 간 통신 모듈

클라이언트 응용 프로그램에는 응용 프로그램 간의 통신을위한 많은 시나리오가 포함됩니다. 여기에 애플리케이션 간 통신을위한 모듈이 있습니다.

6. 창 관리 모듈

메인 프로세스의 가장 기본적인 기능은 윈도우 인스턴스를 생성하는 것이며, 다중 윈도우 애플리케이션의 경우 애플리케이션 윈도우 인스턴스를 관리하기 위해 윈도우 관리 모듈이 필요합니다.

렌더링 프로세스 모듈 디렉토리

렌더링 프로세스는 웹 다중 페이지 응용 프로그램과 비슷하며 웹 페이지 작업을 관리합니다. 각 창은 독립적 인 페이지에 해당하며 로컬 저장소, indexDB 및 기타 로컬 데이터 저장소 인터페이스를 통해 서로 데이터를 공유하여 전체 애플리케이션의 작업을 공동으로 완료 할 수 있습니다. 기능에 따라 공통 모듈, 공통 구성 요소, 공유 데이터 및 정적 자원을 분리하십시오. 전체 구조는 다음과 같습니다.

렌더링 프로세스 디렉토리 구조 :

browserWindows-----------------窗口管理，渲染进程
    ├─components---------------通用组件模块
    ├─store--------------------数据共享模块
    ├─statics------------------静态资源模块
    └─src----------------------窗口业务模块
        ├─窗口A----------------窗口
        └─窗口B----------------窗口

1. 일반 구성 요소 모듈

공통 구성 요소 모듈은 전역 공통 구성 요소와 각 창 사이의 공통 비즈니스 구성 요소를 관리합니다.

2. 데이터 공유 모듈

데이터 공유 모듈에 의해 통합 관리되는 창간에 공유 데이터가 있습니다. 창간에 데이터를 공유하려면 localstorage 및 indexDB를 저장소로 사용하는 것이 좋습니다.

3. 정적 리소스 모듈

정적 리소스 모듈은 프로그램에서 사용하는 미디어 리소스, 글꼴 등을 관리합니다.

4. 윈도우 비즈니스 모듈

윈도우에 해당하는 웹 페이지와 웹 페이지에서 실행되는 js 스크립트는 윈도우 비즈니스 모듈에서 관리합니다.

요약하자면

요약하면 전체 애플리케이션 구조가 다음 그림에 표시됩니다.

디렉토리 구조는 다음과 같습니다.

app----------------------------应用程序代码目录
├─main.js----------------------程序启动入口，主进程
├─common-----------------------通用模块
├─log--------------------------日志模块
├─config-----------------------配置模块
├─ipc--------------------------进程间模块
├─appNetwork-------------------应用通信模块
└─browserWindows---------------窗口管理，渲染进程
    ├─components---------------通用组件模块
    ├─store--------------------数据共享模块
    ├─statics------------------静态资源模块
    └─src----------------------窗口业务模块
        ├─窗口A----------------窗口
        └─窗口B----------------窗口

이 기사는 Electron의 가장 기본적인 디렉토리 구조에 대한 간략한 소개를 제공합니다. 모든 사람이 이미 개념을 가지고 있다는 것을 읽어야합니다. 다음 기사에서는 기사에서 언급 한 주요 프로세스와 렌더링 프로세스, 그리고 이들 간의 의사 소통에 대해 오랫동안 이야기 할 것입니다.