electron mainprocess
TRANSCRIPT
Electron Main Process 엿보기
Electron
Electron
Electron은 Main Process / Renderer Process의 조합
• 이름만 유추해 보면 화면에서 Rendering 관련 역할을 하고 안하고에 따라서 달라진다.
• 실제로도 그렇다.
• 식별자를 통해서, 그리고 간단한 테스트를 통해서 구별이 가능함 (뒤에 가서 다루겠음)
Electron
Main Process만 한번 살펴보자
• Main Process란?
• Web Page Manager
• 웹페이지를 생성하고 관리하는 역할을 한다
• 웹페이지는 여러개 생성할 수 있다.
• 한개의 메인프로세스가 여러개의 웹페이지를 관리 가능
• 하지만 웹페이지에 관련한 직접적인 일은 하지 않음
Electron
Main Process만 한번 살펴보자
• Main Process란?
• Web Page Manager
• 하지만 웹페이지에 관련한 직접적인 일은 하지 않음
• Renderer Process가 대신 일함
• 한개의 Renderer Process가 한개의 웹페이지에서 직접 일함
• 메인프로세스가 명령을 하고, Renderer Process가 요청을 하면 일을 처리해주고 결과를 내려준다.
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]라는 에러가 발생
Electron
Main Process는 어떻게 작동하나?
• process
• 어디서든지 접근 가능한 Global Object
• NodeJS의 process 다른점이 몇가지 존재한다
• process.type, process.versions, process.resourcePath, process.mas 등등
• 환경마다 process는 다르다
• process의 타입 식별자(process.type)에 따라서 구분이 가능
Electron
Main Process, Renderer Process 구분하기
• process.type이 어떤환경의 process인지 말해준다.
• console.log(process.type === ‘browser’ ? ‘Main Process’ : ‘Renderer’); // 이거를 Main 코드와 HTML 코드에 각각 심어보자
• 이제 호적등본 다 때서 관계가 확실해진다 :)
Electron
Renderer Process가 여러개라면?
• process.pid
• console.log(process.pid); // 웹 페이지를 여러개 생성하여 pid값을 비교
• 동일한 HTML일지라도, 웹 페이지가 다르면 식별자가 다르다.
• 웹페이지별 Renderer process가 다르다는걸 보여줌.
Electron
Main Process API들 몇몇 살펴보기
• Main/Renderer process들의 api가 다르다, 하지만 같이 쓸 수 있는 api 도 존재한다.
• app
• Application의 생성주기를 관리하는 객체
• 생성주기 이벤트에 따라서 액션을 지정할 수 있다.
• app.on(‘ready’, function(){}); 도 액션 주기중의 하나
Electron
Main Process API들 몇몇 살펴보기
• Main/Renderer process들의 api가 다르다, 하지만 같이 쓸 수 있는 api 도 존재한다.
• app
• Application의 생성주기를 관리하는 객체
• 생성주기 이벤트에 따라서 액션을 지정할 수 있다.
• app.on(‘ready’, function(){}); 도 액션 주기중의 하나
Electron
Main Process API들 몇몇 살펴보기
• app
• Application의 생성주기를 관리하는 객체
• 생성주기 이벤트에 따라서 액션을 지정할 수 있다.
• before-quit, will-finish-launching, ready, close…..
• app.on(‘ready’, function(){}); 도 액션 주기중의 하나
Electron
Main Process API들 몇몇 살펴보기
• BrowserWindow
• 웹페이지 생성자
• Native properties들을 다양하게 설정 할 수 있다.
• width, height, kiosk, icon, frame…..
• 생성주기 이벤트에 따라서 액션을 지정할 수 있다.
• close, page-title-updated, focus……
Electron
Main Process API들 몇몇 살펴보기
• BrowserWindow
• 웹페이지 생성자
• Native properties들을 다양하게 설정 할 수 있다.
• width, height, kiosk, icon, frame…..
• 생성주기 이벤트에 따라서 액션을 지정할 수 있다.
• close, page-title-updated, focus……
Electron
Main Process API들 몇몇 살펴보기
• ipcMain
• message handler
• Main/Renderer process간의 통신 역할을 한다.
• Renderer에서 필요시, Main Process에 요청을 통해 특정 기능들을 처리 가능
• 동기 / 비동기 통신 가능
Electron
Main Process API들 몇몇 살펴보기
• ipcMain
• message handler
• Main/Renderer process간의 통신 역할을 한다.
• Renderer에서 필요시, Main Process에 요청을 통해 특정 기능들을 처리 가능
• 동기 / 비동기 통신 가능
Electron
여기까지…