{"id":439,"date":"2019-03-13T20:44:18","date_gmt":"2019-03-13T11:44:18","guid":{"rendered":"https:\/\/ahnbk.com\/?p=439"},"modified":"2019-03-13T20:44:20","modified_gmt":"2019-03-13T11:44:20","slug":"scratch-3-0-exe-app%ec%9c%bc%eb%a1%9c-%ed%8c%a8%ed%82%a4%ec%a7%95%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"https:\/\/ahnbk.com\/?p=439","title":{"rendered":"Scratch 3.0 exe, app\uc73c\ub85c \ud328\ud0a4\uc9d5\ud558\uae30"},"content":{"rendered":"\n

\ubaa8\ub4e0 \uac1c\ubc1c\uc774 \uc644\ub8cc\ub418\uace0, \ubc30\ud3ec\ub97c \ud574\uc57c \ud558\ub294 \uacbd\uc6b0\uc5d0 \uc708\ub3c4\uc6b0\uc758 \uacbd\uc6b0 exe \ud30c\uc77c, macOS\uc758 \uacbd\uc6b0 .app\uc73c\ub85c \ud328\ud0a4\uc9d5\ud558\uc5ec\uc57c \ud55c\ub2e4. \ubb3c\ub860 \uc18c\uc2a4 \ud30c\uc77c\uc744 \ubc30\ud3ec\ud558\uace0 \uc0ac\uc6a9\uc790\uac00 \uc9c0\ub09c\ubc88 \ud3ec\uc2a4\ud305(https:\/\/ahnbk.com\/?p=366<\/a>, https:\/\/ahnbk.com\/?p=383<\/a>)\uacfc \uac19\uc774 \uac1c\ubc1c\ud658\uacbd\uc744 \uac16\ucd94\uc5b4\uc11c \uc2e4\ud589\ud560 \uc218 \uc788\uc9c0\ub9cc \ub9e4\uc6b0 \ubcf5\uc7a1\ud558\uace0, \ub9b4\ub9ac\uc988 \ubaa8\ub4dc\uac00 \uc544\ub2cc \uad00\uacc4\ub85c \uc0b4\uc9dd \ub290\ub9b0 \uba74\uc774\uc788\ub2e4.<\/p>\n\n\n\n

Scratch 3.0\uc740 React.js\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac1c\ubc1c\ub418\uc5c8\ub2e4. \uc989 \uc774\ub97c \uc2e4\ud589\ud558\uae30 \uc704\ud574\uc120 \uc6f9\ube0c\ub77c\uc6b0\uc800\uac00 \ud544\uc694\ud558\ub2e4. \uac1c\ubc1c \uc2dc\uc5d0\ub294 webpack-dev-server\ub97c \uc774\uc6a9\ud558\uc600\ub2e4. \uc774\ub97c \ub300\uccb4\ud560 \uac83\uc774 \ud544\uc694\ud55c\ub370, \uc774\ub54c \ud544\uc694\ud55c \uac83\uc774 Electron(https:\/\/electronjs.org<\/a>)\uc774\ub2e4. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Electron\uc740 NodeJS, Chromium\uc744 \uc774\uc6a9\ud558\uc5ec JavaScript, HTML, CSS\ub97c \uc774\uc6a9\ud558\uc5ec \ub3d9\uc77c\ud55c \uc18c\uc2a4\ub85c Windows, macOS, Linux \ub4f1\uc5d0\uc11c \uc2e4\ud589 \uac00\ub2a5\ud55c Desktop \uc571\uc744 \uac1c\ubc1c\ud560 \uc218 \uc788\ub294 \ud50c\ub7ab\ud3fc\uc774\ub2e4. <\/p>\n\n\n\n

Electron\uc740 npm\uc744 \uc774\uc6a9\ud558\uc5ec \uc27d\uac8c \uc124\uce58\ud560 \uc218 \uc788\ub2e4. <\/p>\n\n\n\n

$ npm install -g electron<\/code><\/pre>\n\n\n\n
\ub2e4\uc74c\uc73c\ub85c \uc9c0\uae08\uae4c\uc9c0 \uac1c\ubc1c\ud55c Scratch 3.0\uc744 \ub9b4\ub9ac\uc988 \ud615\ud0dc\ub85c \ube4c\ub4dc\ud55c\ub2e4. Scratch-gui \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud558\uc5ec \ub2e4\uc74c\uacfc \uac19\uc774 \uc785\ub825\ud55c\ub2e4.<\/p>\n\n\n\n
$ cd scratch-gui\n$ npm run-script build<\/code><\/pre>\n\n\n\n
\uc774\uc81c \ube4c\ub4dc\uac00 \uc644\ub8cc\ub418\uba74, build \ub514\ub809\ud1a0\ub9ac\uc5d0 release \ubaa8\ub4dc\ub85c \ube4c\ub4dc\ub41c \ud30c\uc77c\ub4e4\uc774 \uc0dd\uc131\ub418\uc5b4 \uc788\uc74c\uc744 \ubcfc \uc218 \uc788\ub2e4. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc774\uc81c \ud3b8\uc758\uc0c1 scratch-app \ub514\ub809\ud1a0\ub9ac\ub97c \ud558\ub098 \uc0dd\uc131\ud558\uace0 \uc704 build \ub514\ub809\ud1a0\ub9ac\ub97c \ubcf5\uc0ac\ud55c\ub2e4. \ub2e4\uc74c\uc73c\ub85c election \uc571\uc744 \ub9cc\ub4e4\uae30 \uc704\ud574 \ub2e4\uc74c\uacfc \uac19\uc774 \uc785\ub825\ud55c\ub2e4.<\/p>\n\n\n\n
$ cd scratch-app\n$ npm init\n\nThis utility will walk you through creating a package.json file.\nIt only covers the most common items, and tries to guess sensible defaults.\n\nSee `npm help json` for definitive documentation on these fields\nand exactly what they do.\n\nUse `npm install <pkg>` afterwards to install a package and\nsave it as a dependency in the package.json file.\n\nPress ^C at any time to quit.\npackage name: (scratch-app) \nversion: (1.0.0) \ndescription: Scratch 3.0 for OROCA Edubot\nentry point: (index.js) main.js\ntest command: \ngit repository: \nkeywords: scratch, oroca, edubot, block-coding\nauthor: Byeong-Kyu Ahn\nlicense: (ISC) BSD-2-Clause\nAbout to write to \/Users\/byeongkyu\/Developer\/scratch\/scratch-app\/package.json:\n\n{\n  \"name\": \"scratch-app\",\n  \"version\": \"1.0.0\",\n  \"description\": \"Scratch 3.0 for OROCA Edubot\",\n  \"main\": \"main.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n  \"keywords\": [\n    \"scratch\",\n    \"oroca\",\n    \"edubot\",\n    \"block-coding\"\n  ],\n  \"author\": \"Byeong-Kyu Ahn\",\n  \"license\": \"BSD-2-Clause\"\n}\n\n\nIs this OK? (yes) <\/code><\/pre>\n\n\n\n
\uc704\uc640 \uac19\uc774 \uc0ac\uc6a9\uc790\uc758 \ud658\uacbd\uc5d0 \ub9de\ucd94\uc5b4 \uc785\ub825\ud558\uac8c \ub418\uba74, package.json \ud30c\uc77c\uc774 \uc0dd\uc131\ub418\uc5b4 \uc788\uc74c\uc744 \ubcfc\uc218 \uc788\ub2e4. package.json \ud30c\uc77c\uc744 \uc5d0\ub514\ud130\ub97c \uc774\uc6a9\ud574 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud55c\ub2e4.<\/p>\n\n\n\n
{\n  \"name\": \"scratch-app\",\n  \"version\": \"1.0.0\",\n  \"description\": \"Scratch 3.0 for OROCA Edubot\",\n  \"main\": \"main.js\",\n  \"scripts\": {\n    \"start\": \"electron .\"\n  },\n  \"keywords\": [\n    \"scratch\",\n    \"oroca\",\n    \"edubot\",\n    \"block-coding\"\n  ],\n  \"author\": \"Byeong-Kyu Ahn\",\n  \"license\": \"BSD-2-Clause\"\n}<\/code><\/pre>\n\n\n\n
\uc774\uc81c main.js \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \ub2e4\uc74c\uacfc \uac19\uc774 \uc785\ub825\ud55c\ub2e4.<\/p>\n\n\n\n
const { app, BrowserWindow } = require('electron')\nvar path = require('path')\n\nlet win\n\nfunction createWindow () {\n  win = new BrowserWindow({\n    frame: true,\n    width: 1200,\n    height: 800,\n    icon: path.join(__dirname, 'assets\/icons\/png\/64x64.png')\n  })\n\n  win.loadFile('.\/build\/index.html')\n\n  win.on('closed', () => {\n    win = null\n  })\n}\n\napp.on('ready', createWindow)\n\napp.on('window-all-closed', () => {\n  if (process.platform !== 'darwin') {\n    app.quit()\n  }\n})\n\napp.on('activate', () => {\n  if (win === null) {\n    createWindow()\n  }\n})<\/code><\/pre>\n\n\n\n
\ub2e4\uc74c\uacfc \uac19\uc774 \uc785\ub825\ud558\uc5ec \uc2e4\ud589\ud574 \ubcf8\ub2e4.<\/p>\n\n\n\n
$ npm start<\/code><\/pre>\n\n\n\n
\uc815\uc0c1\uc801\uc73c\ub85c \ub418\uc5c8\ub2e4\uba74, \uc571\uc774 \uc2e4\ud589 \ub428\uc744 \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc774\uc81c \uc774\ub807\uac8c \uc0dd\uc131\ub41c electron \uc571\uc744 \ud328\ud0a4\uc9d5\ud558\ub294 \uacfc\uc815\ub9cc \ub0a8\uc544 \uc788\ub2e4. \uba3c\uc800 \uc571\uc758 \uc544\uc774\ucf58\uc744 \uc0dd\uc131\ud55c\ub2e4. \uae30\ubcf8\uac12\uc740 Electron\uc758 \uae30\ubcf8 \uc544\uc774\ucf58\uc774\ub2e4. \uc774\ubbf8\uc9c0 \ud3b8\uc9d1\uae30 \ub4f1\uc744 \uc774\uc6a9\ud558\uc5ec 1024×1024 \ud06c\uae30\uc758 png \ud30c\uc77c\uc744 \uc0dd\uc131\ud55c\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc708\ub3c4\uc6b0 \uc571\uc758 \uacbd\uc6b0 ico \ud30c\uc77c\uc744 \uc0ac\uc6a9\ud558\uace0, macOS\uc758 \uacbd\uc6b0 icn \ud30c\uc77c\uc744 \uc0ac\uc6a9\ud55c\ub2e4. https:\/\/icoconvert.com<\/a>, https:\/\/iconverticons.com\/online<\/a> \ub4f1\uc758 \uc6f9\ud398\uc774\uc9c0\uc5d0\uc11c \ubcc0\ud658\uc774 \uac00\ub2a5\ud558\ub2e4. \uc0dd\uc131\ub41c \ud30c\uc77c\uc744 scratch-app \ub514\ub809\ud1a0\ub9ac\uc5d0 \ubcf5\uc0ac\ud55c\ub2e4.<\/p>\n\n\n\n
\ub2e4\uc74c\uc73c\ub85c electron-packager\ub97c \uc124\uce58\ud55c\ub2e4. npm\uc744 \uc774\uc6a9\ud558\uc5ec \uc27d\uac8c \uc124\uce58\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
$ npm install -g electron-packager<\/code><\/pre>\n\n\n\n
\ub2e4\uc74c\uc73c\ub85c \ud328\ud0a4\uc9d5\uc5d0 \ud544\uc694\ud55c electron\uc744 \uc124\uce58\ud55c\ub2e4. <\/p>\n\n\n\n
$ cd scratch-app\n$ npm install --save-dev electron<\/code><\/pre>\n\n\n\n
\ub9c8\uc9c0\ub9c9\uc73c\ub85c macOS\uc6a9 \uc571\uc744 \ud328\ud0a4\uc9c0\ud560 \uacbd\uc6b0 \ub2e4\uc74c\uacfc \uac19\uc774 \uc785\ub825\ud55c\ub2e4.<\/p>\n\n\n\n
$ electron-packager . --overwrite --platform=darwin --arch=x64 --icon=.\/assets\/icons\/edubot_icon.icns --prune=true --out=release-builds<\/code><\/pre>\n\n\n\n
\ub2e4\uc74c\uacfc \uac19\uc740 \uba54\uc2dc\uc9c0\uac00 \ub098\uc624\uba74 \uc131\uacf5<\/p>\n\n\n\n
Packaging app for platform darwin x64 using electron v4.0.8\nWrote new app to release-builds\/scratch-app-darwin-x64<\/code><\/pre>\n\n\n\n
\uc774\uc81c \uc704\uc5d0\uc11c \uc54c\ub824\uc900 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud574 \ubcf4\uba74 .app \ud30c\uc77c\uc774 \uc0dd\uc131\ub418\uc5b4 \uc788\uc74c\uc744 \ubcfc \uc218 \uc788\ub2e4. macOS\uc758 \uacbd\uc6b0 \/Application\uc73c\ub85c \ubcf5\uc0ac\ud558\uc5ec \uc0ac\uc6a9\ud558\uba74 \ub41c\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc708\ub3c4\uc6b0\uc6a9 \uc571\uc744 \ud328\ud0a4\uc9d5 \ud560 \ub54c, macOS\uc5d0\uc11c \uc9c4\ud589\ud558\ub294 \uacbd\uc6b0 wine \ud234\uc774 \ud544\uc694\ud558\ub2e4. homebrew\ub97c \uc774\uc6a9\ud558\uc5ec \uc27d\uac8c \uc124\uce58\uac00 \uac00\ub2a5\ud558\ub2e4.<\/p>\n\n\n\n
$ brew install wine<\/code><\/pre>\n\n\n\n
\uc124\uce58\uac00 \uc644\ub8cc\ub418\uba74, \ub2e4\uc74c\uacfc \uac19\uc774 \uc785\ub825\ud558\uc5ec \uc708\ub3c4\uc6b0\uc6a9 \uc571\uc744 \ud328\ud0a4\uc9d5\ud55c\ub2e4.<\/p>\n\n\n\n
$ electron-packager . scratch-edubot-app --overwrite --platform=win32 --arch=x64 --icon=assets\/icons\/edubot_icon.ico --prune=true --out=release-builds --version-string.CompanyName=\"OROCA\" --version-string.FileDescription=\"OROCA Edubot\" --version-string.ProductName=\"Scratch Edubot\"<\/code><\/pre>\n\n\n\n
\ub2e4\uc74c\uacfc \uac19\uc740 \uba54\uc2dc\uc9c0\uac00 \ub098\uc624\uace0 \ud574\ub2f9 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud558\uba74 exe \ud30c\uc77c\uc774 \uc0dd\uc131\ub428\uc744 \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
Packaging app for platform win32 x64 using electron v4.0.8\nWrote new app to release-builds\/scratch-edubot-app-win32-x64<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\uc704 \ub514\ub809\ud1a0\ub9ac\ub97c \uc555\ucd95\ud558\uc5ec \uc708\ub3c4\uc6b0 \ud658\uacbd\uc5d0\uc11c exe \ud30c\uc77c\uc744 \uc2e4\ud589\ud55c\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\ub05d!<\/p>\n","protected":false},"excerpt":{"rendered":"
\ubaa8\ub4e0 \uac1c\ubc1c\uc774 \uc644\ub8cc\ub418\uace0, \ubc30\ud3ec\ub97c \ud574\uc57c \ud558\ub294 \uacbd\uc6b0\uc5d0 \uc708\ub3c4\uc6b0\uc758 \uacbd\uc6b0 exe \ud30c\uc77c, macOS\uc758 \uacbd\uc6b0 .app\uc73c\ub85c \ud328\ud0a4\uc9d5\ud558\uc5ec\uc57c \ud55c\ub2e4. \ubb3c\ub860 \uc18c\uc2a4 \ud30c\uc77c\uc744 \ubc30\ud3ec\ud558\uace0 \uc0ac\uc6a9\uc790\uac00 \uc9c0\ub09c\ubc88 \ud3ec\uc2a4\ud305(https:\/\/ahnbk.com\/?p=366, https:\/\/ahnbk.com\/?p=383)\uacfc \uac19\uc774 \uac1c\ubc1c\ud658\uacbd\uc744 \uac16\ucd94\uc5b4\uc11c \uc2e4\ud589\ud560 \uc218 \uc788\uc9c0\ub9cc \ub9e4\uc6b0 \ubcf5\uc7a1\ud558\uace0, \ub9b4\ub9ac\uc988 \ubaa8\ub4dc\uac00 \uc544\ub2cc \uad00\uacc4\ub85c \uc0b4\uc9dd \ub290\ub9b0 \uba74\uc774\uc788\ub2e4. Scratch 3.0\uc740 React.js\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac1c\ubc1c\ub418\uc5c8\ub2e4. \uc989 \uc774\ub97c \uc2e4\ud589\ud558\uae30 \uc704\ud574\uc120 \uc6f9\ube0c\ub77c\uc6b0\uc800\uac00 \ud544\uc694\ud558\ub2e4. \uac1c\ubc1c \uc2dc\uc5d0\ub294 webpack-dev-server\ub97c \uc774\uc6a9\ud558\uc600\ub2e4. \uc774\ub97c … <\/p>\n
Continue reading “Scratch 3.0  exe, app\uc73c\ub85c \ud328\ud0a4\uc9d5\ud558\uae30”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"footnotes":"","_jetpack_memberships_contains_paid_content":false},"categories":[63],"tags":[88,89,87,67],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2wXSW-75","jetpack-related-posts":[],"jetpack_likes_enabled":false,"_links":{"self":[{"href":"https:\/\/ahnbk.com\/index.php?rest_route=\/wp\/v2\/posts\/439"}],"collection":[{"href":"https:\/\/ahnbk.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ahnbk.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ahnbk.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ahnbk.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=439"}],"version-history":[{"count":2,"href":"https:\/\/ahnbk.com\/index.php?rest_route=\/wp\/v2\/posts\/439\/revisions"}],"predecessor-version":[{"id":448,"href":"https:\/\/ahnbk.com\/index.php?rest_route=\/wp\/v2\/posts\/439\/revisions\/448"}],"wp:attachment":[{"href":"https:\/\/ahnbk.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=439"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ahnbk.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=439"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ahnbk.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}