메인 프로세스 실행하기
모든 Electron application의 entry point는 main 스크립트입니다. 이 스크립트는 Node.js 환경에서 실행되고 앱의 생명 주기 제어를 책임, 기본 인터페이스 표시, 권한 있는 작업 수행, 그리고 Renderer 프로세스를 관리하는 메인 프로세스를 제어합니다. (나중에 더 자세히 다룹니다.)
실행하는 동안, Electron은 app scaffolding 단계에서 설정했어야 하는 앱의 package.json의 main 필드에서 이 스크립트를 찾습니다.
main 스크립트를 초기화하기 위해, 프로젝트의 루트 폴더에 빈 main.js 파일을 만드세요
참고 : 만약 start 스크립트를 다시 실행한다면, 앱은 더 이상 어떠한 에러도 발생하지 않습니다! 그러나 main.js에 어떠한 코드도 작성하지 않았기 때문에 아무 동작도 하지 않을 것입니다.
웹 페이지 만들기
우리의 Application을 위한 창을 만들기 전에, 그 안에 불러올 내용을 만들어야 합니다. Electron 안에서 각 창은 로컬 HTML 파일 또는 원격 URL을 통해 내용을 불러와 표시합니다.
이 자습서를 위해, 다음을 수행할 것입니다. index.html 파일은 프로젝트의 로컬 폴더에 생성하세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>참고 : HTML 문서를 보면, body 텍스트에서 버전 넘버가 빠진 것을 발견할 수 있습니다. 우리는 이를 JavaScript를 사용해 손수 채울 것입니다.
브라우저 창에서 웹 페이지 열기
이제 웹 페이지를 가지고 있고, 이를 Appliction 창에서 불러옵니다. 이를 위해서는 2개의 Electron 모듈이 필요합니다.
- app 모듈은 Application의 이벤트 생명 주기를 제어합니다.
- BrowserWindow 모듈은 Application 창을 생성하고 관리합니다.
메인 프로세스가 Node.js에서 동작하기 때문에, 파일 가장 위에서 CommonJS 모듈을 삽입할 수 있습니다.
cosnt {app, BrowserWindow} = require('electron')그 다음, index.html을 새 BrowserWindow 인스턴스에 로드하는 createWindow() 함수를 추가합니다.
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}다음으로, createWindow() 함수를 창을 열기 위해 호출합니다.
Electron에서 브라우저 창은 app 모듈의 ready 이벤트가 발생한 후에만 생성할 수 있습니다. app.whenReady() API를 통해 이 이벤트를 기다릴 수 있습니다. whenReady()의 Promise가 해결된 후 createWindow()를 호출할 수 있습니다.
app.whenReady().then(() => {
createWindow()
})참고: 이 단계에서 Electron Application이 성공적으로 웹 페이지를 표시하는 창을 열게됩니다!
창의 생명 주기 관리하기
이제 브라우저 창을 열 수 있지만, 각 플렛폼에 기본적인 느낌을 주기 위해서는 boilerplate 코드가 추가적으로 필요합니다. Application 창은 각 운영체제에서 다르게 작동하고, Electron은 앱에서 이러한 규칙을 구현하는 책임을 개발자에게 넘깁니다.
일반적으로 프로세스 전역 플랫폼 속성을 사용해 특정 운영체제를 위한 코드를 실행할 수 있습니다.
모든 창이 닫혔을 때 앱 종료하기 (Windows & Linux)
Windows와 Linux에서 모든 창을 종료하면 일반적으로 모든 Application을 종료합니다.
이를 구현하기 위해 app 모듈의 'window-all-closed' 이벤트를 수신하고 사용자가 macOS가 아닐 경우(darwin) app.quit()를 호출합니다.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})열려 있는 창이 없을 경우에 열기 (macOS)
Linux와 Windows는 창이 열리지 않으면 종료되지만, macOS 앱은 일반적으로 창이 열리지 않아도 계속 실행되며, 사용 가능한 창이 없을 때 앱을 활성화하면 새 창을 엽니다.
이를 구현하기 위해, app 모듈의 activate 모듈을 수신하고 어떠한 브라우저 창도 열려 있지 않다면 createWindow() 메소드를 호출합니다.
ready 이벤트 전에 창을 생성할 수 없기 때문에, 앱이 초기화 된 후 activate 이벤트를 수신해야 합니다. whenReady( ) 콜백 내부에서 이벤트 리스너를 연결하여 실행합니다.
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})참고 : 이 단계에서 창 컨트롤이 완벽해야 합니다!
