{"id":535,"date":"2012-02-05T14:48:55","date_gmt":"2012-02-05T14:48:55","guid":{"rendered":"http:\/\/brain.dailyon.net\/?p=535"},"modified":"2012-02-05T14:48:55","modified_gmt":"2012-02-05T14:48:55","slug":"knockoutjs-introduction","status":"publish","type":"post","link":"https:\/\/blog.goorigo.com\/?p=535","title":{"rendered":"KnockoutJS : introduction"},"content":{"rendered":"<h2>Knockout.js \uc18c\uac1c<\/h2>\n<p>\ucd9c\ucc98 \ud83d\ude15<a href=\"http:\/\/frends.kr\/topics\/knockout-js-%EC%86%8C%EA%B0%9C\/\">http:\/\/frends.kr\/topics\/knockout-js-%EC%86%8C%EA%B0%9C\/<\/a><\/p>\n<div>Posted by?<strong>Rhio.kim<\/strong>?on June 15th, 2011<\/div>\n<div>\n<p>&nbsp;<\/p>\n<h2><strong>\uc18c\uac1c<\/strong><\/h2>\n<p>\uc6d0\ubb38 \ud83d\ude15<a href=\"http:\/\/knockoutjs.com\/documentation\/introduction.html\">http:\/\/knockoutjs.com\/documentation\/introduction.html<\/a><\/p>\n<p>Knockout\uc740? \uae54\ub054\ud55c \ub370\uc774\ud130 \ubaa8\ub378\uc744 \uae30\ubc18\uc73c\ub85c \uc798 \ubc18\uc751\ud558\ub294 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \ub9cc\ub4e4 \uc218 \uc788\uac8c \ud574\uc8fc\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub2e4 . \uc0ac\uc6a9\uc790\uc758 \ubc18\uc751\uc774\ub098 \uc678\ubd80\uc758 \ub370\uc774\ud130 \uc18c\uc2a4\uc758 \ubcc0\ud654\uc5d0 \ub530\ub77c \ub3d9\uc801\uc73c\ub85c \ubcc0\ud558\ub294 UI\ub97c \ub9cc\ub4e4\uc5b4\uc57c \ud55c\ub2e4\uba74,? KO\ub97c \uc774\uc6a9\ud574\uc11c \uac04\ub2e8\ud558\uac8c \uc720\uc9c0 \uac00\ub2a5\ud558\ub3c4\ub85d \uad6c\ud604\ud560 \uc218 \uc788\ub2e4.<\/p>\n<p>&nbsp;<\/p>\n<h4>\uc8fc\uc694 \ud2b9\uc9d5:<\/h4>\n<ul>\n<li><strong>\uba4b\uc9c4 \uc758\uc874\uc131 \ucd94\uc801<\/strong>?? \ubc88\uc7a1\ud55c \ucf54\ub529\uc5c6\uc774 \ub370\uc774\ud130\uac00 \ubcc0\uacbd\ub420\ub54c\ub9c8\ub2e4 \uc790\ub3d9\uc73c\ub85c \uc801\uc808\ud55c UI\ub97c \uac31\uc2e0\ud55c\ub2e4.<\/li>\n<li><strong>\uc120\uc5b8\uc801 \ubc14\uc778\ub529<\/strong>?? \ub370\uc774\ud130\uc640 UI\ub97c \uc5f0\uacb0\ud558\ub294 \uac04\ub2e8\ud558\uace0 \ud655\uc2e4\ud55c \ubc29\ubc95\uc774\ub2e4.<\/li>\n<li><strong>\uc720\uc5f0\ud558\uace0 \uc644\uc804\ud55c \ud15c\ud50c\ub9bf<\/strong>?? \ubcf5\uc7a1\ud558\uace0 \ub3d9\uc801\uc778 UI\ub97c \ub2e4\uc911 \uc911\ucca9\ub41c \ud15c\ud50c\ub9bf\uc744 \uc0ac\uc6a9\ud574 \ub9cc\ub4e4 \uc218 \uc788\ub2e4.<\/li>\n<li><strong>\uc190\uc26c\uc6b4 \ud655\uc7a5<\/strong>?? \ubc14\uc778\ub529\uc744 \ucd94\uac00\ub85c \uc120\uc5b8\ud558\uba74 \uc6d0\ud558\ub294 \ucee4\uc2a4\ud1b0 \uae30\ub2a5\uc744 \ub2e8 \uba87 \uc904\uc758 \ucf54\ub4dc\ub9cc\uc73c\ub85c \uc27d\uac8c \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \uad6c\ud604\ud560 \uc218 \uc788\ub2e4.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4>\ub2e4\ub978 \uc7a5\uc810:<\/h4>\n<ul>\n<li><strong>\uc21c\uc218 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac<\/strong>?? \uae30\uc874 \uc6f9\uc11c\ubc84 \ud639\uc740 \ud074\ub77c\uc774\uc5b8\ud2b8\uce21 \uae30\uc220\uacfc \ubb38\uc81c\uc5c6\uc774 \ub3d9\uc791\ud55c\ub2e4.<\/li>\n<li><strong>\ud070 \ubcc0\uacbd\uc5c6\uc774 \uae30\uc874 \uc6f9 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uacfc \ud63c\uc6a9\uac00\ub2a5<\/strong><\/li>\n<li><strong>\ucef4\ud329\ud2b8<\/strong>?? \uc555\ucd95\uc774\uc804\uc758 \ud06c\uae30\ub294 25kb \ub0b4\uc678<\/li>\n<li><strong>\ubaa8\ub4e0 \uc8fc\uc694 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ub3d9\uc791<\/strong>?(IE 6+, \ud30c\uc774\uc5b4\ud3ed\uc2a4 2+, \ud06c\ub86c, \uc0ac\ud30c\ub9ac, \uae30\ud0c0)<\/li>\n<li><strong>\ud3ec\uc6a9\uc801\uc778 \uaddc\uaca9<\/strong>?? (BDD \ubc29\uc2dd\uc73c\ub85c \uac1c\ubc1c\ub428) \uae30\ub2a5\uc774 \ubb38\uc81c\uc5c6\uc774 \ub3d9\uc791\ud558\ub294\uc9c0 \uc0c8\ub85c\uc6b4 \ube0c\ub77c\uc6b0\uc800\ub098 \ud50c\ub7ab\ud3fc\uc5d0\uc11c \uc27d\uac8c \uac80\uc99d\ud560 \uc218 \uc788\ub2e4.<\/li>\n<\/ul>\n<p>\uc2e4\ubc84\ub77c\uc774\ud2b8\ub098 WPF\ub97c \uc0ac\uc6a9\ud574\uc628 \uac1c\ubc1c\uc790\ub294 KO\uac00? MVVM \ud328\ud134 \uc608\uc81c\uc778 \uac83\uc744 \ub208\uce58\ucc4c \uac83\uc774\ub2e4; Ruby\ub098 Ruby on Rails \ud639\uc740 \ub2e4\ub978 MVC \uae30\uc220\uc5d0 \ub354 \uc775\uc219\ud55c \uac1c\ubc1c\uc790\ub294 KO\ub97c? \uc120\uc5b8\ud615 MVC\uc758 \uc2e4\uc2dc\uac04 \ud615\ud0dc\ub85c \ubcfc\uc218\ub3c4 \uc788\ub2e4. \ub2e4\ub978 \uc758\ubbf8\uc5d0\uc11c, KO\ub294 UI\uac00 JSON \ub370\uc774\ud130\ub97c \uc870\uc791\ud558\ub3c4\ub85d \ub9cc\ub4dc\ub294 \uc77c\ubc18\uc801\uc778 \ubc29\ubc95 \uc911 \ud558\ub098\ub2e4.<\/p>\n<p>&nbsp;<\/p>\n<h3>\uc88b\ub2e4, \uc5b4\ub5bb\uac8c \uc0ac\uc6a9\ud558\ub294\uac00?<\/h3>\n<p>\uc694\uc57d:? \uc790\ub8cc\ubaa8\ub378\uc744 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uac1d\uccb4\ub85c \uc815\uc758\ud558\uace0 HTML5? \u2018data-bind\u2019 \uc18d\uc131\uc73c\ub85c \uac1d\uccb4\ub97c \ubc14\uc778\ub529\ud55c\ub2e4. \ud15c\ud50c\ub9bf\uc740 \ud544\uc694\ud55c \uacbd\uc6b0 \uc0ac\uc6a9\ud558\uba70 \uac15\uc81c\uc0ac\ud56d\uc774 \uc544\ub2c8\ub2e4.<\/p>\n<p>&nbsp;<\/p>\n<h3>\uc608\ubb38\uc744 \ubcf4\uc790<\/h3>\n<p>\ube44\ud589\uae30\ub85c \uc5ec\ud589\ud560\ub54c, \uc2b9\uac1d\uc6a9 \uc2a4\ud06c\ub9b0\uc5d0\uc11c \uc2dd\ub2e8\uc744 \uc120\ud0dd\ud558\ub294 \uacbd\uc6b0\ub97c \uc0dd\uac01\ud574\ubcf4\uc790. \uc2b9\uac1d\uc774 \uba54\ub274\ub97c \uc120\ud0dd\ud558\uba74 \uc790\uc138\ud55c \uc124\uba85\uacfc \uac00\uaca9\uc744 \ud45c\uc2dc\ud560 \uac83\uc774\ub2e4. \uc6b0\uc120, \uc120\ud0dd\uac00\ub2a5\ud55c \uc2dd\ub2e8\uc744 \uc815\uc758\ud55c\ub2e4:<\/p>\n<div>\n<div>var?availableMeals?=?[<br \/>\n{?mealName:?&#8217;Standard&#8217;,?description:?&#8217;Dry crusts of bread&#8217;,?extraCost:?0?},<br \/>\n{?mealName:?&#8217;Premium&#8217;,?description:?&#8217;Fresh bread with cheese&#8217;,?extraCost:?9.95},<br \/>\n{?mealName:?&#8217;Deluxe&#8217;,?description:?&#8217;Caviar and vintage Dr Pepper&#8217;,?extraCost:18.50?}<br \/>\n];<\/div>\n<\/div>\n<p>\uc704\uc758 \ud56d\ubaa9\ub4e4\uc744 UI\uc5d0 \ud45c\uc2dc\ud558\uae30 \uc704\ud574 \ub4dc\ub86d-\ub2e4\uc6b4 \ub9ac\uc2a4\ud2b8 (HTML?&lt;select&gt;?\uc694\uc18c)\uc5d0 \ubc14\uc778\ub529\ud55c\ub2e4. \uc608\ub97c \ub4e4\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4:<\/p>\n<div>\n<div>&lt;h3&gt;Meal upgrades&lt;\/h3&gt;<br \/>\n&lt;p&gt;ake your flight more bearable by selecting a meal to match your social and economic status.&lt;\/p&gt;<br \/>\nChosen meal:?&lt;select?data-bind=&#8221;options: availableMeals,<br \/>\noptionsText: &#8216;mealName'&#8221;&gt;&lt;\/select&gt;<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p>Knockout\uc744 \uae30\ub3d9\ud558\uc5ec \ubc14\uc778\ub529\uc774 \uc2e4\uc81c\ub85c \ub3d9\uc791\ud558\ub824\uba74?availableMeals?\uc120\uc5b8\ub2e4\uc74c\uc5d0 \ub2e4\uc74c\uacfc \uac19\uc740 \ub77c\uc778\uc744 \ucd94\uac00\ud55c\ub2e4:<\/p>\n<div>\n<div>var?viewModel?=?{<br \/>\n\/* \uc0dd\ub7b5 *\/<br \/>\n};<br \/>\nko.applyBindings(viewModel);?\/\/ Knockout\uc744 \ub3d9\uc791\uc2dc\ud0a8\ub2e4<\/div>\n<\/div>\n<p>\ubdf0 \ubaa8\ub378\uacfc MVVM\uc5d0 \ub300\ud55c \ub354 \uc790\uc138\ud55c \ub0b4\uc6a9\uc740 \uc5ec\uae30\ub97c \ucc38\uc870\ud558\uc790. \uc774\uc81c \ud398\uc774\uc9c0\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \ud45c\uc2dc\ub420 \uac83\uc774\ub2e4:<\/p>\n<p><a href=\"http:\/\/frends.kr\/wp-content\/uploads\/2011\/06\/working-dropdown-1.png\"><img loading=\"lazy\" src=\"http:\/\/frends.kr\/wp-content\/uploads\/2011\/06\/working-dropdown-1.png\" alt=\"\" width=\"598\" height=\"140\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h3>\uc120\ud0dd\uc774 \ubcc0\uacbd\ub418\uc5c8\uc744\ub54c \ubc18\uc751\ud558\uae30<\/h3>\n<p>\uc774\uc81c, \uc5b4\ub5a4 \ud56d\ubaa9\uc774 \uc120\ud0dd\ub418\uc5c8\ub294\uac00\ub97c \uae30\uc220\ud558\uae30 \uc704\ud574 \uac04\ub2e8\ud55c \ub370\uc774\ud130 \ubaa8\ub378\uc744 \uc120\uc5b8\ud558\uc790. \ub2e4\uc74c\uacfc \uac19\uc774 \ubdf0 \ubaa8\ub378\uc5d0 \uc18d\uc131(property)\uc744 \ucd94\uac00\ud55c\ub2e4:<\/p>\n<div>\n<div>var?viewModel?=?{<br \/>\nchosenMeal:?ko.observable(availableMeals[0])<br \/>\n};<\/div>\n<\/div>\n<p>\uc74c..??ko.observable\uc740 \ubb34\uc5c7\uc778\uac00?? KO\uc758 \uae30\ubcf8 \uac1c\ub150\uc774\ub2e4. UI\ub294 \uc774\uac83\uc758 \uac12\uc744 \u2018\uad00\ucc30\u2019\ud558\uace0 \ubcc0\uacbd\uc5d0 \ubc18\uc751\ud55c\ub2e4.? \uc704\uc758 \uc608\uc81c\uc5d0\uc11c\ub294 \uc120\ud0dd\ud55c \uba54\ub274\ub97c \ub098\ud0c0\ub0b4\ub294 \uac12\uc744 \uad00\ucc30\ud558\uba70,??availableMeal?\uccab\ubc88\uc9f8 \ud56d\ubaa9\uc744 \ucd08\uae30\uac12\uc73c\ub85c \uc124\uc815\ud55c\ub2e4. (\u2018Standard\u2019 \uba54\ub274)<\/p>\n<p>UI\uc5d0 \uc788\ub294 \ub4dc\ub86d-\ub2e4\uc6b4 \ub9ac\uc2a4\ud2b8\uc640?chosenMeal?\ubcc0\uc218\ub97c \uc5f0\uacb0\uc2dc\ud0a4\uc790.?&lt;select&gt;?\uc694\uc18c\uc758?data-bind?\uc18d\uc131(attribute)\uc744 \uc218\uc815\ud558\uc5ec? \uc774 \uc694\uc18c\uc758 value \ub294??chosenMeal?\ubaa8\ub378 \uc18d\uc131(property)\uc744 \uc77d\uace0 \uc368\uc57c\ud55c\ub2e4\uace0 \uc54c\ub824\uc900\ub2e4 :<\/p>\n<div>\n<div>Chosen meal:?&lt;select?data-bind=&#8221;options: availableMeals,<br \/>\noptionsText: &#8216;mealName&#8217;,<br \/>\nvalue: chosenMeal&#8221;&gt;&lt;\/select&gt;<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\uc774\ub807\uac8c \ud568\uc73c\ub85c\uc368?chosenMeal?\uc18d\uc131(property)\uc744 \uc77d\uace0 \uc4f0\uc9c0\ub9cc UI\ub97c \ucd94\uac00\ud574\uc57c \ub3d9\uc791\ud558\ub294 \uac83\uc744 \uc2e4\uc81c\ub85c \ubcfc\uc218 \uc788\ub2e4. \uc120\ud0dd\ub41c \uba54\ub274\uc758 \uac00\uaca9\uacfc \uc124\uba85\uc744 \ud45c\uc2dc\ud558\uc790:<\/p>\n<div>\n<div>&lt;p&gt;<br \/>\nYou&#8217;ve chosen:<br \/>\n&lt;b?data-bind=&#8221;text: chosenMeal().description&#8221;&gt;&lt;\/b&gt;<br \/>\n(price:?&lt;span?data-bind=&#8217;text: chosenMeal().extraCost&#8217;&gt;&lt;\/span&gt;)<br \/>\n&lt;\/p&gt;<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\uc0ac\uc6a9\uc790\uac00 \ub4dc\ub86d\ub2e4\uc6b4 \uba54\ub274\ub97c \uc120\ud0dd\ud568\uc5d0 \ub530\ub77c UI\uc758 \uc77c\ubd80\uac00 \uc790\ub3d9\uc73c\ub85c \uac31\uc2e0\ub41c\ub2e4:<\/p>\n<p><a href=\"http:\/\/frends.kr\/wp-content\/uploads\/2011\/06\/info-about-chosen-meal.png\"><img loading=\"lazy\" src=\"http:\/\/frends.kr\/wp-content\/uploads\/2011\/06\/info-about-chosen-meal.png\" alt=\"\" width=\"600\" height=\"141\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h3>\uad00\ucc30\uacfc \uc758\uc874\uc131 \ucd94\uc801\uc5d0 \ub300\ud574 \uc870\uae08 \ub354 \uc790\uc138\ud788<\/h3>\n<p>\ub9c8\uc9c0\ub9c9\uc73c\ub85c, \uac00\uaca9\uc744 \ud1b5\ud654 \uae30\ud638\ucc98\ub7fc \ud45c\uc2dc\ud558\uba74 \uba4b\uc9c8 \uac83\uc774\ub2e4. \uadf8\uc800 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud568\uc218\ub85c \uc815\uc758\ud55c\ub2e4..<\/p>\n<div>\n<div>function?formatPrice(price)?{<br \/>\nreturn?price?==?0???&#8221;Free&#8221;?:?&#8221;$&#8221;?+?price.toFixed(2);<br \/>\n}<\/div>\n<\/div>\n<p>\u2026 \uadf8\ub7f0\ud6c4, \ubc14\uc778\ub529\uc744 \uc218\uc815\ud558\uace0 \uc0ac\uc6a9\ud55c\ub2e4 \u2026<\/p>\n<div>\n<div>(price:?&lt;span?data-bind=&#8217;text: formatPrice(chosenMeal().extraCost)&#8217;&gt;&lt;\/span&gt;)<\/div>\n<\/div>\n<p>\u2026 \uc870\uae08 \ub098\uc544\uc9c4 UI\ub97c \ubcfc\uc218 \uc788\ub2e4:<\/p>\n<p><a href=\"http:\/\/frends.kr\/wp-content\/uploads\/2011\/06\/formatting-price.png\"><img loading=\"lazy\" src=\"http:\/\/frends.kr\/wp-content\/uploads\/2011\/06\/formatting-price.png\" alt=\"\" width=\"600\" height=\"135\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>\uac00\uaca9\uc744 \ud45c\uc2dc\ud558\ub294 \ud615\ud0dc\ub97c \ubcf4\uba74 \uc784\uc758\uc758 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\ub97c \ubc14\uc778\ub529\uc5d0 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc74c\uc744 \uc54c\uc218\uc788\ub2e4. \uadf8\ub807\uac8c\ud574\ub3c4 KO\ub294 \uc5ec\uc804\ud788 \ubc14\uc778\ub529\uacfc \uc5f0\uacb0\ub41c \uad00\uce21\ub300\uc0c1\uc744 \uac10\uc9c0\ud560\uc218 \uc788\ub2e4.? \uc774\uac83\uc774 KO\uac00 \ubaa8\ub378\uc774 \ubcc0\uacbd\ub418\uc5c8\uc744\ub54c \uac31\uc2e0\ud560 UI \ubd80\ubd84\uc774 \ubb34\uc5c7\uc778\uc9c0 \uc544\ub294 \ubc29\uc2dd\uc774\ub2e4. \ubb3c\ub860, \ud56d\uc0c1 \ubaa8\ub4e0 UI\ub97c \ub2e4\uc2dc \ud45c\uc2dc\ud558\uc9c0\ub294 \uc54a\uace0 \uc758\uc874\uc131\uc774 \ubcc0\uacbd\ub41c \ubd80\ubd84\ub9cc \ubcc0\uacbd\ud55c\ub2e4.<\/p>\n<p>\uad00\uce21\ub300\uc0c1\uc744 \ub2e4\ub978 \uad00\uce21\ub300\uc0c1\uc73c\ub85c \uc911\ucca9\ud574\uc11c \uc5f0\uacb0\ud560 \uc218 \uc788\ub2e4 (\uc608; \uc218\ub7c9\ubcc4 \uac00\uaca9 \ud569\uacc4).? \uc5f0\uacb0 \uace0\ub9ac\uc5d0\uc11c \uc5b4\ub5a4 \uac83\uc774 \ubcc0\uacbd\ub418\uba74 \uadf8 \uc704\uce58\uc5d0\uc11c \ub354 \uae4a\uc740 \uc758\uc874\uc131\uc740 \uc7ac \ud3c9\uac00\ub418\uace0 \uc5f0\uacb0\ub41c \ubaa8\ub4e0 UI\uac00 \uac31\uc2e0\ub41c\ub2e4.? \uba85\uc2dc\uc801\uc73c\ub85c \uad00\uce21\ub300\uc0c1 \uac04\uc758 \uad00\uacc4\ub97c \uc120\uc5b8\ud560 \ud544\uc694\ub294 \uc5c6\ub2e4;? \uc2e4\uc2dc\uac04\uc73c\ub85c \ucf54\ub4dc\ub97c \uc218\ud589\ud558\uba74\uc11c \ub0b4\ubd80\uc801\uc73c\ub85c \uc758\uc874\uc131\uc744 \uc54c\uac8c\ub41c\ub2e4.<\/p>\n<p>\uad00\uce21\ub300\uc0c1 \uacfc \uad00\uce21\ub300\uc0c1 \ubc30\uc5f4\uc5d0 \ub300\ud574\uc11c \ub354 \uc54c\uc544\ubcfc \uc218\uc788\ub2e4. \uc704\uc758 \uc608\uc81c\ub294 \uac04\ub2e8\ud574\uc11c KO\uc758 \ud6a8\uc728\uc131\uc744 \ubaa8\ub450 \ubcf4\uc5ec\uc8fc\uc9c0\ub294 \ubabb\ud588\ub2e4.? \ub2e4\ub978 \ub0b4\uc7a5 \ubc14\uc778\ub529\uacfc? \ud15c\ud50c\ub9bf\ud305\uc5d0 \ub300\ud574\uc11c\ub3c4 \uc54c\uc544 \ubcfc \uc218 \uc788\ub2e4.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h3>KO\ub294 jQuery (\ud639\uc740 PrototypeJS \ub098 \uae30\ud0c0)\uc640 \uacbd\uc7c1\uad00\uacc4\uc778\uac00? \uc544\ub2c8\uba74 \uac19\uc774 \uc0ac\uc6a9\ud560\uc218 \uc788\ub098?? Is KO intended to compete with jQuery (or Prototype, etc.) or work with it?<\/h3>\n<p>\ubaa8\ub450\uac00 jQuery\ub97c \uc88b\uc544\ud55c\ub2e4!? \uc9c0\ub09c \ub0a0 \uaf34\ubcf4\uae30 \uc2eb\uace0 \uc77c\uad00\uc131\uc5c6\ub294 DOM API \uc0ac\uc6a9\uc758 \uba4b\uc9c4 \ub300\uc548\uc774\uae30 \ub54c\ubb38\uc774\ub2e4. jQuery\ub294 \uc6f9\ud398\uc774\uc9c0 \uc694\uc18c \uc870\uc791\uacfc \uc774\ubca4\ud2b8 \ucc98\ub9ac\ub97c \uc800\uc218\uc900\ubc29\uc2dd\uc73c\ub85c \ud6cc\ub96d\ud558\uac8c \ucc98\ub9ac\ud55c\ub2e4. \uc800\uc218\uc900 \ubc29\uc2dd\uc73c\ub85c DOM?\uc870\uc791\uc744 \ud558\uae30 \uc704\ud574\uc11c\ub294 \ub2f9\uc5f0\ud788 jQuery\ub97c \uc0ac\uc6a9\ud558\uc9c0\ub9cc, KO\ub294 \ub2e4\ub978 \uc885\ub958\uc758 \ubb38\uc81c\ub97c \ud574\uacb0\ud55c\ub2e4.<\/p>\n<p>UI\uac00 \ubcf5\uc7a1\ud574\uc9c0\uace0 \uae30\ub2a5\uc774 \uc911\ucca9\ub428\uc5d0 \ub530\ub77c? jQuery\ub9cc \uc0ac\uc6a9\ud560 \uacbd\uc6b0 \ucf54\ub4dc\ub97c \uac04\uacb0\ud558\uac8c \uc720\uc9c0\ud558\ub294 \uac83\uc774 \uc27d\uc9c0 \uc54a\ub2e4.? \uc608\ub97c \ub4e4\uc5b4\ubcf4\uc790. \ubaa9\ub85d\uc5d0 \uc788\ub294 \ud56d\ubaa9\uc744 \ud45c\uc2dc\ud558\ub824\uace0?\ud560 \ub54c, \ubaa9\ub85d\uc5d0 \uc788\ub294 \ud56d\ubaa9 \uac2f\uc218\ub97c \ud45c\uc2dc\ud558\uace0? 5\uac1c \uc774\ud558\uc758 \ud56d\ubaa9\uc774 \uc788\uc744 \ub54c\ub9cc? \u2018Add\u2019 \ubc84\ud2bc\uc744 \ud65c\uc131\ud654 \ud558\uace0 \uc2f6\ub2e4\uace0 \ud558\uc790.? jQuery\ub294 \ub0b4\ubd80\uc801\uc73c\ub85c \ub370\uc774\ud130 \ubaa8\ub378\uc774\ub77c\ub294 \ucee8\uc149\uc774 \uc5c6\ub2e4.? \ub530\ub77c\uc11c,? \ud0dc\uc774\ube14\uc5d0\uc11c TR \ud0dc\uadf8\uc758 \uac2f\uc218\ub97c \uacc4\uc0b0\ud558\uac70\ub098 \ud2b9\uc815 CSS \ud074\ub798\uc2a4\ub97c \uac00\uc9c4 DIV\uc758 \uac2f\uc218\ub97c \ud1b5\ud574 \ub0b4\ubd80\uc801\uc73c\ub85c \ucc38\uc870\ud560 \ud56d\ubaa9 \uac2f\uc218\ub97c \uc5bb\ub294\ub2e4.? \uc5b4\ub5a4 SPAN \uc694\uc18c\uc5d0 \ud56d\ubaa9\uac2f\uc218\uac00 \ud45c\uc2dc\ub418\uc5c8\ub2e4\uba74? \uc0ac\uc6a9\uc790\uac00 \ud56d\ubaa9\uc744 \ucd94\uac00 \ud588\uc744 \ub54c SPAN \ub0b4\uc6a9\uc744 \uac31\uc2e0\ud558\ub294 \uac83\uc744 \uc78a\uc9c0 \ub9d0\uc544\uc57c \ud55c\ub2e4. \ub610\ud55c, TR\uc758 \uac2f\uc218\uac00 5\uac1c \uc77c\ub54c? \u2018Add\u2019 \ubc84\ud2bc\uc744 \uc0ac\uc6a9\ud558\uc9c0 \ubabb\ud558\uac8c \ud574\uc57c\ud55c\ub2e4.? \ub098\uc911\uc5d0? \u2018\uc0ad\uc81c\u2019 \ubc84\ud2bc\ub3c4 \uad6c\ud604\ud574\ub2ec\ub77c\uace0 \uc694\uccad\uc744 \ud558\uba74? \ud074\ub9ad\ud560 \ub54c\ub9c8\ub2e4 \uc5b4\ub290 DOM \uc694\uc18c\ub97c \ubcc0\uacbd\ud574\uc57c\ud558\ub294\uc9c0 \uc54c\uc544 \ub0b4\uc57c\ud55c\ub2e4.<\/p>\n<p>&nbsp;<\/p>\n<h3>KO\ub294 \uc5b4\ub5bb\uac8c \ub2e4\ub978\uac00? How is Knockout different?<\/h3>\n<p>KO\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc740 \ub2e4\ub978 \ud504\ub808\uc784\uc6cc\ud06c \ud639\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\ubcf4\ub2e4 \ud6e8\uc52c \uc27d\ub2e4.? \uc77c\uad00\uc131 \ubb38\uc81c\ub97c \uc5fc\ub824\ud560 \ud544\uc694\ub3c4 \uc5c6\uc774 \uc815\uad50\ud558\uac8c \ud655\uc7a5\ud560 \uc218 \uc788\ub2e4.??\uadf8\ub0e5 \ud56d\ubaa9\uc744 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubc30\uc5f4\ub85c \ub098\ud0c0\ub0b4\uace0 \uadf8 \ubc30\uc5f4\uc744 TABLE\uc774\ub098 DIV\ub85c \ubcc0\uacbd\ud558\ub3c4\ub85d? \ud15c\ud50c\ub9bf\uc744 \uc4f0\uc790.? \ubc30\uc5f4\uc774 \ubcc0\uacbd\ub420 \ub54c \ub9c8\ub2e4??UI\ub294 \uc801\uc808\ud788 \ubc14\ub010\ub2e4 ( \uc0c8 TR\uc744 \uc5b4\ub5bb\uac8c\/\uc5b4\ub514\uc5d0 \ucd94\uac00\ud558\ub294\uc9c0 \uc54c \ud544\uc694 \uc5c6\ub2e4) .? UI \ub098\uba38\uc9c0\ub294 \ub3d9\uae30\ud654\uc0c1\ud0dc\ub97c \uc720\uc9c0\ud55c\ub2e4. \uc608\ub97c \ub4e4\uc5b4,? \ud56d\ubaa9\uac2f\uc218\ub97c \ud45c\uc2dc\ud558\uae30 \uc704\ud574 SPAN\uc5d0 \ubc14\uc778\ub529\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc120\uc5b8\ud560 \uc218 \uc788\ub2e4 (\ud15c\ud50c\ub9bf \ubfd0\ub9cc \uc544\ub2c8\ub77c \ud398\uc774\uc9c0\ub0b4 \uc5b4\ub514\ub4e0 \ub123\uc744 \uc218 \uc788\ub2e4):<\/p>\n<div>\n<div>There are?&lt;span?data-bind=&#8221;text: myItems().count&#8221;&gt;&lt;\/span&gt;?items<\/div>\n<\/div>\n<p>\uc774\uac8c \uc804\ubd80\ub2e4. \uac31\uc2e0\ud558\uae30?\uc704\ud55c \ucf54\ub4dc\ub97c \uc791\uc131\ud560 \ud544\uc694\ub3c4 \uc5c6\ub2e4.?myItems?\ubc30\uc5f4\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \uc790\ub3d9\uc73c\ub85c \uac31\uc2e0\ub41c\ub2e4. \ube44\uc2b7\ud558\uac8c, \ud56d\ubaa9 \uac2f\uc218\uc5d0 \ub530\ub77c \u2018Add\u2019 \ubc84\ud2bc\uc744 \ucf1c\uace0 \ub044\ub824\uace0 \ud55c\ub2e4\uba74, \uadf8\ub0e5 \ub2e4\uc74c\uacfc \uac19\uc774 \ucd94\uac00\ud558\uc790:<\/p>\n<div>\n<div>&lt;button?data-bind=&#8221;enable: myItems().count &lt; 5&#8243;&gt;Add&lt;\/button&gt;<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p>\ub098\uc911\uc5d0,? \u2018\uc0ad\uc81c\u2019 \uae30\ub2a5\uc744 \uad6c\ud604\ud574\uc57c \ud560 \ub54c? UI \uc5b4\ub290 \ubd80\ubd84\uacfc \uc0c1\ud638\uc791\uc6a9 \ud574\uc57c \ud560\uc9c0 \uc54c \ud544\uc694\uac00 \uc5c6\uace0, \ub0b4\ubd80 \ub370\uc774\ud130 \ubaa8\ub378\uc744 \uc218\uc815\ud558\uae30\ub9cc \ud558\uba74 \ub41c\ub2e4.<\/p>\n<p>\uc694\uc57d: KO\ub294 jQuery \ub610\ub294 \uc720\uc0ac\ud55c DOM API\uc640 \uacbd\uc7c1\ud558\uc9c0 \uc54a\ub294\ub2e4.? KO\ub294 \ub370\uc774\ud130 \ubaa8\ub378\uc744 UI\uc640 \uc5f0\uacb0\ud558\ub294 \uace0\uc218\uc900\uc758 \ub2e4\ub978 \ubc29\ubc95\uc744 \uc81c\uacf5\ud55c\ub2e4. KO\ub294 jQuery\uc5d0 \uc758\uc874\ud558\uc9c0 \uc54a\uc544\uc11c \ub3d9\uc2dc\uc5d0 jQuery\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \uc774\ub7f0 \uc810 \ub54c\ubb38\uc5d0? \uc5d0\ub2c8\uba54\uc774\uc158 \ud6a8\uacfc\ub97c \uc904 \uacbd\uc6b0 KO\ub97c \uc0ac\uc6a9\ud558\uba74 \ud6a8\uacfc\uc801\uc774\ub2e4.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Knockout.js \uc18c\uac1c \ucd9c\ucc98 \ud83d\ude15http:\/\/frends.kr\/topics\/knockout-js-%EC%86%8C%EA%B0%9C\/ Posted by?Rhio.kim?on June 15th, 2011 &nbsp; \uc18c\uac1c \uc6d0\ubb38 \ud83d\ude15http:\/\/knockoutjs.com\/documentation\/introduction.html Knockout\uc740? \uae54\ub054\ud55c \ub370\uc774\ud130 \ubaa8\ub378\uc744 \uae30\ubc18\uc73c\ub85c \uc798 \ubc18\uc751\ud558\ub294 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \ub9cc\ub4e4 \uc218 \uc788\uac8c \ud574\uc8fc\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub2e4 . \uc0ac\uc6a9\uc790\uc758&hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/535"}],"collection":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=535"}],"version-history":[{"count":0,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/535\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}