Udemy
Master Electron: Desktop Apps with HTML, JavaScript & CSS를 들으며 정리한 노트입니다.
Install & Run
작업 할 폴더를 열어 줍니다.
폴더에서 $ git clone https://github.com/stackacademytv/master-electron.git 명령어를 사용하여 electron 환경을 초기화해줍니다.
master-electron 폴더 내부로 이동하여, $ npm install을 통해 package를 설치해줍니다.
$ npm list --depth=0 명령어를 입력하여, 아래와 같이 잘 입력되었음을 확인할 수 있습니다.
$ npm start을 입력하면, electron이 실행되는 것을 확인할 수 있습니다.
창을 닫고,
$ npm install -g electron을 입력하면 electron 명령어를 사용할 수 있습니다.
$ electron을 입력하면 demo앱을 확인할 수 있습니다.
App Structure
Main Process
- 단 하나만 가짐
- Chromium 브라우저의 인스턴스를 생성 (Renderer)
- node.js 기반으로 작동
package.json의 main부분에 시작 지점을 정의할 수 있음
main.js 파일 내부
// Modules
const {app, BrowserWindow} = require('electron')
// 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 // Node.js를 렌더러 프로세스에 통합한다는 의미
}
})
// Load index.html into the new BrowserWindow
mainWindow.loadFile('index.html') // Index 파일로 -> 시작점
// Open DevTools - Remove for PRODUCTION!
mainWindow.webContents.openDevTools();
// Listen for window being closed
mainWindow.on('closed', () => {
mainWindow = null
})
}
// Electron `app` is ready
// 앱 실행! => 위에서 정의한 createWindow() 함수 호출
app.on('ready', createWindow)
// Quit when all windows are closed - (Not macOS - Darwin)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// When app icon is clicked and app is running, (macOS) recreate the BrowserWindow
app.on('activate', () => {
if (mainWindow === null) createWindow()
})
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') // 브라우저 창에서 실행될 간단한 JavaScript 파일인 함수 렌더러 JS가 필요
</script>
</body>
</html>
nodemon
electron의 package에 기본적으로 기술되어 있어서 바로 사용이 가능합니다.
$ npm run watch를 사용하면 자동으로 앱을 재시작 해줍니다.
Using Native Node Modules
npm을 기본적으로 사용하기 때문에, npm의 추가 module들을 사용할 수 있습니다.
색상 관련 모듈
$ npm i colors
js 내부에서 아래와 같이 module을 가져와서 사용
const colors = require('colors')
암호화 모듈
$ npm i bcrypt 비밀번호를 헤쉬로 암호화해주는 모듈
const bctpt = require('bctpt')
bcrypt.genSalt(saltRounds, function(err, salt) {
bcrypt.hash(myPlaintextPassword, 10, function(err, hash) {
// Store hash in your password DB.
});
});
모듈 실행 시 오류가 발생한다면???
npm의 버젼이 맞지 않아 발생한 문제입니다. 아래와 같이 해결할 수 있습니다.
$ npm install -g electron-rebuild
$ electron-rebuild bcrypt
Debugging
main.js에 아래와 같은 문장이 있습니다.
// Open DevTools - Remove for PRODUCTION!
mainWindow.webContents.openDevTools();
이렇게 기술되어 있기에, 앱이 실행되면 자동으로 chrome dev tool이 열립니다.
$ electron --inspect=5858 .을 입력하고 실행하고
일반 크롬 브라우저에서 chrome://inspect를 입력합니다.
위와 같은 설정창에서 Configure > localhost:5858을 입력하면, 아래와 같이 Remote할 수 있습니다.
inspect를 눌러서 debug를 할 수 있습니다.
js 파일에서 debugger를 입력하면, 해당 부분이 중단점으로 작동합니다.
$ electron --inspect-brk=5858 .
위와 같이 명령어를 입력하면, 첫 번째 줄부터 중단되기에 한 줄 씩 실행이 가능합니다.
Resetting
$ npm run reset을 입력하면 프로젝트가 reset됩니다.
C
Contents