{"id":805,"date":"2019-05-17T09:26:10","date_gmt":"2019-05-17T00:26:10","guid":{"rendered":"https:\/\/ahnbk.com\/?p=805"},"modified":"2019-05-17T09:26:10","modified_gmt":"2019-05-17T00:26:10","slug":"blockly-%eb%b8%94%eb%9f%ad-%eb%a7%8c%eb%93%a4%ea%b8%b0-1","status":"publish","type":"post","link":"https:\/\/ahnbk.com\/?p=805","title":{"rendered":"Blockly \ube14\ub7ed \ub9cc\ub4e4\uae30 #1"},"content":{"rendered":"\n

Blockly\ub294 \uc0ac\uc6a9\uc790\uac00 \uc6d0\ud558\ub294 \uae30\ub2a5\uc758 \ube14\ub7ed\uc744 \uc790\uc720\ub86d\uac8c \ub9cc\ub4e4\uc218 \uc788\ub2e4. \uae30\ubcf8 \uc81c\uacf5\ub41c \ube14\ub7ed \uc678\uc5d0 \uc0ac\uc6a9\uc790\uc758 \ub85c\ubd07\uc774\ub098 \uae30\ud0c0 \uae30\ub2a5\uacfc \uc5f0\ub3d9\ud558\uae30 \uc704\ud55c \ube14\ub7ed\uc744 \uc0dd\uc131\ud558\uace0, \uc774\ub97c \ud234\ubc15\uc2a4\uc5d0 \ub123\uc5b4 \uc0ac\uc6a9\ud558\uba74 \ub41c\ub2e4.<\/p>\n\n\n\n

Blockly\ub294 \uc774\ub7ec\ud55c \ube14\ub7ed\ub4e4\uc744 \uc27d\uac8c \ub9cc\ub4e4\uc218 \uc788\ub3c4\ub85d \ub3c4\uad6c\ub97c \uc81c\uacf5\ud55c\ub2e4. \uc7ac\ubc0c\uac8c\ub3c4 \ube14\ub7ed\uc744 \uc0dd\uc131\ud558\ub294 \uac83\ub3c4 \ube14\ub7ed\uc73c\ub85c \ub9cc\ub4e0\ub2e4. \ubb3c\ub860 \ub098\uc911\uc5d0 \uc880 \uc775\uc219\ud574\uc9c0\ub9cc \ud14d\uc2a4\ud2b8\ub85c \ud3b8\uc9d1\ud558\ub294\uac8c \uc880\ub354 \uc26c\uc6b8 \uc218 \uc788\uc9c0\ub9cc, \uc81c\uacf5\ub418\ub294 \ub3c4\uad6c\ub97c \uc774\uc6a9\ud558\uba74 \uc0dd\uc131\ub418\ub294 \ube14\ub7ed \ubaa8\uc591\uc744 \ud655\uc778\ud558\uba74\uc11c \uc218\uc815\uc774 \uac00\ub2a5\ud558\ub2e4.<\/p>\n\n\n\n

\uba3c\uc800 Blockly Developer Tools\ub97c \uc0ac\uc6a9\ud574\ubcf4\uc790. \uc0ac\ud30c\ub9ac\ub098 \ud06c\ub86c \ub4f1 \ube0c\ub77c\uc6b0\uc800\ub97c \uc5f4\uace0 (https:\/\/blockly-demo.appspot.com\/static\/demos\/blockfactory\/index.html<\/a>)\uc73c\ub85c \uc774\ub3d9\ud55c\ub2e4.<\/p>\n\n\n\n

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

\uc704\uc640 \uac19\uc740 \ud654\uba74\uc774 \ub098\uc624\ub294\ub370, \uc67c\ucabd\uc740 \ube14\ub7ed\uc744 \uc0dd\uc131\ud558\uae30 \uc704\ud55c \ube14\ub7ed \ucf54\ub529 \uc601\uc5ed, \uc624\ub978\ucabd \uc0c1\ub2e8\uc5d4 \uc0dd\uc131\ub41c \ube14\ub7ed \ubaa8\uc591\uc744 \uc2e4\uc2dc\uac04\uc73c\ub85c \ud655\uc778\uc774 \uac00\ub2a5\ud558\uace0, \uc624\ub978\ucabd \uc911\uc559\uc5d4 \ucd94\ud6c4 \ucf54\ub4dc\uc5d0 \uc0bd\uc785\ud558\uae30 \uc704\ud55c JSON \ucf54\ub4dc, \uc624\ub978\ucabd \ud558\ub2e8\uc5d4 \ube14\ub7ed\uc744 \uc2e4\uc81c \ucf54\ub4dc\ub85c \uc0dd\uc131\ud558\uae30 \uc704\ud55c generator \ucf54\ub4dc\uac00 \uc0dd\uc131\ub41c\ub2e4.<\/p>\n\n\n\n

\uc77c\ub2e8 \ud750\ub984\uc744 \ubcf4\uae30 \uc704\ud574 \uc544\uc8fc \uac04\ub2e8\ud55c \ube14\ub7ed\uc744 \uc0dd\uc131\ud574\ubcf4\ub3c4\ub85d \ud55c\ub2e4. \uc0ac\uc6a9\uc790\uc758 \ubb38\uc790\uc5f4 \uc785\ub825\uc744 \ubc1b\uc544 console\uc5d0 \ucd9c\ub825\ud558\ub294 \ube14\ub7ed\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\ub85d \ud55c\ub2e4. \uba3c\uc800 \ube14\ub7ed\uc758 name\uc744 \uc218\uc815\ud55c\ub2e4. \uc5ec\uae30\uc120 console_print\ub85c \ud55c\ub2e4.<\/p>\n\n\n\n

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

\ub2e4\uc74c\uc73c\ub85c \uc774 \ube14\ub7ed\uc740 \ub2e4\ub978 \ube14\ub7ed\ub4e4\uacfc \uc0c1\ud558 \uc5f0\uacb0\ud558\uc5ec \uc0ac\uc6a9 \uac00\ub2a5\ud574\uc57c \ud558\ubbc0\ub85c, connection\uc744 top+bottom connections\ub85c \ubcc0\uacbd\ud55c\ub2e4. \uc774\ub807\uac8c \ub418\uba74 \ubbf8\ub9ac\ubcf4\uae30 \ucc3d\uc758 \ube14\ub7ed \ubaa8\uc591\uc774 \ubcc0\uacbd\ub428\uc744 \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n

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

\ub2e4\uc74c\uc73c\ub85c \uc0ac\uc6a9\uc790\uc758 \ubb38\uc790\uc5f4\uc744 \uc785\ub825 \ubc1b\uc544\uc57c \ud55c\ub2e4. \uc67c\ucabd \ud234\ubc15\uc2a4 \ucc3d\uc5d0\uc11c Input \uce74\ud14c\uace0\ub9ac\ub0b4\uc5d0 value input \ube14\ub7ed\uc744 inputs\uc5d0 \ucd94\uac00\ud55c\ub2e4. \uc774 \uc785\ub825\uc744 \ubc1b\uc544\uc11c \ub0b4\ubd80\uc5d0\uc11c \ucc98\ub9ac\ud558\uae30 \uc704\ud55c \ubcc0\uc218\uba85\uc740 value_input \uc606\uc5d0 \uc788\ub294 NAME\uc774\ub2e4. \uc774\ub97c \ud544\uc694\uc5d0 \ub530\ub77c \uc801\uc808\ud558\uac8c \uc218\uc815\ud55c\ub2e4.<\/p>\n\n\n\n

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

\uc774\uc81c \ube14\ub7ed\uc5d0 \uae30\ub2a5\uc744 \uc124\uba85\ud558\uae30 \uc704\ud55c \ud14d\uc2a4\ud2b8 \ube14\ub7ed\uc744 \ucd94\uac00\ud55c\ub2e4. (Field \uce74\ud14c\uace0\ub9ac Text \ube14\ub7ed)<\/p>\n\n\n\n

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

\uc785\ub825\uc740 Text\ub9cc \ubc1b\uc544\uc57c \ud558\ubbc0\ub85c, \uc785\ub825 type\uc5d0 String \ube14\ub7ed\uc744 \ucd94\uac00\ud55c\ub2e4.<\/p>\n\n\n\n

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

\ub9c8\uc9c0\ub9c9\uc73c\ub85c \ube14\ub7ed\uc758 \uc0c9\uc0c1\uacfc, \uc774 \ube14\ub7ed\uc744 \uc0ac\uc6a9\ud558\ub294\ub370 \ud544\uc694\ud55c tooltip, help url \ub4f1\uc744 \uc785\ub825\ud55c\ub2e4.<\/p>\n\n\n\n

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

\uc774\uc81c \uc0dd\uc131\ub41c \ube14\ub7ed\uc758 \ubaa8\uc591\uc744 \ud655\uc778\ud574\ubcf4\uba74,<\/p>\n\n\n\n

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

\uc640 \uac19\uc774 \uac04\ub2e8\ud55c \ubaa8\uc591\uc758 \ube14\ub7ed\uc774 \uc0dd\uc131\ub418\uc5c8\ub2e4. \uc0dd\uc131\ub41c JSON \ucf54\ub4dc\ub97c \ud655\uc778\ud574\ubcf4\uba74,<\/p>\n\n\n\n

{\n  \"type\": \"console_print\",\n  \"message0\": \"console print %1\",\n  \"args0\": [\n    {\n      \"type\": \"input_value\",\n      \"name\": \"NAME\",\n      \"check\": \"String\"\n    }\n  ],\n  \"previousStatement\": null,\n  \"nextStatement\": null,\n  \"colour\": 330,\n  \"tooltip\": \"Block for printing the user message\",\n  \"helpUrl\": \"https:\/\/ahnbk.com\"\n}<\/code><\/pre>\n\n\n\n
\uadf8\ub9ac\uace0, \uc774\uc640 \uac19\uc774 \uc0dd\uc131\ub41c Generator stub\uc744 \ubcf4\uba74,<\/p>\n\n\n\n
Blockly.JavaScript['console_print'] = function(block) {\n  var value_name = Blockly.JavaScript.valueToCode(block, 'NAME', Blockly.JavaScript.ORDER_ATOMIC);\n  \/\/ TODO: Assemble JavaScript into code variable.\n  var code = '...;\\n';\n  return code;\n};<\/code><\/pre>\n\n\n\n
\uc640 \uac19\uc774 \ub418\uc5b4 \uc788\ub2e4. \uc790 \uc774\uc81c \ube14\ub7ed\uc774 \uc0dd\uc131\ub418\uc5c8\uc73c\ubbc0\ub85c, \uc774\ub97c \uc9c0\ub09c\ubc88\uc5d0 \ub9cc\ub4e4\uc5c8\ub358 \uc608\uc81c\uc5d0 \uc0dd\uc131\ub41c \ube14\ub7ed\uc744 \ucd94\uac00\ud574\ubcf4\ub3c4\ub85d \ud55c\ub2e4. \uc608\uc81c \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud558\uc5ec, my_blocks.js \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0, \ub2e4\uc74c\uacfc \uac19\uc774 \uc785\ub825\ud55c\ub2e4.<\/p>\n\n\n\n
'use strict';\n\ngoog.require('Blockly.Blocks');\ngoog.require('Blockly');\n\nBlockly.defineBlocksWithJsonArray(\n[\n    \/\/ insert blocks here\n\n]);<\/code><\/pre>\n\n\n\n
\uc774\uc81c  “insert blocks here \ubd80\ubd84\uc5d0 \uc704\uc5d0\uc11c \uc0dd\uc131\ub41c \ucf54\ub4dc\ub97c \ubd99\uc5ec \ub123\ub294\ub2e4.<\/p>\n\n\n\n
'use strict';\n\ngoog.require('Blockly.Blocks');\ngoog.require('Blockly');\n\nBlockly.defineBlocksWithJsonArray(\n[\n    {\n        \"type\": \"console_print\",\n        \"message0\": \"console print %1\",\n        \"args0\": [\n          {\n            \"type\": \"input_value\",\n            \"name\": \"NAME\",\n            \"check\": \"String\"\n          }\n        ],\n        \"previousStatement\": null,\n        \"nextStatement\": null,\n        \"colour\": 330,\n        \"tooltip\": \"Block for printing the user message\",\n        \"helpUrl\": \"https:\/\/ahnbk.com\"\n      },\n]);<\/code><\/pre>\n\n\n\n
\uc800\uc7a5\ud55c \ub2e4\uc74c, index.html \ud30c\uc77c\uc744 \uc5f4\uace0 \uc704 \ud30c\uc77c\uc744 \ub85c\ub529\ud558\ub3c4\ub85d \ucd94\uac00\ud55c\ub2e4.<\/p>\n\n\n\n
<!DOCTYPE html>\n<!-- HTML file to host Blockly in a mobile WebView. -->\n<html>\n<head>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\">\n  <style type=\"text\/css\">\n    html, body, #blocklyDiv {\n      border: 0;\n      height: 100%;\n      margin: 0;\n      padding: 0;\n      width: 100%;\n    }\n  <\/style>\n  <script src=\"blockly_compressed.js\"><\/script>\n  <script src=\"blocks_compressed.js\"><\/script>\n  <!-- TODO: Select msg file based on locale. -->\n  <script src=\"msg\/js\/en.js\"><\/script>\n  <script src=\"toolbox_standard.js\"><\/script>\n  <script src=\"my_blocks.js\"><\/script>\n<\/head>\n<body>\n  <div id=\"blocklyDiv\"><\/div>\n  <script type=\"text\/javascript\">\n    var workspacePlayground = Blockly.inject('blocklyDiv', {\n          media: 'media\/',\n          toolbox: BLOCKLY_TOOLBOX_XML['standard'],\n          zoom: {controls: true}\n        });\n  <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\ubc14\ub85c \uc774\uc804 \ud3ec\uc2a4\ud305\uc5d0\uc11c \ub9cc\ub4e0 Custom \uce74\ud14c\uace0\ub9ac\uc5d0 \uc0dd\uc131\ub41c \ube14\ub7ed\uc744 \ucd94\uac00\ud55c\ub2e4.<\/p>\n\n\n\n
+ '<category name=\"Custom\" colour=\"100\">'\n+   '<block type=\"console_print\">'\n+   '<\/block>'\n+ '<\/category>'<\/code><\/pre>\n\n\n\n
\uc790, \uc774\uc81c \uc608\uc81c\ub97c \ub2e4\uc2dc \uc5f4\uc5b4\ubcf4\uba74,<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Custom \uce74\ud14c\uace0\ub9ac\uc5d0 console print \ube14\ub7ed\uc774 \ucd94\uac00\ub418\uc5b4 \uc788\uc74c\uc744 \ubcfc \uc218\uc788\ub2e4. \ub9cc\uc57d \ubb38\uc790\uc5f4 \uc785\ub825\uc5d0 default \uac12\uc744 \ub123\uc5b4 \uc8fc\uace0 \uc2f6\ub2e4\uba74, \ud234\ubc15\uc2a4\uc5d0 \ucf54\ub4dc\ub97c \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud55c\ub2e4.<\/p>\n\n\n\n
+ '<category name=\"Custom\" colour=\"100\">'\n+   '<block type=\"console_print\">'\n+     '<value name=\"NAME\">'\n+       '<shadow type=\"text\">'\n+         '<field name=\"TEXT\">Hello Blockly<\/field>'\n+       '<\/shadow>'\n+     '<\/value>'\n+   '<\/block>'\n+ '<\/category>'<\/code><\/pre>\n\n\n\n
\uc774\uc81c \ub2e4\uc2dc \uc608\uc81c\ub97c \ud655\uc778\ud574\ubcf4\uba74,<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
\uc640 \uac19\uc774 \ub418\uc5b4 \uc788\uc74c\uc744 \ud655\uc778\ud560 \uc218 \uc788\ub2e4. \ub2e4\uc74c\uc5d4 \uc880\ub354 \ub2e4\uc591\ud55c \ubaa8\uc591\uc758 \ube14\ub7ed\uc744 \ub9cc\ub4e4\uc5b4\ubcf4\ub85d \ud55c\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
Blockly\ub294 \uc0ac\uc6a9\uc790\uac00 \uc6d0\ud558\ub294 \uae30\ub2a5\uc758 \ube14\ub7ed\uc744 \uc790\uc720\ub86d\uac8c \ub9cc\ub4e4\uc218 \uc788\ub2e4. \uae30\ubcf8 \uc81c\uacf5\ub41c \ube14\ub7ed \uc678\uc5d0 \uc0ac\uc6a9\uc790\uc758 \ub85c\ubd07\uc774\ub098 \uae30\ud0c0 \uae30\ub2a5\uacfc \uc5f0\ub3d9\ud558\uae30 \uc704\ud55c \ube14\ub7ed\uc744 \uc0dd\uc131\ud558\uace0, \uc774\ub97c \ud234\ubc15\uc2a4\uc5d0 \ub123\uc5b4 \uc0ac\uc6a9\ud558\uba74 \ub41c\ub2e4. Blockly\ub294 \uc774\ub7ec\ud55c \ube14\ub7ed\ub4e4\uc744 \uc27d\uac8c \ub9cc\ub4e4\uc218 \uc788\ub3c4\ub85d \ub3c4\uad6c\ub97c \uc81c\uacf5\ud55c\ub2e4. \uc7ac\ubc0c\uac8c\ub3c4 \ube14\ub7ed\uc744 \uc0dd\uc131\ud558\ub294 \uac83\ub3c4 \ube14\ub7ed\uc73c\ub85c \ub9cc\ub4e0\ub2e4. \ubb3c\ub860 \ub098\uc911\uc5d0 \uc880 \uc775\uc219\ud574\uc9c0\ub9cc \ud14d\uc2a4\ud2b8\ub85c \ud3b8\uc9d1\ud558\ub294\uac8c \uc880\ub354 \uc26c\uc6b8 \uc218 \uc788\uc9c0\ub9cc, \uc81c\uacf5\ub418\ub294 \ub3c4\uad6c\ub97c \uc774\uc6a9\ud558\uba74 \uc0dd\uc131\ub418\ub294 \ube14\ub7ed \ubaa8\uc591\uc744 … <\/p>\n
Continue reading “Blockly \ube14\ub7ed \ub9cc\ub4e4\uae30 #1”<\/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":[90],"tags":[91,177,178,66,97],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2wXSW-cZ","jetpack-related-posts":[],"jetpack_likes_enabled":false,"_links":{"self":[{"href":"https:\/\/ahnbk.com\/index.php?rest_route=\/wp\/v2\/posts\/805"}],"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=805"}],"version-history":[{"count":2,"href":"https:\/\/ahnbk.com\/index.php?rest_route=\/wp\/v2\/posts\/805\/revisions"}],"predecessor-version":[{"id":819,"href":"https:\/\/ahnbk.com\/index.php?rest_route=\/wp\/v2\/posts\/805\/revisions\/819"}],"wp:attachment":[{"href":"https:\/\/ahnbk.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ahnbk.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ahnbk.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}