- HTML5, javascript, css 개념 필요
- npm, yarn 을 알아두면 좋음
npm : Node Package Manager
yarn : npm 이후 나온 매니저
(ps. webpack : gradle 과 비슷한 dependency 패키지 관련 모듈)
> package.json에서 설정
- "main"에서 메인 자바스크립트를 설정
- "script"에서 추가 명령어 설정
cf. json에서는 주석을 사용할 수 없다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | { "name": "helloworld", "version": "1.0.0", "description": "Hello Elec", "main": "main.js", "author": "redwiz", "license": "MIT", "scripts": { "start": "electron .", "build": "electron-packager . --out=build --asar --overwrite --all", "build:win": "electron-packager . --out=build --asar --overwrite --platform=win32 --arch=x64 --version=0.1" }, "dependencies": { "electron": "^1.8.4", "node": "^9.10.0", "react": "^16.3.0", "react-dom": "^16.3.0", "webpack": "^4.4.1" }, "devDependencies": { "electron-packager": "^11.2.0" } } | cs |
pacakge.json
> main으로 설정된 js에서 창이 열고 닫는 과정을 설정 (main.cpp와 비슷한 역할)
cf. 윈도우와 달리 맥os에서는 창을 닫는다고 바로 프로그램이 꺼지 않으므로 주의
(darwin으로 플랫폼을 구분하여 종료 시킴)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | const {app, BrowserWindow} = require('electron');let mainWindow;function onClosed() { mainWindow = null; } function createWindow() { mainWindow = new BrowserWidnow({ width : 640, height : 480 }); mainWindow.loadURL(`file://${__dirname}/index.html`); mainWindow.on('closed', onclosed); } app.on('window-all-closed', () => { if(process.platform != 'darwin'){ app.quit(); } }) app.on('activate', () =>{ if(!mainWindow){ createWindow(); } }) app.on('ready', () =>{ mainWindow = new BrowserWindow({ width : 640, height : 480 }); mainWindow.loadURL(`file://${__dirname}/index.html`); mainWindow.on('closed', onClosed);}) | cs |
main.js
> 웹 기반이므로 창을 열 때 loadURL로 index.html을 열어서 진행한다
> 창을 닫는 것은 열때 객체 생성을 했기 때문에 null을 하여서 창을 닫도록 한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/style.css" rel="stylesheet"> <title>Document</title> </head><body> <h1 id="greeting"></h1> </body> <script> const greeting = require('./greeting.json'); const header = document.querySelector('#greeting'); header.textContent = greeting.message; </script></html> | cs |
index.html
> index.html 부분에는 별거 없고 vscode에서 html5 쓰면 틀을 자동으로 만들어 준다.
> 첫줄 <!DOCTYPE html>이 html5 doctype 선언
'web prog > Electron' 카테고리의 다른 글
| Electron DevTools Installer (0) | 2018.04.06 |
|---|