{"id":43336,"date":"2024-11-26T12:35:15","date_gmt":"2024-11-26T12:35:15","guid":{"rendered":"https:\/\/atmokpo.com\/w\/?p=43336"},"modified":"2024-11-26T12:35:15","modified_gmt":"2024-11-26T12:35:15","slug":"electron-019-electron%ea%b3%bc-%ed%94%84%eb%a1%a0%ed%8a%b8%ec%97%94%eb%93%9c-%ed%94%84%eb%a0%88%ec%9e%84%ec%9b%8c%ed%81%ac%ec%9d%98-%ed%86%b5%ed%95%a9-react-vue-js-angular-%eb%93%b1%ea%b3%bc","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/43336\/","title":{"rendered":"[Electron] 019. Electron\uacfc \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\uc758 \ud1b5\ud569, React, Vue.js, Angular \ub4f1\uacfc\uc758 \ud1b5\ud569 \ubc29\ubc95"},"content":{"rendered":"

<\/p>\n

\n Electron\uc740 JavaScript, HTML \ubc0f CSS\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub370\uc2a4\ud06c\ud1b1 \uc751\uc6a9 \ud504\ub85c\uadf8\ub7a8\uc744 \ub9cc\ub4e4 \uc218 \uc788\ub3c4\ub85d \ud558\ub294 \uc624\ud508 \uc18c\uc2a4 \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\uc778 React, Vue.js, Angular\uc640 \ud1b5\ud569\ud558\uc5ec \uc804\ud1b5\uc801\uc778 \uc6f9 \uae30\uc220\uc744 \ud65c\uc6a9\ud558\uc5ec \ud48d\ubd80\ud55c \ub370\uc2a4\ud06c\ud1b1 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ubc88 \uae00\uc5d0\uc11c\ub294 Electron\uacfc React, Vue.js, Angular \ub4f1 \ub2e4\uc591\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\uc640\uc758 \ud1b5\ud569 \ubc29\ubc95\uc744 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n

1. Electron \uac1c\uc694<\/h2>\n

\n Electron\uc740 GitHub\uc5d0\uc11c \uac1c\ubc1c\ud55c \ud504\ub808\uc784\uc6cc\ud06c\ub85c, Node.js\uc640 Chromium\uc744 \uae30\ubc18\uc73c\ub85c \ud558\uc5ec \ud06c\ub85c\uc2a4 \ud50c\ub7ab\ud3fc \ub370\uc2a4\ud06c\ud1b1 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc81c\uc791\ud560 \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4. Electron\uc744 \uc0ac\uc6a9\ud558\uba74 \uc6f9 \uae30\uc220\uc744 \ud1b5\ud574 \ub370\uc2a4\ud06c\ud1b1 \uc571\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc73c\uba70, \ucd5c\ub300\ud55c\uc758 \ud6a8\uc728\uc131\uc744 \uc704\ud574 \ub2e4\uc591\ud55c API\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n <\/p>\n

2. Electron\uacfc React \ud1b5\ud569<\/h2>\n

\n React\ub294 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ucd95\ud558\uae30 \uc704\ud55c JavaScript \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \ucef4\ud3ec\ub10c\ud2b8\ub97c \ud1b5\ud574 UI\ub97c \uad6c\uc131\ud569\ub2c8\ub2e4. Electron\uacfc \uacb0\ud569\ud558\uc5ec \ud6a8\uacfc\uc801\uc778 \ub370\uc2a4\ud06c\ud1b1 \uc751\uc6a9 \ud504\ub85c\uadf8\ub7a8\uc744 \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n

2.1. \ud658\uacbd \uc124\uc815<\/h3>\n

\n Electron\uacfc React\ub97c \ud1b5\u5408\ud558\uae30 \uc704\ud574 \ud504\ub85c\uc81d\ud2b8\ub97c \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4. \uba3c\uc800 \uc0c8\ub85c\uc6b4 \ub514\ub809\ud1a0\ub9ac\ub97c \ub9cc\ub4e4\uace0, \ud544\uc694\ud55c \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4.\n <\/p>\n

mkdir my-electron-react-app\ncd my-electron-react-app\nnpm init -y\nnpm install electron react react-dom<\/code><\/pre>\n
2.2. \uae30\ubcf8 \uad6c\uc870<\/h3>\n
\n        \ub2e4\uc74c\uc73c\ub85c, \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870\ub97c \uc124\uc815\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc5d0 main.js<\/code> \ud30c\uc77c\uacfc index.html<\/code> \ud30c\uc77c, \uadf8\ub9ac\uace0 React \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub2f4\uc744 App.js<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud569\uc2dc\ub2e4.\n    <\/p>\n
mkdir src\ntouch main.js index.html src\/App.js<\/code><\/pre>\n
2.3. main.js \ud30c\uc77c \uc124\uc815<\/h3>\n
\nmain.js<\/code> \ud30c\uc77c\uc5d0\ub294 Electron \uc571\uc758 \uae30\ubcf8 \uc124\uc815\uc744 \uc791\uc131\ud569\ub2c8\ub2e4.\n    <\/p>\n
const { app, BrowserWindow } = require('electron');\nconst path = require('path');\n\nfunction createWindow () {\n    const win = new BrowserWindow({\n        width: 800,\n        height: 600,\n        webPreferences: {\n            preload: path.join(__dirname, 'preload.js'),\n            contextIsolation: true,\n            enableRemoteModule: false\n        }\n    });\n\n    win.loadURL('http:\/\/localhost:3000'); \/\/ React \uc571 \uc8fc\uc18c\n}\n\napp.whenReady().then(createWindow);<\/code><\/pre>\n
2.4. React \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc124\uc815<\/h3>\n
\n        React \uc571\uc744 \ube4c\ub4dc\ud558\uae30 \uc704\ud574 create-react-app<\/code>\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uacfc \uac19\uc774 React \uc571\uc744 \ucd08\uae30\ud654\ud569\ub2c8\ub2e4.\n    <\/p>\n
npx create-react-app client\ncd client\nnpm start<\/code><\/pre>\n
\n        \uc774 \uba85\ub839\uc5b4\ub294 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 http:\/\/localhost:3000<\/code>\uc5d0\uc11c \uc2e4\ud589\ud569\ub2c8\ub2e4. \uc774\uc81c Electron\uc774 \uc774 URL\ub85c \uc811\uadfc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n    <\/p>\n
2.5. React \uc608\uc81c \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n
\n        \uc774\uc81c React \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc124\uc815\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. src\/App.js<\/code> \ud30c\uc77c\uc5d0 \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.\n    <\/p>\n
import React from 'react';\n\nfunction App() {\n    return (\n        
\n            
Hello from React!<\/h1>\n        <\/div>\n    );\n}\n\nexport default App;<\/code><\/pre>\n
3. Electron\uacfc Vue.js \ud1b5\ud569<\/h2>\n
\n        Vue.js\ub294 \ud504\ub85c\uadf8\ub808\uc2dc\ube0c JavaScript \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uc27d\uac8c \ub9cc\ub4e4 \uc218 \uc788\ub3c4\ub85d \ub3d5\uc2b5\ub2c8\ub2e4. Electron\uacfc \ud1b5\ud569\ud558\uc5ec \ub370\uc2a4\ud06c\ud1b1 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.\n    <\/p>\n
3.1. Vue.js \ud658\uacbd \uc124\uc815<\/h3>\n
\n        Vue.js\uc640 Electron\uc744 \ud1b5\ud569\ud558\uae30 \uc704\ud574, \uba3c\uc800 \ud544\uc694\ud55c \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4.\n    <\/p>\n
mkdir my-electron-vue-app\ncd my-electron-vue-app\nnpm init -y\nnpm install electron vue vue-router<\/code><\/pre>\n
3.2. \uae30\ubcf8 \uad6c\uc870 \uc124\uc815<\/h3>\n
\nmain.js<\/code>\uc640 Vue \ud30c\uc77c\ub4e4\uc744 \uc704\ud55c \ub514\ub809\ud1a0\ub9ac\ub97c \uc124\uc815\ud569\ub2c8\ub2e4.\n    <\/p>\n
mkdir src\ntouch main.js src\/main.js src\/App.vue src\/router.js<\/code><\/pre>\n
3.3. main.js \ud30c\uc77c \uc124\uc815<\/h3>\n
\n        Electron \uc571\uc758 \uba54\uc778 \ud504\ub85c\uc138\uc2a4\ub97c \uc124\uc815\ud569\ub2c8\ub2e4.\n    <\/p>\n
const { app, BrowserWindow } = require('electron');\nconst path = require('path');\n\nfunction createWindow () {\n    const win = new BrowserWindow({\n        width: 800,\n        height: 600,\n        webPreferences: {\n            preload: path.join(__dirname, 'preload.js'),\n            contextIsolation: true,\n            enableRemoteModule: false\n        }\n    });\n\n    win.loadURL('http:\/\/localhost:8080'); \/\/ Vue \uc571 \uc8fc\uc18c\n}\n\napp.whenReady().then(createWindow);<\/code><\/pre>\n
3.4. Vue \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc124\uc815<\/h3>\n
\n        Vue CLI\ub97c \uc0ac\uc6a9\ud558\uc5ec Vue \uc571\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.\n    <\/p>\n
npm install -g @vue\/cli\nvue create client\ncd client\nnpm run serve<\/code><\/pre>\n
\n        \uc774 \uba85\ub839\uc5b4\ub294 Vue \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 http:\/\/localhost:8080<\/code>\uc5d0\uc11c \uc2e4\ud589\ud569\ub2c8\ub2e4.\n    <\/p>\n
3.5. Vue \ucef4\ud3ec\ub10c\ud2b8 \uc608\uc81c<\/h3>\n
\n        \uc544\ub798 \ucf54\ub4dc\ub97c src\/App.vue<\/code>\uc5d0 \ucd94\uac00\ud569\ub2c8\ub2e4.\n    <\/p>\n
<template>\n    <div>\n        <h1>Hello from Vue.js!<\/h1>\n    <\/div>\n<\/template>\n\n<script>\nexport default {\n    name: 'App'\n}\n<\/script><\/code><\/pre>\n
4. Electron\uacfc Angular \ud1b5\ud569<\/h2>\n
\n        Angular\ub294 Google\uc5d0 \uc758\ud574 \uac1c\ubc1c\ub41c \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\ub85c, \ubcf5\uc7a1\ud55c SPA(Single Page Application)\ub97c \ub9cc\ub4e4\uae30\uc5d0 \uc801\ud569\ud569\ub2c8\ub2e4. \uc774\ubc88 \uc139\uc158\uc5d0\uc11c\ub294 Electron\uacfc Angular\uc758 \ud1b5\ud569 \ubc29\ubc95\uc744 \ub2e4\ub8e8\uaca0\uc2b5\ub2c8\ub2e4.\n    <\/p>\n
4.1. Angular \ud658\uacbd \uc124\uc815<\/h3>\n
\n        Electron\uacfc Angular\ub97c \ud1b5\ud569\ud558\uae30 \uc704\ud574, Angular CLI\ub97c \uc124\uce58\ud558\uace0 \uc0c8\ub85c\uc6b4 Angular \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.\n    <\/p>\n
npm install -g @angular\/cli\nng new my-electron-angular-app\ncd my-electron-angular-app\nnpm install electron<\/code><\/pre>\n
4.2. main.js \ud30c\uc77c \uc0dd\uc131<\/h3>\n
\n        Angular \ud504\ub85c\uc81d\ud2b8\uc758 \ub8e8\ud2b8 \ub514\ub809\ud1a0\ub9ac\uc5d0 main.js<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.\n    <\/p>\n
const { app, BrowserWindow } = require('electron');\nconst path = require('path');\n\nfunction createWindow() {\n    const win = new BrowserWindow({\n        width: 800,\n        height: 600,\n        webPreferences: {\n            contextIsolation: true,\n            enableRemoteModule: false,\n            preload: path.join(__dirname, 'preload.js')\n        }\n    });\n\n    win.loadURL('http:\/\/localhost:4200'); \/\/ Angular \uc571 \uc8fc\uc18c\n}\n\napp.whenReady().then(createWindow);<\/code><\/pre>\n
4.3. Angular \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc2e4\ud589<\/h3>\n
\n        Angular \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc2e4\ud589\ud558\uae30 \uc704\ud574 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud569\ub2c8\ub2e4.\n    <\/p>\n
ng serve<\/code><\/pre>\n
4.4. Angular \uc608\uc81c \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n
\n        Angular \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub2e4\uc74c\uacfc \uac19\uc774 \uc0dd\uc131\ud569\ub2c8\ub2e4.\n    <\/p>\n
ng generate component example<\/code><\/pre>\n
\n        \uc0dd\uc131\ub41c example.component.ts<\/code> \ud30c\uc77c\uc5d0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.\n    <\/p>\n
import { Component } from '@angular\/core';\n\n@Component({\n    selector: 'app-example',\n    template: '<h1>Hello from Angular!<\/h1>'\n})\nexport class ExampleComponent { }<\/code><\/pre>\n
5. Electron\uacfc \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c \ud1b5\ud569 \uc2dc \uace0\ub824\ud574\uc57c \ud560 \uc0ac\ud56d<\/h2>\n
\n        Electron\uacfc \ub2e4\uc591\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\ub97c \ud1b5\ud569\ud560 \ub54c \uba87 \uac00\uc9c0 \uace0\ub824\ud574\uc57c \ud560 \uc0ac\ud56d\uc774 \uc788\uc2b5\ub2c8\ub2e4:\n    <\/p>\n