Angular<\/strong>: \uc804\uccb4\uc801\uc778 \uad6c\uc870\uc640 \ub2e4\uc591\ud55c \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\uc5ec \ubcf5\uc7a1\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc720\ub9ac\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n3. Electron\uacfc \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c \ud1b5\ud569\ud558\uae30<\/h2>\n
Electron\uc740 \ub2e4\uc591\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\uc640 \ud1b5\ud569\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc5ec\uae30\uc11c\ub294 React\ub97c \uc608\ub85c \ub4e4\uc5b4 \ud1b5\ud569 \ubc29\ubc95\uc744 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4. \ub610\ud55c Vue.js \ub610\ub294 Angular\uc640\uc758 \ud1b5\ud569 \ubc29\uc2dd\ub3c4 \uc720\uc0ac\ud558\ub2e4\ub294 \uc810\uc744 \ubbf8\ub9ac \uc54c\ub824\ub4dc\ub9bd\ub2c8\ub2e4.<\/p>\n
3.1. Electron \uc124\uc815<\/h3>\n
\uc6b0\uc120 Electron \ud504\ub85c\uc81d\ud2b8\ub97c \uc124\uc815\ud569\ub2c8\ub2e4. \uc0c8\ub85c\uc6b4 \ub514\ub809\ud1a0\ub9ac\ub97c \uc0dd\uc131\ud558\uace0 \ucd08\uae30\ud654\ud569\ub2c8\ub2e4.<\/p>\n
\n\nmkdir my-electron-app\ncd my-electron-app\nnpm init -y\nnpm install electron\n<\/code>\n<\/pre>\n\ud504\ub85c\uc81d\ud2b8 \ub514\ub809\ud1a0\ub9ac \ub0b4\uc5d0 main.js<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4. \ub2e4\uc74c\uacfc \uac19\uc774 \uae30\ubcf8 Electron \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc124\uc815\ud569\ub2c8\ub2e4.<\/p>\n\n\nconst { app, BrowserWindow } = require('electron');\n\nfunction createWindow() {\n const win = new BrowserWindow({\n width: 800,\n height: 600,\n webPreferences: {\n nodeIntegration: true,\n contextIsolation: false,\n },\n });\n\n win.loadURL('http:\/\/localhost:3000'); \/\/ SPA\uc758 \uac1c\ubc1c \uc11c\ubc84 \uc8fc\uc18c\n}\n\napp.whenReady().then(createWindow);\n<\/code>\n<\/pre>\n3.2. React \uc571 \uc0dd\uc131<\/h3>\n
React \uc571\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4. Create React App \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0c8\ub85c\uc6b4 React \ud504\ub85c\uc81d\ud2b8\ub97c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\n\nnpx create-react-app my-react-app\ncd my-react-app\nnpm start\n<\/code>\n<\/pre>\n\uc774\uc81c React \uc571\uc774 http:\/\/localhost:3000<\/code>\uc5d0\uc11c \uc2e4\ud589\ub429\ub2c8\ub2e4. \uc774 \uc124\uc815\uc774 \uc798 \uc9c4\ud589\ub418\uc5c8\ub294\uc9c0 \ud655\uc778\ud569\ub2c8\ub2e4.<\/p>\n3.3. Electron\uacfc React \ud1b5\ud569<\/h3>\n
\uc774\uc81c \uc0dd\uc131\ud55c React \uc571\uc744 Electron\uc5d0\uc11c \ub85c\ub4dc\ud558\ub294 \uc791\uc5c5\uc744 \uc9c4\ud589\ud569\ub2c8\ub2e4. Electron\uc758 main.js<\/code> \ud30c\uc77c\uc744 \uc218\uc815\ud558\uc5ec React \uc571\uc744 \ub85c\ub4dc\ud569\ub2c8\ub2e4.<\/p>\n\n\nconst { 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'), \/\/ \ubcf4\uc548\uc744 \uc704\ud55c preload \uc124\uc815\n contextIsolation: true,\n },\n });\n\n win.loadURL('http:\/\/localhost:3000'); \/\/ React \uac1c\ubc1c \uc11c\ubc84 \uc8fc\uc18c\n}\n\napp.whenReady().then(createWindow);\n<\/code>\n<\/pre>\nReact \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \uc131\uacf5\uc801\uc73c\ub85c \uc5f4\ub9bd\ub2c8\ub2e4. \uc774 \uc0c1\ud0dc\uc5d0\uc11c React\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 SPA\uc758 \uc7a5\uc810\uc744 \ud65c\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
4. SPA\uc758 \uc7a5\uc810<\/h2>\n
SPA\ub294 \uc5ec\ub7ec \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4:<\/p>\n
\n- \ube60\ub978 \uc18d\ub3c4<\/strong>: \ud398\uc774\uc9c0 \uc804\uccb4\ub97c \ub85c\ub529\ud558\ub294 \uac83\uc774 \uc544\ub2c8\ub77c \ud544\uc694\ud55c \ub370\uc774\ud130\ub9cc \uc694\uccad\ud558\uae30 \ub54c\ubb38\uc5d0 \ube60\ub978 \ubc18\uc751\uc18d\ub3c4\ub97c \uc790\ub791\ud569\ub2c8\ub2e4.<\/li>\n
- \uc720\uc5f0\ud55c \uc0ac\uc6a9\uc790 \uacbd\ud5d8<\/strong>: \ud398\uc774\uc9c0 \uc804\ud658 \uc2dc \ubd80\ub4dc\ub7ec\uc6b4 \uc560\ub2c8\uba54\uc774\uc158\uacfc UX\ub97c \uc81c\uacf5\ud558\uc5ec \uc0ac\uc6a9\uc790\uac00 \ub354\uc6b1 \ucf8c\uc801\ud558\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n
- \uc0c1\ud0dc \uad00\ub9ac<\/strong>: React\uc758 \uacbd\uc6b0, Redux \ub610\ub294 Context API\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc0c1\ud0dc\ub97c \uc911\uc559 \uc9d1\uc911\uc2dd\uc73c\ub85c \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n
- SEO \ucd5c\uc801\ud654<\/strong>: \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)\uacfc \uc815\uc801 \ud398\uc774\uc9c0 \uc0dd\uc131(SSG) \uae30\ubc95\uc744 \ud65c\uc6a9\ud558\uc5ec SPA\uc758 SEO\ub97c \uac1c\uc120\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n
5. \uacb0\ub860<\/h2>\n
Electron\uacfc \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\uc758 \ud1b5\ud569\uc740 \uac1c\ubc1c\uc790\uc5d0\uac8c \uac15\ub825\ud55c \ud234\uacfc \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774\ub7ec\ud55c \ud1b5\ud569\uc744 \ud1b5\ud574 \ub370\uc2a4\ud06c\ud1b1 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c SPA\uc758 \uc774\uc810\uc744 \ud65c\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc624\ub298 \uc124\uba85\ud55c \ub0b4\uc6a9\uc744 \ubc14\ud0d5\uc73c\ub85c \uc790\uc2e0\ub9cc\uc758 Electron SPA\uc744 \uac1c\ubc1c\ud574\ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4. \ub2e4\uc591\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c\ub97c \ud65c\uc6a9\ud558\uc5ec \ubcf4\ub2e4 \uc720\uc6a9\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\uc138\uc694.<\/p>\n