728x90
▷ electron 문서에서 제공하는 electron앱을 실행시켰다.
# 저장소를 클론합니다
git clone https://github.com/electron/electron-quick-start
# 저장소 안으로 들어갑니다
cd electron-quick-start
# 애플리케이션의 의존성 모듈을 설치한 후 실행합니다
npm install && npm start
electron-quick-start의 구조
main.js
const {app, BrowserWindow} = require('electron')
// app: 애플리케이션 생성주기를 조작하는 모듈
// BrowerWindow: 네이티브 브라우저 창을 만드는 모듈
const path = require('path')
function createWindow () {
// mainWIndow: 윈도우 객체 생성
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
}) // 새로운 브라우저 창을 생성
// 현재 디렉터리의 index.html을 로드
mainWindow.loadFile('index.html')
// 개발자 도구 열기
// mainWindow.webContents.openDevTools()
}
app.whenReady().then(() => {
createWindow() // 윈도우 생성
// macOs에선 보통 독 아이콘이 클리되고 나서도 열린 윈도우가 없으면, 새로운 윈도우를 다시 생성
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 모든 창이 닫히면 애플리케이션 종료
app.on('window-all-closed', function () {
// macOs의 대부분의 애플리케이션은 유저가 Cmd+Q 커맨드로 확실하게 종료하기 전까지 메뉴바에 남아 계속 실행된다.
if (process.platform !== 'darwin') app.quit()
})
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'; style-src 'self' 'unsafe-inline'">
<link href="./styles.css" rel="stylesheet">
<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>.
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>
앱 실행시키기
npm start
# 참고 사이트 : https://tinydew4.github.io/electron-ko/docs/tutorial/quick-start/#section-3
시작하기
시작하기소개Electron은 자바스크립트와 함께 제공된 풍부한 네이티브 API를 사용하여 멋진 데스크탑애플리케이션을 만들 수 있도록 해주는 프레임워크입니다. 이 프레임워크의 Node.js는 웹서버
tinydew4.github.io
728x90
'IT > electron' 카테고리의 다른 글
| [electron] electron에서 console.log 보는법(with React) (0) | 2022.08.11 |
|---|---|
| [electron] electron과 react 함께 사용하기 (0) | 2022.08.10 |
| [electron] 시작하기 (0) | 2022.08.10 |