๐ขElectron์ด๋?
์ผ๋ ํธ๋ก ์ด๋ ๋ฐ์คํฌํฑ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋๊ตฌ
Electron์ ๋ฐ์คํฌํฑ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํ๊ธฐ ์ํ ์คํ์์ค ํ๋ ์์ํฌ์ด๋ค. HTML, CSS, JavaScript์ ๊ฐ์ ์น ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ Windows, macOS, Linux์์ ์คํ ๊ฐ๋ฅํ ํฌ๋ก์คํ๋ซํผ ๋ฐ์คํฌํฑ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์๋ค. ๋ฌผ๋ก Angular, React, Vue๋ ์ฌ์ฉ๊ฐ๋ฅํ๋ค.
์ถ๊ฐ๋ก ๋งค๋ ๋ง๋ค ๊ฐฑ์ ๋๋ ํ๋ก ํธ์๋ ๋ก๋๋งต ๋ง์ง๋ง ์ชฝ์์ electron์ ์ฐพ์๋ณผ ์ ์๋ค. ๊ทธ๋งํผ ํ๋ก ํธ์๋์์๋ ๋๋ฆ ์ค์ํ ์ญํ ์ ์ฐจ์งํ๊ณ ์๋ค๋ ๊ฑฐ ์๋๊น?
โ Electron์ ํ์ฉํ ๋ํ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์
์ฐ๋ฆฌ๊ฐ ์๊ณ ์๋ ๋ง์ ์ฑ๋ค์ด ์ด๋ฏธ electron์ ์ด์ฉํ๊ณ ์๊ณ ์ถ๊ฐ๋ก notion,postman๋ electron์ ํ์ฉํ ๋ฐ์คํฌํ ์ฑ์ด๋ค!
โ Electron์ ์ฅ์ ๊ณผ ๋จ์
์ฅ์
- ํฌ๋ก์ค ํ๋ซํผ ์ง์์ผ๋ก ๊ฐ๋ฐ ๋น์ฉ ์ ๊ฐ
- ์น ๊ธฐ์ ๊ธฐ๋ฐ์ผ๋ก ๊ธฐ์กด ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์๊ฒ ์น์
- Node.js ๋ฐ Electron API๋ก ๊ฐ๋ ฅํ ๊ธฐ๋ฅ ์ ๊ณต
๋จ์
- ์๋์ ์ผ๋ก ๋์ ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋
- ์ ํ๋ฆฌ์ผ์ด์ ํฌ๊ธฐ ์ฆ๊ฐ (Chromium ํฌํจ)
- ์ฑ๋ฅ ์ด์ (ํนํ ๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ )
โ Electron ์ค์น ๋ฐ ์คํ
์ค์น
npm install --save-dev electron
๊ทธ๋ฆฌ๊ณ ๋์ package.json์ ์์ ํด์ผ ํ๋ค. main์ main.js๋ฅผ ์ค์ ํ์ง ์์ผ๋ฉด Electron์ index.js๋ฅผ ๋ก๋ํ๋ ค๊ณ ํ ๊ฒ์ด๋ค.
// package.json
{
"name": "your-app",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}main.js
Electron์์ ๋ฉ์ธ ํ๋ก์ธ์ค ํ์ผ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ง์ ์ ์ด๋ฉฐ,
Electron API๋ฅผ ์ฌ์ฉํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ผ์ดํ์ฌ์ดํด์ ๊ด๋ฆฌํฉ๋๋ค.
const { app, BrowserWindow } = require('electron')
const path = require('path')
const isDev = require('electron-is-dev')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})
// ๊ฐ๋ฐ ๋ชจ๋์์๋ localhost:3000, ํ๋ก๋์
์์๋ build๋ ํ์ผ์ ๋ก๋
win.loadURL(
isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname, '../build/index.html')}`
)
// ๊ฐ๋ฐ์ ๋๊ตฌ ์ด๊ธฐ
if (isDev) {
win.webContents.openDevTools()
}
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
- app: ์ ํ๋ฆฌ์ผ์ด์ ์ ์๋ช ์ฃผ๊ธฐ๋ฅผ ๊ด๋ฆฌํ๋ Electron ๋ชจ๋. ์ ํ๋ฆฌ์ผ์ด์ ์ด ์์๋๊ณ ์ข ๋ฃ๋ ๋ ๋ฐ์ํ๋ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌ
- BrowserWindow: ์๋ก์ด ๋ธ๋ผ์ฐ์ ์ฐฝ์ ์์ฑํ๋ ๋ฐ ์ฌ์ฉ๋๋ ๋ชจ๋. ์ด ์ฐฝ์ HTML, CSS, JavaScript๋ฅผ ๋ ๋๋งํ์ฌ ๋ฐ์คํฌํ ์ ํ๋ฆฌ์ผ์ด์ UI๋ฅผ ์ ๊ณต.
- path: ํ์ผ ๊ฒฝ๋ก๋ฅผ ๋ค๋ฃฐ ์ ์๋ Node.js ๋ด์ฅ ๋ชจ๋๋ก, ๊ฒฝ๋ก๋ฅผ ์์ ํ๊ฒ ์ฒ๋ฆฌํ๋ ๋ฐ ์ฌ์ฉ.
- isDev: ํ์ฌ Electron ์ ํ๋ฆฌ์ผ์ด์ ์ด ๊ฐ๋ฐ ๋ชจ๋์ธ์ง ํ์ธํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ. ๊ฐ๋ฐ ๋ชจ๋์์๋ http://localhost:3000์์ ์ฑ์ ์คํํ๊ณ , ํ๋ก๋์ ๋ชจ๋์์๋ ๋น๋๋ ํ์ผ์ ๋ก๋.
index.html
<!DOCTYPE html>
<html lang="en">
<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'">
<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>.
</body>
</html>
์ ํ๋ฆฌ์ผ์ด์ ์คํ
npm start
๋ง์น๋ฉฐ.... ์ด ๊ธ์ ์ฐ๊ฒ ๋ ๊ณ๊ธฐ
2๋ฌ์ฌ๋์ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉฐ ์ฌ์ฉ์๋ฅผ ๋๋ฆฌ๊ธฐ ์ํด ์ด๊ฒ์ ๊ฒ ์๋ํด๋ดค์ง๋ง ์ผํ์ฑ ์ฌ์ฉ์๋ง ์ ์ ๋์ด๋ ๋ฟ ์ ๊ธฐ ์ฌ์ฉ์๋ฅผ ์ ์งํ๋ค๋ ๊ฒ์ด ์ผ๋ง๋ ์ด๋ ค์ด์ผ์ง ์๊ฒ ๋์๋ค. ๊ทธ๋์ electron์ ์ด์ฉํด์ ๋ฐ์คํฌํฑ ์ฑ์ ๋ง๋ค์์ผ๋ฉด ์กฐ๊ธ์ด๋ผ๋ ์ ๊ธฐ ์ฌ์ฉ์๊ฐ ๋์ง ์์์๊น๋ผ๋ ์์ฌ์์ electorn์ ๋ํด ๊ณต๋ถํ๊ณ ์ฝ๋์์ ์ด๋ป๊ฒ ํ์ฉํ๋์ง ์์๋ณด๊ณ ์ ์ด ๊ธ์ ์์ฑํ๊ฒ ๋์๋ค.
์ฐธ๊ณ ์๋ฃ
'Frontend > ๊ธฐํ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| SVG ํ์ฉํ๊ธฐ (0) | 2024.09.17 |
|---|
