\uc6f9 \uae30\uc220\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub370\uc2a4\ud06c\ud1b1 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \uac83\uc740 \ub9ce\uc740 \uac1c\ubc1c\uc790\ub4e4\uc5d0\uac8c \ub9e4\ub825\uc801\uc778 \uc120\ud0dd\uc785\ub2c8\ub2e4. Electron<\/strong>\uc740 JavaScript, HTML \ubc0f CSS\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud06c\ub85c\uc2a4 \ud50c\ub7ab\ud3fc \ub370\uc2a4\ud06c\ud1b1 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\uac8c \ud574\uc8fc\ub294 \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc758 \uae30\ubcf8 \ub2e8\uacc4\uc640 \uac04\ub2e8\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc744 \uc18c\uac1c\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n Electron\uc740 GitHub\uc5d0\uc11c \uac1c\ubc1c\ud55c \uc624\ud508 \uc18c\uc2a4 \ud504\ub808\uc784\uc6cc\ud06c\ub85c, Node.js\uc640 Chromium\uc744 \uae30\ubc18\uc73c\ub85c \ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uac1c\ubc1c\uc790\ub294 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uae30\ucd08\ub85c \ub370\uc2a4\ud06c\ud1b1 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc27d\uac8c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n Electron\uc758 \uc8fc\uc694 \uc7a5\uc810\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\uae30 \uc704\ud574\uc11c\ub294 Node.js\uc640 npm(Node Package Manager)\uc774 \ud544\uc694\ud569\ub2c8\ub2e4. \uc774 \ub450 \uac00\uc9c0\ub97c \uc124\uce58\ud558\ub294 \uac83\ubd80\ud130 \uc2dc\uc791\ud558\uc138\uc694.<\/p>\n Node.js\uc640 npm\uc774 \uc124\uce58\ub418\uc5c8\uc73c\uba74, \ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac\ub97c \ub9cc\ub4e4\uace0 \ucd08\uae30\ud654\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n \uc704 \uba85\ub839\uc5b4\ub294 \uc0c8\ub85c\uc6b4 \ub514\ub809\ud1a0\ub9ac `my-electron-app`\uc744 \ub9cc\ub4e4\uace0, \uae30\ubcf8 \ud328\ud0a4\uc9c0.json \ud30c\uc77c\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n \uc774\uc81c Electron\uc744 \uc124\uce58\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc544\ub798 \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uc5ec Electron\uc744 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n \uc774 \uba85\ub839\uc5b4\ub294 Electron\uc744 \uac1c\ubc1c \uc758\uc874\uc131\uc73c\ub85c \uc124\uce58\ud569\ub2c8\ub2e4.<\/p>\n Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uae30\ubcf8 \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:<\/p>\n \uac01 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \ub2e4\uc74c\uc758 \ub0b4\uc6a9\uc744 \ucd94\uac00\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n \uc704 \ucf54\ub4dc\ub294 Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uae30\ubcf8\uc801\uc778 \uba54\uc778 \ud504\ub85c\uc138\uc2a4\ub97c \uc124\uc815\ud569\ub2c8\ub2e4. \uc774\uc81c \ubaa8\ub4e0 \uc124\uc815\uc774 \ub05d\ub0ac\ub2e4\uba74, \uc774\uc81c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc2e4\ud589\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc544\ub798 \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uc138\uc694.<\/p>\n \uc774 \uba85\ub839\uc5b4\ub294 \ud604\uc7ac \ub514\ub809\ud1a0\ub9ac\uc5d0\uc11c Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4. \uc774\uc81c \uac04\ub2e8\ud55c Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \ud654\uba74\uc5d0 \ub098\ud0c0\ub0a0 \uac83\uc785\ub2c8\ub2e4.<\/p>\n \uc774\uc640 \uac19\uc774 Electron\uc744 \uc774\uc6a9\ud558\uc5ec \uac04\ub2e8\ud55c \ub370\uc2a4\ud06c\ud1b1 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uc558\uc2b5\ub2c8\ub2e4. Electron\uc740 \uc6f9 \uac1c\ubc1c \uae30\uc220\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud06c\ub85c\uc2a4 \ud50c\ub7ab\ud3fc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc27d\uac8c \ub9cc\ub4e4 \uc218 \uc788\ub294 \uac15\ub825\ud55c \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uace0\ub824\ud55c UI \ub514\uc790\uc778\uacfc \ub2e4\uc591\ud55c Node.js \ubaa8\ub4c8\uc744 \ud65c\uc6a9\ud574 \ub354\uc6b1 \ud48d\ubd80\ud55c \uae30\ub2a5\uc744 \uac00\uc9c4 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n Electron\uc744 \ud1b5\ud574 \ub354 \ub9ce\uc740 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ub3c4\uc804\ud574 \ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Electron \uc18c\uac1c<\/h2>\n
\n
Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c \ub2e8\uacc4<\/h2>\n
1. \uac1c\ubc1c \ud658\uacbd \uc124\uc815<\/h3>\n
sudo apt install nodejs npm<\/code><\/pre>\nmkdir my-electron-app\ncd my-electron-app\nnpm init -y<\/code><\/pre>\n2. Electron \uc124\uce58<\/h3>\n
npm install electron --save-dev<\/code><\/pre>\n3. \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uad6c\uc870 \uc124\uc815<\/h3>\n
\n
main.js<\/code>: \uba54\uc778 \ud504\ub85c\uc138\uc2a4 \ud30c\uc77c (\uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ubc31\uadf8\ub77c\uc6b4\ub4dc\uc5d0\uc11c \uc2e4\ud589).<\/li>\nindex.html<\/code>: \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uc704\ud55c HTML \ud30c\uc77c.<\/li>\npackage.json<\/code>: \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uba54\ud0c0\ub370\uc774\ud130\uc640 \uc124\uc815.<\/li>\n<\/ul>\ntouch main.js index.html<\/code><\/pre>\n4. \uba54\uc778 \ud504\ub85c\uc138\uc2a4 \uc124\uc815<\/h3>\n
main.js<\/code> \ud30c\uc77c\uc5d0 \ub2e4\uc74c\uc758 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\nconst { app, BrowserWindow } = require('electron');\n\nlet mainWindow;\n\nfunction createWindow() {\n mainWindow = new BrowserWindow({\n width: 800,\n height: 600,\n webPreferences: {\n nodeIntegration: true,\n }\n });\n\n mainWindow.loadFile('index.html');\n\n mainWindow.on('closed', function () {\n mainWindow = null;\n });\n}\n\napp.on('ready', createWindow);\n\napp.on('window-all-closed', function () {\n if (process.platform !== 'darwin') {\n app.quit();\n }\n});\n\napp.on('activate', function () {\n if (mainWindow === null) {\n createWindow();\n }\n});<\/code><\/pre>\nBrowserWindow<\/code>\ub97c \uc0dd\uc131\ud558\uc5ec HTML \ud30c\uc77c\uc744 \ub85c\ub4dc\ud569\ub2c8\ub2e4.<\/p>\n5. HTML \ud30c\uc77c \uc124\uc815<\/h3>\n
index.html<\/code> \ud30c\uc77c\uc5d0 \uc544\ub798\uc640 \uac19\uc740 \ub0b4\uc6a9\uc744 \ucd94\uac00\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<!DOCTYPE html>\n<html lang=\"ko\">\n<head>\n <meta charset=\"UTF-8\">\n <title>\uac04\ub2e8\ud55c Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158<\/title>\n<\/head>\n<body>\n <h1>\uc548\ub155\ud558\uc138\uc694! Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc785\ub2c8\ub2e4.<\/h1>\n <p>\uc5ec\uae30\ub294 \uae30\ubcf8\uc801\uc778 Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158 UI\uc785\ub2c8\ub2e4.<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n6. \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc2e4\ud589<\/h3>\n
npx electron .<\/code><\/pre>\n\uacb0\ub860<\/h2>\n