{"id":1112,"date":"2020-10-14T09:00:00","date_gmt":"2020-10-14T00:00:00","guid":{"rendered":"http:\/\/mobilelab.khu.ac.kr\/?p=1112"},"modified":"2020-10-14T14:20:25","modified_gmt":"2020-10-14T05:20:25","slug":"dart-programmer-43","status":"publish","type":"post","link":"http:\/\/mobilelab.khu.ac.kr\/wordpress\/2020\/10\/14\/dart-programmer-43\/","title":{"rendered":"Dart Programmer \ub418\uae30 [43]"},"content":{"rendered":"\n

< Web \uac1c\ubc1c \u2013 AngularDart for Web ><\/h4>\n\n\n\n

\uacb0\ub860\ubd80\ud130 \uc774\uc57c\uae30 \ud558\uba74, AngularDart\ub294 \uae30\uc874\uc758 Angular \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc774\ud574\ud558\ub294 \uac1c\ubc1c\uc790\uc5d0\uac8c \uad8c\uc7a5\ud558\uae30\uc5d0 \uc801\ud569\ud55c \uae30\uc220 \uc785\ub2c8\ub2e4. Angular\ub97c \ub2e4\ub904\ubcf4\uc9c0 \uc54a\uc740 \uacbd\uc6b0\ub77c\uba74, Flutter \uae30\ubc18\uc73c\ub85c \uac1c\ubc1c\uc744 \ud558\uac70\ub098, Angular\uc5d0 \ub300\ud55c \uc774\ud574\ub97c \ud55c\ud6c4 AngularDart\ub97c \ub2e4\ub8e8\ub294 \uac83\uc744 \uad8c\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

Dart \uc5b8\uc5b4\ub85c Web \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc73c\ub85c \uc9c0\uae08\uae4c\uc9c0 \ub450\uac00\uc9c0 \ubc29\ubc95\uc744 \uc124\uba85 \ud558\uc600\uc2b5\ub2c8\ub2e4. \uccab\uc9f8\ub294 Flutter\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc73c\ub85c, HTML\/CSS\uc5d0 \ub300\ud55c \uc774\ud574 \ubcf4\ub2e4\ub294 Flutter \ud504\ub808\uc784\uc6cc\ud06c\ub85c \ubaa8\ubc14\uc77c \ud504\ub85c\uadf8\ub798\ubc0d \ubc29\uc2dd\uacfc \ub3d9\uc77c\ud558\uac8c Web \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4. \ub450\ubc88\uc9f8\ub294 Dart for Web\uc73c\ub85c dart:html \ucf54\uc5b4 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec, HTML\/CSS\/JavaScript\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\uc2dd\uc5d0\uc11c JavaScript \ub300\uc2e0 Dart \uc5b8\uc5b4\uac00 \uc0ac\uc6a9\ub418\ub294 \ud615\ud0dc\uc600\uc2b5\ub2c8\ub2e4. \ub9c8\uc9c0\ub9c9\uc740 Web \uac1c\ubc1c\uc2dc \uc0ac\uc6a9\ub418\ub294 Angular \ud504\ub808\uc784\uc6cc\ud06c\ub97c Dart \uc5b8\uc5b4\ub85c porting\ud55c AnduglarDart \uc785\ub2c8\ub2e4. JavaScript\ub85c \uac1c\ubc1c\ub41c Angular \ud504\ub808\uc784\uc6cc\ud06c\uc5d0 \ub300\uc751\ud558\ub294 Dart\uc758 \ud504\ub808\uc784\uc6cc\ud06c\ub77c\uace0 \ubcf4\uba74 \ub429\ub2c8\ub2e4. \uacf5\uc2dd \ud648\ud398\uc774\uc9c0\ub294 https:\/\/angulardart.dev\/<\/a> \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n

AngularDart\ub294 \ud604\uc7ac \uacf5\uc2dd \ub9b4\ub9ac\uc988\ub294 \uc544\ub2c8\uace0, alpha \ubc84\uc804 \uc785\ub2c8\ub2e4. Google\uc740 Angular\uc5d0 \uc758\uc874\ud558\ub294 \ubbf8\uc158 \ud06c\ub9ac\ud2f0\uceec \uc571\uc774 \uacc4\uc18d \uc81c\ub300\ub85c \uc791\ub3d9\ud558\ub294\uc9c0 \ud655\uc778\ud558\uae30 \uc704\ud574\uc11c, \uac01 \ubc84\uc804\uc758 AngularDart (alpha \ub9b4\ub9ac\uc2a4 \ud3ec\ud568)\ub97c \ucca0\uc800\ud788 \ud14c\uc2a4\ud2b8 \ud558\uace0 \uc788\ub2e4\uace0 \uacf5\ud45c\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. alpha \ub808\uc774\ube14\uc740 API\uac00 \ubcc0\uacbd\ub420 \uac00\ub2a5\uc131\uc774 \uc788\uc73c\uba70, \uc55e\uc73c\ub85c \ub098\uc62c \ub9b4\ub9ac\uc2a4 (\ub610\ub294 \uc774\ud6c4 \ub9b4\ub9ac\uc2a4)\ub85c \uc778\ud574 \ucf54\ub4dc\uac00 \uc190\uc0c1 \ub420 \uc218 \uc788\uc74c\ub3c4 \uacbd\uace0\ud558\uace0 \uc788\uc73c\ub2c8 \ucc38\uc870 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n\n\n\n

\uc77c\ub2e8 \uac00\uc7a5 \uac04\ub2e8\ud55c AngularDart \uae30\ubc18\uc758 \ud504\ub85c\uadf8\ub7a8\uc744 \ub3cc\ub824\ubcf4\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574\uc11c, \uacf5\uc2dd \ud648\ud398\uc774\uc9c0\uc758 Get Started\ub97c \ubc29\ubb38( https:\/\/angulardart.dev\/guide\/setup<\/a> )\ud574 \ubd05\ub2c8\ub2e4. \uacf5\uc2dd \ubc84\uc804\uc774 \ub9b4\ub9ac\uc988 \ub418\uc9c0 \uc54a\uc740 \uc774\uc720\uc778\uc9c0, \uc5ec\ub7ec \ubc29\ubc95\uc774 \uc81c\uc2dc\ub418\uace0 \uc788\ub294\ub370, \uc5ec\uae30\uc11c\ub294 \uac00\uc7a5 \uac04\ub2e8\ud55c \ubc29\ubc95\uc744 \uc0ac\uc6a9\ud574 \ubcf4\uace0\uc790 \ud569\ub2c8\ub2e4. <\/p>\n\n\n\n

\uccab\ubc88\uc9f8\ub85c AngularDart \uae30\ubc18\uc758 \ud504\ub85c\uadf8\ub7a8\uc758 \uae30\ubcf8 \uace8\uaca9\uc774 \ub9cc\ub4e4\uc5b4\uc838 \uc788\ub294 \ud504\ub85c\uc81d\ud2b8\uc758 \uc555\ucd95 \ud654\uc77c\uc744 \ub2e4\uc6b4\ub85c\ub4dc \ubc1b\uc2b5\ub2c8\ub2e4. Get Started\uc5d0 \uacf5\uac1c\ub41c \ub9c1\ud06c\ub97c \ud1b5\ud574\uc11c\ub3c4 \ub2e4\uc6b4\ub85c\ub4dc \uac00\ub2a5\ud558\uc9c0\ub9cc, GitHub\uc5d0\uc11c \ub2e4\uc74c \uc8fc\uc18c\uc758 \ud654\uc77c\ub85c \ubc14\ub85c \ub2e4\uc6b4\ub85c\ub4dc \uac00\ub2a5\ud569\ub2c8\ub2e4. zip\uc73c\ub85c \uc555\ucd95\ub41c \ud654\uc77c\uc774\ubbc0\ub85c, \uc555\ucd95\uc744 \ud574\uc81c\ud55c \ud6c4, \ud76c\ub9dd\ud558\ub294 \ub514\ub809\ud1a0\ub9ac\uc5d0 \uc704\uce58\uc2dc\ud0b5\ub2c8\ub2e4.<\/p>\n\n\n\n

https:\/\/github.com\/angular-examples\/quickstart\/archive\/master.zip<\/a><\/p>\n\n\n\n

\ub450\ubc88\uc9f8\ub85c \uc555\ucd95\uc774 \ud574\uc81c\ub41c \ub514\ub809\ud1a0\ub9ac \uc548\uc73c\ub85c \uc774\ub3d9\ud574\uc11c CLI \ucee4\ub9e8\ub4dc\ub85c pub get \uba85\ub839\uc744 \uc218\ud589\ud558\uc5ec, AngularDart\ub97c \ud3ec\ud568\ud55c \ud328\ud0a4\uc9c0 \ud654\uc77c\uc744 \ub2e4\uc6b4 \ubc1b\uc544 \uc124\uce58\ud560 \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n

\uc138\ubc88\uc9f8\ub85c webdev serve \uba85\ub839\uc73c\ub85c \ubc14\ub85c \uc2e4\ud589\uc744 \ud574\ubcf4\ub3c4\ub85d \ud569\ub2c8\ub2e4. \uadf8\ub9ac\uace0 http:\/\/localhost:8080\uc73c\ub85c \uc811\uc18d\uc744 \ud569\ub2c8\ub2e4. \uc774\uc5d0 \ub530\ub978, \uc6f9 \ube0c\ub77c\uc6b0\uc800 \uc0c1\uc5d0 \ub2e8\uc21c\ud788 \uc544\ub798\uc640 \uac19\uc740 “Hello Angular” \ubb38\uc790\uc5f4\uc744 \ucd9c\ub825\ud558\ub294 \uae30\ub2a5\uc785\ub2c8\ub2e4. <\/p>\n\n\n\n

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

\uc18c\uc2a4 \ucf54\ub4dc\ub97c \uc0b4\ud3b4\ubcf4\uba74, \uba3c\uc800 index.html\uc758 body \ubd80\ubd84\uc774 \ub2e4\uc74c\ucc98\ub7fc \ub418\uc5b4 \uc788\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud2b9\uc774\ud558\uac8c <my-app> \ud0dc\uadf8\uac00 \uc788\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n

<body>\n  <my-app>Loading...<\/my-app>\n<\/body><\/pre>\n\n\n\n
\ub2e4\uc74c\uc73c\ub85c main.dart\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uc9e7\uac8c \ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. import\ub97c \ud1b5\ud574\uc11c AngulartDart \ud328\ud0a4\uc9c0\uc640 \uc774\uc5d0 \uae30\ubc18\ud558\ub294 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc758 template\ub97c \ubd88\ub7ec \uc624\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
import 'package:angular\/angular.dart';\nimport 'package:angular_app\/app_component.template.dart' as ng;\n\nvoid main() {\n  runApp(ng.AppComponentNgFactory);\n}<\/pre>\n\n\n\n
\uc0ac\uc2e4 \uc704\uc758 \ub450\uac1c \ud654\uc77c\ub85c\ub294 \uc65c \ud654\uba74\uc5d0 “Hello Angular”\uac00 \ucd9c\ub825\ub418\uc5c8\ub294\uc9c0 \uc774\ud574\ub97c \ud558\uae30 \uc5b4\ub835\uc2b5\ub2c8\ub2e4. \uc774 \ubd80\ubd84\uc744 \uc774\ud574\ud558\uae30 \uc704\ud574\uc11c\ub294 \uc555\ucd95\uc744 \ud574\uc81c\ud55c \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354\uc548\uc758 lib \uc11c\ube0c \ub514\ub809\ud1a0\ub9ac\uc5d0 \uc704\uce58\ud55c app_component.dart \ud654\uc77c\uc744 \uc5f4\uc5b4\ubd10\uc57c \ud569\ub2c8\ub2e4. \uc774 \ud654\uc77c\uc758 \ub0b4\uc6a9\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
import 'package:angular\/angular.dart';\n@Component(\n   selector: 'my-app',\n   template: 'Hello {{name}}',\n)\nclass AppComponent {\n   var name = 'Angular';\n}<\/pre>\n\n\n\n
AngularDart \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc740 components \ub4e4\ub85c \uad6c\uc131 \ub429\ub2c8\ub2e4. component\ub294 HTML template\uc640 component class\uc758 \uc870\ud569\uc73c\ub85c, \uc6f9 \ube0c\ub77c\uc6b0\uc800\uc758 \uc2a4\ud06c\ub9b0\uc5d0 \ub098\ud0c0\ub0a0 \ub0b4\uc6a9\uc744 \uc81c\uc5b4\ud558\ub294 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. \uc8fc\uc5b4\uc9c4 \uc608\uc81c\ub97c \ud1a0\ub300\ub85c \uc124\uba85\ud558\uba74, component\ub294 \ubaa8\ub450 @Component \ud0a4\uc6cc\ub4dc\ub85c \uc2dc\uc791 \ud569\ub2c8\ub2e4. component \uc548\uc758 selector \ubb38\ubc95\uc744 \ubcfc \uc218 \uc788\ub294\ub370, \uc774 \ubd80\ubd84\uc774 index.html\uc5d0\uc11c <my-app> \ud0dc\uadf8\ub85c \ub418\uc5b4 \uc788\ub294 \ubd80\ubd84\uc5d0 \ub300\ud574\uc11c, \uc5b4\ub5bb\uac8c \ucd9c\ub825\uc774 \ub418\ub294\uc9c0\ub97c \uacb0\uc815\ud569\ub2c8\ub2e4. \uc8fc\uc5b4\uc9c4 \uc608\uc81c\uc5d0\uc11c\ub294 “my-app” \ud0dc\uadf8 \ubd80\ubd84\uc744 \uc81c\uc5b4\ud558\ub294 \ub0b4\uc6a9\uc73c\ub85c ‘<h1>Hello {{name}}<\/h1>’\ub97c \uc0ac\uc6a9\ud55c\ub2e4\ub294 \uc758\ubbf8\uc5d0\uc11c template \ubb38\ubc95\uc774 \uc0ac\uc6a9\ub418\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc815\ub9ac\ud574\uc11c \uc774\uc57c\uae30 \ud558\uba74, index.html\uc758 <my-app>\uc744 \uc6f9 \ube0c\ub77c\uc6b0\uc800\uac00 \ucc98\ub9ac\ud574\uc57c \ud558\uba74, app_component.dart\uc5d0\uc11c “my-app”\uc744 selector\ub85c \uc9c0\uc815\ud55c component\ub97c \ucc3e\ub294 \uac83 \uc785\ub2c8\ub2e4. \uc774\ub807\uac8c \ud574\uc11c, \ub9e4\uce6d\ub418\ub294 component\ub97c \ucc3e\uc73c\uba74 \uc815\ud574\uc9c4 \ub0b4\uc6a9\uc73c\ub85c index.html\uc758 \ud574\ub2f9 \ubd80\ubd84\uc744 \uc5c5\ub370\uc774\ud2b8 \ud558\ub294\ub370, \ud604\uc7ac\ub294 ‘<h1>Hello {{name}}<\/h1>’ \ub0b4\uc6a9\uc73c\ub85c \ucd9c\ub825\uc744 \ud558\ub294 \uac83 \uc785\ub2c8\ub2e4. \uc774\ub294 HTML \uad6c\ubb38\uc778\ub370, \uc774\uc288\ub294 {{ … }}\uc73c\ub85c \ub418\uc5b4\uc9c4 \ubd80\ubd84\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n
\uc774\ub7f0 \ubb38\ubc95\uc744 AngularDart\uc5d0\uc11c\ub294 interpolation binding \ud45c\ud604\uc774\ub77c\uace0 \ubd80\ub985\ub2c8\ub2e4. \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158 \uc2e4\ud589\uc2dc, AngularDart\ub294 {{name}}\uc73c\ub85c \ub418\uc5b4\uc9c4 \ubd80\ubd84\uc744 component\uc758 name Property\uc758 \uac12\uc73c\ub85c \ub300\uccb4\ud558\ub294\ub370, \uc704\uc758 \ucf54\ub4dc\ub97c \ubcf4\uba74, \uc774 \uac12\uc774 ‘Angular’ \ubb38\uc790\uc5f4 \uc778 \uac83\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c, \ud654\uba74\uc5d0 “Hello Angular” \ubb38\uc790\uc5f4\uc774 \ucd9c\ub825\ub418\uac8c \ub429\ub2c8\ub2e4. \ub530\ub77c\uc11c var name = ‘Angular’; \uad6c\ubb38\uc744 var name = ‘World’;\uc73c\ub85c \ubcc0\uacbd\ud574 \ubd05\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \ub098\uc11c \ub2e4\uc2dc \ud654\uba74\uc744 \uc5c5\ub370\uc774\ud2b8 \ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \ucd9c\ub825\uc774 \ubc14\ub010 \uac83\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
\uc6b0\ub9ac\uac00 \uc2e4\ud589\ud55c \uc704\uc758 \ud504\ub85c\uadf8\ub7a8\uc744 \uacf5\uc2dd \uc0ac\uc774\ud2b8\uc5d0\uc11c\ub294 “Starter App”\uc774\ub77c\uace0 \ud558\uba70, \uacf5\uc2dd \uc0ac\uc774\ud2b8\uc778 https:\/\/angulardart.dev\/tutorial\/toh-pt0<\/a> \uc5d0\uc11c \ub354 \uc138\ubd80\uc801\uc778 \uc124\uba85\uc744 \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4. <\/p>\n\n\n\n
\ub9c8\ubb34\ub9ac<\/h4>\n\n\n\n
\uc774 Tutorial\uc5d0\uc11c\ub294 Flutter\ub97c \uc8fc\ub85c \ub2e4\ub8e8\ub294 \uac83\uc744 \ubc29\ud5a5\uc73c\ub85c \ud558\uace0 \uc788\uae30\uc5d0, AngularDart\uc5d0 \ub300\ud55c \uc18c\uac1c\ub294 \uc774 \uc815\ub3c4\ub85c \ub9c8\uce69\ub2c8\ub2e4. AngularDart\ub294 Angular \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc120\ud638\ud558\ub294 \uac1c\ubc1c\uc790\ub77c\uba74 \uad00\uc2ec\uc744 \uae30\uc6b8\uc5ec \ubcfc\ub9cc\ud55c \uae30\uc220\uc785\ub2c8\ub2e4. Angular\uc5d0 \ub300\ud55c \uc9c0\uc2dd\uc744 \uac16\ucd98 \uac1c\ubc1c\uc790\ub77c\uba74 \uacf5\uc2dd \uc0ac\uc774\ud2b8\uc758 Tutorial( https:\/\/angulardart.dev\/tutorial<\/a> )\uc744 \ub530\ub77c\ud574 \ubcf4\uba74\uc11c, \uae30\uc874 Angular\uc640 \uac19\uc740 \ubd80\ubd84\uacfc \ub2e4\ub978 \ubd80\ubd84\uc5d0 \ub300\ud574\uc11c \uc774\ud574\ud574 \ubcf4\ub3c4\ub85d \ud558\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n\n\n\n
\uc8fc\uc758\ud560 \uc0ac\ud56d\uc740 \uc544\uc9c1 \uacf5\uc2dd \ub9b4\ub9ac\uc988\uac00 \uc544\ub2cc \ub9cc\ud07c \uc5c5\ub370\uc774\ud2b8 \ub418\ub294 \uc0c1\ud669\uc744 \uc218\uc2dc\ub85c \ubaa8\ub2c8\ud130\ub9c1 \ud558\uba74\uc11c \uae30\uc220\uc744 \ud65c\uc6a9\ud560 \ud544\uc694\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Creative Commons License (CC BY-NC-ND)<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
< Web \uac1c\ubc1c \u2013 AngularDart for Web > \uacb0\ub860\ubd80\ud130 \uc774\uc57c\uae30 \ud558\uba74, AngularDart\ub294 \uae30\uc874\uc758 Angular \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc774\ud574\ud558\ub294 \uac1c\ubc1c\uc790\uc5d0\uac8c \uad8c\uc7a5\ud558\uae30\uc5d0 \uc801\ud569\ud55c \uae30\uc220 \uc785\ub2c8\ub2e4. Angular\ub97c \ub2e4\ub904\ubcf4\uc9c0 \uc54a\uc740 \uacbd\uc6b0\ub77c\uba74, Flutter \uae30\ubc18\uc73c\ub85c \uac1c\ubc1c\uc744 \ud558\uac70\ub098, Angular\uc5d0 …<\/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":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t