Electron mainprocess
3 likes1,139 views
DesktopApplication 개발을 위한 Electron에 대해서 간단하게 공부를 해 보았습니다. 그중에서도 핵심부분인 Main Process에 대해서 간단하게 추려서 AngularJS2 & Electron 스터디 모임에서 발표한 내용을 업로드합니다. 몇몇 API만 추려서 설명하기 때문에 나머지 부분들은 공식 문서를 통해서 부족한 부분들을 채우시면 될 것 같습니다.
![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]라는 에러가 발생](https://image.slidesharecdn.com/electron-mainprocess-151206120818-lva1-app6891/85/Electron-mainprocess-6-320.jpg)
Electron mainprocess
- 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 여기까지…