DesktopApplication 개발을 위한 Electron에 대해서 간단하게 공부를 해 보았습니다. 그중에서도 핵심부분인 Main Process에 대해서 간단하게 추려서 AngularJS2 & Electron 스터디 모임에서 발표한 내용을 업로드합니다. 몇몇 API만 추려서 설명하기 때문에 나머지 부분들은 공식 문서를 통해서 부족한 부분들을 채우시면 될 것 같습니다.

1. Electron Main Process
엿보기
Electron

2. Electron
자기소개
이대환
Email : redface0512@gmail.com
Twitter : JazzyRedface

3. Electron
Electron은 Main Process / Renderer
Process의 조합
• 이름만 유추해 보면 화면에서 Rendering 관련 역할을 하고 안하고에 따라서 달라
진다.
• 실제로도 그렇다.
• 식별자를 통해서, 그리고 간단한 테스트를 통해서 구별이 가능함 (뒤에 가서 다
루겠음)

4. Electron
Main Process만 한번 살펴보자
• Main Process란?
• Web Page Manager
• 웹페이지를 생성하고 관리하는 역할을 한다
• 웹페이지는 여러개 생성할 수 있다.
• 한개의 메인프로세스가 여러개의 웹페이지를 관리 가능
• 하지만 웹페이지에 관련한 직접적인 일은 하지 않음

5. Electron
Main Process만 한번 살펴보자
• Main Process란?
• Web Page Manager
• 하지만 웹페이지에 관련한 직접적인 일은 하지 않음
• Renderer Process가 대신 일함
• 한개의 Renderer Process가 한개의 웹페이지에서 직접 일함
• 메인프로세스가 명령을 하고, Renderer Process가 요청을 하면 일을 처리
해주고 결과를 내려준다.

6. Electron
Main Process는 어떻게 작동하나?
• 웹페이지를 생성해보자
• var app = require(‘app’); // 어플리케이션 생성주기 컨트롤 객체
• app.on(‘ready’, function () { // Init }); // 웹페이지 생성을 위한 준비가 다
되었을때의 상태, 준비가 되어야 웹페이지 생성이 가능하다.
• var mainWindow = new BrowserWindow({width: 넓이, height: 높이}); //
웹페이지를 띄우기 위한 인스턴스 생성
• mainWindow.loardURL(‘정적 html 파일 경로’); // 실제로 부르기 위한 정적페
이지 호출
• 위의 mainWindow는 app.on(‘ready’, function (){}); 안에서 실행되어야
한다, 그렇지 않으면 [Error: Cannot create BrowserWindow before
app is ready]라는 에러가 발생

7. Electron
Main Process는 어떻게 작동하나?
• process
• 어디서든지 접근 가능한 Global Object
• NodeJS의 process 다른점이 몇가지 존재한다
• process.type, process.versions, process.resourcePath, process.mas
등등
• 환경마다 process는 다르다
• process의 타입 식별자(process.type)에 따라서 구분이 가능

8. Electron
Main Process, Renderer Process 구분하기
• process.type이 어떤환경의 process인지 말해준다.
• console.log(process.type === ‘browser’ ? ‘Main Process’ :
‘Renderer’); // 이거를 Main 코드와 HTML 코드에 각각 심어보자
• 이제 호적등본 다 때서 관계가 확실해진다 :)

9. Electron
Renderer Process가 여러개라면?
• process.pid
• console.log(process.pid); // 웹 페이지를 여러개 생성하여 pid값을 비교
• 동일한 HTML일지라도, 웹 페이지가 다르면 식별자가 다르다.
• 웹페이지별 Renderer process가 다르다는걸 보여줌.

10. Electron
Main Process API들 몇몇 살펴보기
• Main/Renderer process들의 api가 다르다, 하지만 같이 쓸 수 있는 api 도 존재
한다.
• app
• Application의 생성주기를 관리하는 객체
• 생성주기 이벤트에 따라서 액션을 지정할 수 있다.
• app.on(‘ready’, function(){}); 도 액션 주기중의 하나

11. Electron
Main Process API들 몇몇 살펴보기
• Main/Renderer process들의 api가 다르다, 하지만 같이 쓸 수 있는 api 도 존재
한다.
• app
• Application의 생성주기를 관리하는 객체
• 생성주기 이벤트에 따라서 액션을 지정할 수 있다.
• app.on(‘ready’, function(){}); 도 액션 주기중의 하나

12. Electron
Main Process API들 몇몇 살펴보기
• app
• Application의 생성주기를 관리하는 객체
• 생성주기 이벤트에 따라서 액션을 지정할 수 있다.
• before-quit, will-finish-launching, ready, close…..
• app.on(‘ready’, function(){}); 도 액션 주기중의 하나

13. Electron
Main Process API들 몇몇 살펴보기
• BrowserWindow
• 웹페이지 생성자
• Native properties들을 다양하게 설정 할 수 있다.
• width, height, kiosk, icon, frame…..
• 생성주기 이벤트에 따라서 액션을 지정할 수 있다.
• close, page-title-updated, focus……

14. Electron
Main Process API들 몇몇 살펴보기
• BrowserWindow
• 웹페이지 생성자
• Native properties들을 다양하게 설정 할 수 있다.
• width, height, kiosk, icon, frame…..
• 생성주기 이벤트에 따라서 액션을 지정할 수 있다.
• close, page-title-updated, focus……

15. Electron
Main Process API들 몇몇 살펴보기
• ipcMain
• message handler
• Main/Renderer process간의 통신 역할을 한다.
• Renderer에서 필요시, Main Process에 요청을 통해 특정 기능들을 처
리 가능
• 동기 / 비동기 통신 가능

16. Electron
Main Process API들 몇몇 살펴보기
• ipcMain
• message handler
• Main/Renderer process간의 통신 역할을 한다.
• Renderer에서 필요시, Main Process에 요청을 통해 특정 기능들을 처
리 가능
• 동기 / 비동기 통신 가능

17. Electron
여기까지…