나만 보는 일기장

[Electron] 01. Electron Application의 구조 본문

개발/Electron

[Electron] 01. Electron Application의 구조

Patrick0422 2022. 4. 16. 18:59

Electron Application은 기본적으로 Main Process와 Renderer Process 두 가지 프로세스로 나뉘어 동작합니다.

 

Main Process

Node.js

Main Process는 Node.js로 동작하는 프로세스로, 단 하나밖에 없습니다. Main Process는 필요에 따라 Renderer Process를 생성하게 됩니다.

우리가 앱을 실행하면 돌아가고 있는 이 터미널이 Main Process라고 할 수 있습니다.

 

Renderer Process

Chromium Browser

Main Process에서는 Chromium 브라우저의 객체를 만들어 HTML, CSS 등으로 구성된 앱의 Front-end 코드를 실행합니다. 이때 만들어진 객체를 바로 Renderer Process라고 합니다.

앱을 실행하면 나오는 우리에게 보이는 이 창이 바로 Renderer Process입니다. 하나의 애플리케이션은 필요에 따라

여러 개의 Renderer Process를 보유할 수 있습니다.

 

요약하자면 Main Process는 Node.js를 기반으로 동작하는 애플리케이션의 Back-end 혹은 Server-side 프로세스,

Renderer Process는 Chromium으로 동작하는 애플리케이션의 Front-end 혹은 Client-side 프로세스 프로세스라고 이해하면

될 것 같습니다.

 

이제 프로젝트 내부의 구성 요소들을 보며 직접 실행 과정을 보도록 하겠습니다.

{
  "name": "master-electron",
  "version": "1.0.0",
  "description": "Master Electron Course Code",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "watch": "nodemon --exec electron .",
    "reset": "git reset --hard"
  },
  "repository": "https://github.com/stackacademytv/master-electron",
  "keywords": [
    "Electron",
    "Master Electron",
    "demo"
  ],
  "author": "GitHub, Stackacademytv",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^9.0.0",
    "nodemon": "^2.0.0"
  },
  "dependencies": {}
}

▲ package.json

 

package.json을 확인해보면, 애플리케이션의 시작점이 main.js로 지정된 것을 알 수 있습니다. Electron이 호출되면, 이 package.json을 확인해 main.js를 Main Process로 실행하는 것입니다.

 

이제 main.js로 들어가 보겠습니다.

// Modules
const {app, BrowserWindow} = require('electron')

제일 먼저 자기 자신의 객체인 app과 Renderer Process를 만들기 위한 BrowserWindow를 할당합니다.

// Electron `app` is ready
app.on('ready', createWindow)

그다음 app이 준비 상태가 되면 createWindow 함수를 호출합니다.

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

// Create a new BrowserWindow when `app` is ready
function createWindow () {

  mainWindow = new BrowserWindow({
    width: 1000, height: 800,
    webPreferences: {
      // --- !! IMPORTANT !! ---
      // Disable 'contextIsolation' to allow 'nodeIntegration'
      // 'contextIsolation' defaults to "true" as from Electron v12
      contextIsolation: false,
      nodeIntegration: true
    }
  })

  // Load index.html into the new BrowserWindow
  mainWindow.loadFile('index.html')

  // Open DevTools - Remove for PRODUCTION!
  mainWindow.webContents.openDevTools();

  // Listen for window being closed
  mainWindow.on('closed',  () => {
    mainWindow = null
  })
}

createWindow()에서는 이제 넓이 1000, 높이 800의 BrowserWindow를 만들어 전역 변수로 만들어진 mainWindow에 할당해주는 것을 볼 수 있습니다. 애플리케이션 생명주기 내내 살아있는 main.js에 선언된 전역 변수이기 때문에, Garbage Collection 되는 것을 막을 수 있는 작지만 중요한 부분이라고 합니다.

 

어쨌든 이제 만들어진 Chromium 브라우저인 mainWindow가 표시할 콘텐츠를. loadFile()를 통해 불러옵니다.

위 코드를 보면 index.html을 불러오네요.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- !! IMPORTANT !! -->
    <!-- Content-Security-Policy no longer required. Will show warning in devtools. Can be ignored -->
    <!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'"> -->
    <title>Hello World!</title>
    <style>
      html { font-family: sans-serif; background: #2B2E3B; color: #9FEAF9; }
    </style>
  </head>
  <body>

    <h1>Hello Electron!</h1>
    <p>Build cross-platform desktop apps with JavaScript, HTML, and CSS</p>

    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
</html>

▲ index.html

위의 mainWindow에서 nodeIntegration 속성을 켜주었기 때문에, 모든 Node.js API를 사용할 수 있다고 합니다.

위 코드에서도 require() 함수를 통해 renderer.js 파일을 불러오는 것을 볼 수 있습니다.

 

Renderer Process에 대한 변경사항은 Ctrl+R을 통해 새로고침을 하여 프로그램을 종료하지 않고도 확인할 수 있으나,

Main Process에 대한 변경사항은 적용이 되지 않습니다. 프로그램 종료 없이 변경사항을 적용하기 위해서는 nodemon을 사용해, 애플리케이션을 시작할 때 npm start 대신 npm start watch를 해주면 nodemon이 알아서 변경사항이 저장될 때마다 다시 시작해준다고 합니다.

 

 

다음에는 Native Node 모듈들의 사용에 관해 공부해보겠습니다.

'개발 > Electron' 카테고리의 다른 글

[Electron] 00. Electron  (0) 2022.04.16
'개발/Electron' Related Articles more
Comments