{"id":1067,"date":"2020-10-12T09:00:31","date_gmt":"2020-10-12T00:00:31","guid":{"rendered":"http:\/\/mobilelab.khu.ac.kr\/?p=1067"},"modified":"2020-04-30T14:28:47","modified_gmt":"2020-04-30T05:28:47","slug":"dart-programmer-39","status":"publish","type":"post","link":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/2020\/10\/12\/dart-programmer-39\/","title":{"rendered":"Dart Programmer \ub418\uae30 [39]"},"content":{"rendered":"\n

<\nWeb \uac1c\ubc1c \u2013 \u201cHello, World!\u201d Flutter multi-platform web apps ><\/h4>\n\n\n\n

\uc55e\uc758 \uae00\uc5d0\uc11c Dart \uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud55c\nWeb \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud574 \ubcf4\uc558\ub2e4\uba74, \uc774\ubc88\uc5d0\ub294 Flutter  \uae30\ubc18\uc758 Web\n\uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\uc5b4 \ubd05\ub2c8\ub2e4. \uc55e\uc758 \uae00\uc5d0\uc11c\n\uc0ac\uc6a9\ud55c \uae30\uc220\uc774 Dart \uc5b8\uc5b4\uc758 \ucf54\uc5b4 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc778 dart:html \uc744\n\uc0ac\uc6a9\ud55c \ubc29\ubc95\uc774\ub77c\uba74, \uc774\ubc88\uc5d0\ub294 \ub9d0\uadf8\ub300\ub85c Flutter\n\ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.\n\uc0ac\uc2e4 \uc774 tutorial\uc758 \uc8fc\uc81c\ub294 Flutter\ub97c \ud1b5\ud55c \uac1c\ubc1c\uc5d0 \uc8fc\uc548\uc810\uc744 \ub450\uae30\uc5d0, Web \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\ub3c4\n\uc9c0\uae08 \uc124\uba85\ud558\ub294 Flutter \uae30\ubc18\uc73c\ub85c \uc774\ub8e8\uc5b4 \uc9c0\uae30\ub97c \uad8c\uc7a5\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

Flutter\nfor Web\uc740 \uc544\uc9c1 \uacf5\uc2dd \ub9b4\ub9ac\uc988\uac00 \uc544\ub2c8\uae30\uc5d0, \ucd94\uac00\ub85c \uc124\uce58\ud574\uc57c\n\ud560 \uc0ac\ud56d\uc774 \uc788\uc2b5\ub2c8\ub2e4. Web \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 Flutter\ub85c \uac1c\ubc1c\ud558\uae30 \uc704\ud55c \uac1c\ubc1c\ud658\uacbd \uc124\uc815\uc740 Flutter\uc758\n\uacf5\uc2dd \uc0ac\uc774\ud2b8( https:\/\/flutter.dev\/docs\/get-started\/web<\/a>\n)\uc5d0\uc11c \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n\uc124\uce58\ub294 \uc5b4\ub835\uc9c0 \uc54a\uc73c\ub098,\n\ud604\uc7ac Flutter\nfor Web\uc740 \ubca0\ud0c0 \ubc84\uc804\uc774\ubbc0\ub85c,\n\ubb38\uc81c\uac00 \ubc1c\uc0dd\ud558\uba74,\n\uacf5\uc2dd \uc0ac\uc774\ud2b8\uc5d0\uc11c \uc5b8\uae09\ud55c\ub300\ub85c \ubc84\uadf8 \ub9ac\ud3ec\ud2b8\ub97c \ud558\uae30 \ubc14\ub78d\ub2c8\ub2e4. <\/p>\n\n\n\n

Flutter\nfor Web \uac1c\ubc1c \ud658\uacbd\uc744 \uad6c\ucd95\ud558\uae30 \uc704\ud574\uc11c \ub2e4\uc74c\uc758 \uba85\ub839\uc744 \uc218\ud589\ud569\ub2c8\ub2e4. \uc774\ud574\ub97c \uc704\ud574\uc11c\n\uc2e4\ud589\ud55c \uacb0\uacfc \ud654\uba74\ub3c4 \uba85\ub839\uc5b4\uc758 \ubc11\uc5d0 \ucd94\uac00 \ud558\uc600\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

[Step.1]\nflutter channel beta<\/p>\n\n\n\n

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

[Step.2]\nflutter upgrade<\/p>\n\n\n\n

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

[Step.3]\nflutter config –enable-web<\/p>\n\n\n\n

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

[Step.4]\nflutter devices <\/p>\n\n\n\n

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

Step.4\ub97c \uc2e4\ud589\ud558\uc5ec,\nflutter device\uc5d0 Chrome \ube0c\ub77c\uc6b0\uc800\uac00\n\ub4f1\ub85d\ub41c \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 Web\nServer\ub294 Web\n\uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc2e4\ud589\ud558\uae30 \uc704\ud558\uc5ec \ud65c\uc6a9 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n

\uc774\uc81c\nFlutter for Web\uc744\n\uc704\ud55c \uac1c\ubc1c \ud658\uacbd\uc740 \uad6c\ucd95\uc774 \ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uc55e\uc11c Flutter\ub97c \ud1b5\ud574\uc11c \ud504\ub85c\uc81d\ud2b8\ub97c \ub9cc\ub4e4\uace0 \uc2e4\ud589\ud558\ub294 \ud658\uacbd\uacfc \uc720\uc0ac\ud569\ub2c8\ub2e4. \ub2e4\uc74c\uc740 Flutter for Web \uacf5\uc2dd\n\uc0ac\uc774\ud2b8\uc758 \ub0b4\uc6a9\ub300\ub85c, myapp\uc774\ub77c\ub294 \uc774\ub984\uc758 project\ub97c \ub9cc\ub4e4\uace0,\n\uc774\ub97c Chrome\n\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc2e4\ud589\ud55c \uc608\uc81c \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n

flutter create myapp
cd myapp
flutter run -d chrome<\/p>\n\n\n\n

\uc5ec\uae30\uc11c\nflutter run \uba85\ub839\uc740\nWeb \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744\ndevelopment \ubaa8\ub4dc(dartdevc \uae30\ubc18)\ub85c \ub3d9\uc791\ud558\uac8c\n\ud569\ub2c8\ub2e4.\uc774\uc81c \uc544\uc8fc\n\uc775\uc219\ud55c \ud654\uba74\uc774 \ub113\uc740 Chrome \ube0c\ub77c\uc6b0\uc800\uc758 \ud654\uba74\uc5d0 [\uadf8\ub9bc 1]\uacfc \uac19\uc774 \ud3bc\uccd0\uc9c0\ub294 \uac83\uc744 \ud655\uc778 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

\"\"
[\uadf8\ub9bc 1] Flutter for Web \uae30\ubcf8 \uc2e4\ud589 \ud654\uba74<\/figcaption><\/figure><\/div>\n\n\n\n

\ud55c\uac00\uc9c0\n\uc7a5\ub09c\uc744 \ud574\ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc55e\uc11c darttutorial-35-01.dart\n\ud504\ub85c\uadf8\ub7a8\uc73c\ub85c,\n\uc774\ubc88\uc5d0 \uc0c8\ub86d\uac8c \ub9cc\ub4e0 myapp\n\ud504\ub85c\uc81d\ud2b8\uc758 main.dart\ub97c \ub300\uce58\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n\uc774\ub97c \uc704\ud574\uc11c flutter\uac00 \uc790\ub3d9 \uc0dd\uc131\ud55c lib\n\ub514\ub809\ud1a0\ub9ac\uc758\nmain.dart\ub97c \uc9c0\uc6b0\uace0, darttutorial-35-01.dart\ub97c main.dart\ub85c \uc800\uc7a5\ud569\ub2c8\ub2e4.\n\uadf8\ub9ac\uace0 flutter\nrun -d chrome<\/p>\n\n\n\n

 \uba85\ub839\uc744\n\uc2e4\ud589\ud558\uba74, \uc775\uc219\ud55c \ud504\ub85c\uadf8\ub7a8\uc774\n[\uadf8\ub9bc 2]\uc640 \uac19\uc774 Chrome \ube0c\ub77c\uc6b0\uc800\n\ud654\uba74 \uac00\ub4dd\ud558\uac8c \ucc44\uc6cc\uc9c0\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc989,\n\uae30\uc874\uc5d0 \ubaa8\ubc14\uc77c \uc6a9\ub3c4\ub85c \ub9cc\ub4e0 \ud504\ub85c\uadf8\ub7a8\ub3c4 \uc218\uc815 \uc5c6\uc774 Web \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc73c\ub85c\n\ubcc0\ud658\ud558\ub294 \uac83\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4. \ub2e8,\nWeb\uc758 UI\/UX\ub294 \uc774\uc5d0 \ub9de\ucdb0\uc57c \ud558\ub2c8,\n\uc81c\ub300\ub85c \ub41c \ud504\ub85c\uadf8\ub7a8\uc740 \uc544\ub2c8\ub77c\uace0 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc, \uc774\uc81c \ubaa8\ubc14\uc77c\n\ud658\uacbd\uc744 \uc704\ud558\uc5ec \ub9cc\ub4e0 \ud504\ub85c\uadf8\ub7a8\uc744 Web \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub3c4 seamless\n\ud558\uac8c \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc5f4\uc1e0\ub97c \ud655\ubcf4\ud55c \uc148\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n

\"\"
[\uadf8\ub9bc 2] \uae30\uc874 \ubaa8\ubc14\uc77c \ud504\ub85c\uadf8\ub7a8\uc744 Web \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc73c\ub85c \uc2e4\ud589\ud55c \ud654\uba74<\/figcaption><\/figure>\n\n\n\n

Flutter\n\uacf5\uc2dd \uc0ac\uc774\ud2b8\uc5d0\uc11c\ub294 \uc774\ub807\uac8c \uae30\uc874\uc758 \ud504\ub85c\uc81d\ud2b8\ub97c Web \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc73c\ub85c\n\uc801\uc6a9\ud558\uae30 \uc704\ud55c \uccab\ubc88\uc9f8 \uc791\uc5c5\uc73c\ub85c, \uae30\uc874 \ud504\ub85c\uc81d\ud2b8\uc758 \ub514\ub809\ud1a0\ub9ac \uc548\uc5d0\uc11c \ub2e4\uc74c\uc758 \uba85\ub839\uc744 \uc218\ud589\ud558\ub3c4\ub85d \ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

flutter\ncreate .<\/p>\n\n\n\n

\uadf8\ub9ac\uace0\nWeb \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc73c\ub85c\n\uc2e4\ud589\ud558\uae30 \uc704\ud574\uc11c, \uc55e\uc11c \uc0ac\uc6a9\ud55c flutter\nrun -d chrome\uc744 \uc2e4\ud589\ud558\ub3c4\ub85d \uad8c\uc7a5\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

\uc55e\uc11c\nflutter run\uc774\ndartdevc\ub97c\n\uae30\ubc18\uc73c\ub85c \ub3d9\uc791\ud55c\ub2e4\uace0 \ud558\uc600\uc73c\ub2c8, \uc774\uc81c \uc791\uc5c5\uc744 \ub9c8\uce5c Web\n\uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc815\uc2dd \ub9b4\ub9ac\uc988 \ud558\ub824\uba74 dart2js\ub97c\n\uae30\ubc18\uc73c\ub85c \ub3d9\uc791\ud558\ub294 \ubc29\ubc95\uc774 \ud544\uc694\ud569\ub2c8\ub2e4. \uc774\ub294 flutter\nbuild web \uba85\ub839\uc744 \uc2e4\ud589\ud558\uc5ec \uac00\ub2a5\ud569\ub2c8\ub2e4. \uc774 \uba85\ub839\uc740\n\ub9b4\ub9ac\uc988\ub97c \uc704\ud55c \ucf54\ub4dc\ub97c \uc0dd\uc131\ud574 \uc90d\ub2c8\ub2e4. \uc774 \uba85\ub839\uc744 \uc218\ud589 \ud558\uae30 \uc804\uc5d0, \ud504\ub85c\uc81d\ud2b8 \uc548\uc758\n\/build \uc11c\ube0c\n\ub514\ub809\ud1a0\ub9ac\ub97c \ud655\uc778\ud558\uba74, asset \ud654\uc77c\uc774 \uc788\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc81c flutter build web\uc744 \uc2e4\ud589\ud558\uace0,\n\ub2e4\uc2dc \/build\n\uc11c\ube0c \ub514\ub809\ud1a0\ub9ac\ub85c \ub4e4\uc5b4\uac00\uba74 \/web \uc11c\ube0c\n\ub514\ub809\ud1a0\ub9ac\uac00 \uc0dd\uc131\ub418\uc5b4 \uc788\uc73c\uba70, \uc548\uc73c\ub85c \ub4e4\uc5b4\uac00\uba74 Dart\n\uc5b8\uc5b4\uc5d0\uc11c \ubcc0\ud658\ub41c \ucf54\ub4dc\ub4e4\uc774 \uc790\ub3d9 \uc0dd\uc131\ub418\uc5b4 \uc788\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. flutter build web \uc678\uc5d0 flutter\nrun \u2013release \uc635\uc158\uc744 \uc90c\uc73c\ub85c\uc368 \ub9b4\ub9ac\uc988 \ubaa8\ub4dc\uc5d0\uc11c\n\uc218\ud589\ud558\ub294 \uac83\ub3c4 \uac00\ub2a5\ud569\ub2c8\ub2e4. \ub530\ub77c\uc11c \ud5a5\ud6c4 Web\n\uc5b4\ud50c\ub808\uc774\uc158\uc744 \ub9b4\ub9ac\uc988 \ud558\ub294 \uacbd\uc6b0\ub294 \/build \uc11c\ube0c\n\ub514\ub809\ud1a0\ub9ac\uc758 \/web\uacfc asset\n\ud654\uc77c\ub4e4\uc744 \uc0ac\uc6a9\ud558\ub294 \uac83 \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n

\ub9c8\ubb34\ub9ac<\/h4>\n\n\n\n

\uc775\uc219\ud55c Flutter\uc758 \uc790\ub3d9\uc0dd\uc131 \uc608\uc81c \ud504\ub85c\uadf8\ub7a8\uc744 \ucee4\ub2e4\ub780 Web \ube0c\ub77c\uc6b0\uc800 \ud654\uba74\uc5d0 \ucc44\uc6cc\uc11c \ub098\ud0c0\ub098\ub3c4\ub85d \ud574 \ubcf4\uc558\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uc774\ubbf8 \ubaa8\ubc14\uc77c \uc6a9\ub3c4\ub85c \ub9cc\ub4e0 \ud504\ub85c\uadf8\ub7a8\uc744 Web \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uad6c\ub3d9\ud558\ub294 \ubc29\ubc95\ub3c4 \ubc30\uc6e0\uc2b5\ub2c8\ub2e4. \uc544\uc9c1 Flutter for Web\uc740 \uacf5\uc2dd \ub9b4\ub9ac\uc988\uac00 \ub098\uc624\uc9c0 \uc54a\uc544 \uc548\uc815\uc801\uc774\ub77c\uace0 \ubcf4\uae30\ub294 \uc5b4\ub835\uc9c0\ub9cc, \ub9ce\uc740 \uac1c\ubc1c\uc790\ub4e4\uc758 \uc9c0\uc9c0\uc18d\uc5d0 \ub099\uad00\uc801\uc778 \ubbf8\ub798\ub97c \uc870\uc2ec\uc2a4\ub808 \uc608\uc0c1\ud574 \ubd05\ub2c8\ub2e4.<\/p>\n\n\n\n

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

Creative Commons License\n(CC BY-NC-ND)<\/p>\n","protected":false},"excerpt":{"rendered":"

< Web \uac1c\ubc1c \u2013 \u201cHello, World!\u201d Flutter multi-platform web apps > \uc55e\uc758 \uae00\uc5d0\uc11c Dart \uc5b8\uc5b4\ub97c \uc0ac\uc6a9\ud55c Web \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud574 \ubcf4\uc558\ub2e4\uba74, \uc774\ubc88\uc5d0\ub294 Flutter  \uae30\ubc18\uc758 Web \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\uc5b4 \ubd05\ub2c8\ub2e4. \uc55e\uc758 \uae00\uc5d0\uc11c \uc0ac\uc6a9\ud55c …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[3],"tags":[15],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/posts\/1067"}],"collection":[{"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/comments?post=1067"}],"version-history":[{"count":2,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/posts\/1067\/revisions"}],"predecessor-version":[{"id":1077,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/posts\/1067\/revisions\/1077"}],"wp:attachment":[{"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/media?parent=1067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/categories?post=1067"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/wp-json\/wp\/v2\/tags?post=1067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}