Electron 알아보기
Electron의 시작점으로 다음과 같이
https://github.com/electron/electron-quick-start
에서 샘플프로그램의 소스를 볼 수 있다.
샘플프로그램 시작하기
다음의 명령어로 샘플프로그램을 local로 복사해 온다.
git clone https://github.com/electron/electron-quick-start quick-star
저장소의 history를 정리해준다.
git init
그러면 다음과 같은 메시지를 볼 수있을 것이다.
Reinitialized existing Git repository in /Users/<username>/Code//quick-start/.git
다음과 같은 명령어로 필요한 모듈을 설치해 준다.
npm install
다음과 같은 명령어로 Sample program을 실행한다.
npm start
Sample program 내부 보기
the package.json file
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^1.4.1"
}
}
• “name”: 어플리케이션의 이름, 보통 -를 사용하면 이어주고 lowercase로 적어준다.
“version”: 어플리케이션의 버전, 현재의 어플리케이션에 맞게 업데이트 해준다.
I• “description”: 어플리케이션에 대한 설명
• “main”: Electron에게 Main Process에 대한 코드 위치를 알려준다.
• “scripts”: Node Package Manager (npm) 에서 특적한 명령어를 실행하기 위해 어떤한 action을 취할 지 알려준다.
• “repository”: 코드가 저장되어 있는 저장소를 알려준다.
• “keywords”: 어플리케이션을 설명하는데 필요한 keyword를 알려준다.
• “author”: 제작자의 이름이나 회사 이름을 적는다.
• “license”: 라인센스정보를 알려준다.
• “Dependencies” and “devDependencies”: 필요젝트에 필요한 모듈 이름과 버전을 적어준다.
Main Process
Main Process에 대한 코드는 main.js file에 코딩.
Application에 대한 생명주기를 다루는 코드
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')
// 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
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
})
Sample의 Renderer Process 살펴보기
이전의 mainwondow process코드에서 볼 수 있듯이
Renderer Process는 mainWindow.loadURL() 호출에서 시작된다.
여기서 명시 index.html을 보면
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js <script>document.write(process.versions.node)</script>,
Chromium <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</html>
여러 script로 node process api를 호출
특히 renderer.js를 파일을 보면
이 태그는 어플리케이션에 대한 javascript의 시작점.
/ This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process
'개발?! > Electron.JS' 카테고리의 다른 글
| Electron 개발 환경 (0) | 2024.02.13 |
|---|---|
| Electron의 구조 (0) | 2024.02.12 |
