Electron 공식문서를 정리한 글입니다.
createWindow()함수는 새로운BrowserWindow인스턴스에 웹 페이지를 로드하는 역할을 한다.
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}이 코드는 800x600인 새로운 BrowserWindow를 만든다. 그리고 이 창에 loadFile() 메서드를 사용해 index.html 파일을 로드하여 보여준다.
- 대부분의 Electron의 핵심 모듈은 Node.js의 비동기 이벤트 기반 아키텍쳐를 따르는 Event Emitter이다. (ex.
app모듈)
BrowserWindow는app모듈의 ready 이벤트가 발생한 후에만 생성할 수 있다.app.whenReady()API를 사용하여 이 이벤트를 기다릴 수 있고 이 프로미스가 이행된 후,createWindow()`를 호출할 수 있다.
app.whenReady().then(() => {
createWindow()
})각 웹페이지는 renderer 프로세스라고 불리는 별도의 프로세스에서 실행된다. renderer 프로세스는 Javascript API 및 도구에 접근할 수 있다. 이는 코드를 번들링하고 최소화하는데 webpack을 사용하거나 사용자 인터페이스를 구축하기 위해 React를 사용하는 것과 같은 작업에 해당한다.
-
각 운영체제에서 애플리케이션 창은 다르게 동작한다. Electron은 이러한 규약을 강제하지 않고, 코드에서 이를 구현할 수 있는 선택권을 제공한다.
-
Windows와 Linux에서 창을 닫는 것은 일반적으로 애플리케이션을 종료하는 것과 동일하다.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})반대로, macOS에서는 창이 열려있지 않아도 계속 실행된다. 따라서 창이 없는 상태에서 앱을 활성화하려면 새 창을 열어야 한다.
이 기능을 구현하기 위해, app 모듈의 activate 이벤트를 사용하고 기존의 createWindow() 메서드를 호출한다. 왜냐하면 창은 ready 이벤트 전에 생성할 수 없기 때문에 기존의 whenReady() 콜백 내부에서만 activate 이벤트를 청취해야 한다.
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})Summary
Electron applications are set up using npm packages. The Electron executable should be installed in your project's devDependencies and can be run in development mode using a script in your package.json file.
The executable runs the JavaScript entry point found in the main property of your package.json. This file controls Electron's main process, which runs an instance of Node.js and is responsible for your app's lifecycle, displaying native interfaces, performing privileged operations, and managing renderer processes.
Renderer processes (or renderers for short) are responsible for displaying graphical content. You can load a web page into a renderer by pointing it to either a web address or a local HTML file. Renderers behave very similarly to regular web pages and have access to the same web APIs.
