{"id":1360,"date":"2013-08-01T07:07:58","date_gmt":"2013-08-01T07:07:58","guid":{"rendered":"http:\/\/brain.payzip.co.kr\/?p=1360"},"modified":"2013-08-01T07:07:58","modified_gmt":"2013-08-01T07:07:58","slug":"%ec%9e%90%eb%b0%94%ec%8a%a4%ed%81%ac%eb%a6%bd%ed%8a%b8%ed%8c%a8%ed%84%b4-%eb%aa%a8%eb%93%88%ed%8c%a8%ed%84%b4module-pattern","status":"publish","type":"post","link":"https:\/\/blog.goorigo.com\/?p=1360","title":{"rendered":"\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ud328\ud134 &#8211; \ubaa8\ub4c8\ud328\ud134(module pattern)"},"content":{"rendered":"<p>&nbsp;<\/p>\n<div>\n<ol>\n<li>\n<div><\/div>\n<div>\/\/Parttern 1<\/div>\n<\/li>\n<li>\n<div>var\u00a0namespace\u00a0=\u00a0(function(){<\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0\u00a0var\u00a0namespace\u00a0=\u00a0{};<\/div>\n<\/li>\n<li>\n<div><\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0\u00a0var\u00a0i \u00a0=\u00a00;<\/div>\n<\/li>\n<li>\n<div><\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0\u00a0function\u00a0func1(){\u00a0\/\/\ub0b4\ubd80 \ud568\uc218<\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0 \u00a0 \u00a0\u00a0alert(i);<\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0\u00a0};<\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0\u00a0namespace.func2\u00a0=\u00a0function(){\u00a0\/\/\uc678\ubd80 \ub178\ucd9c \ud568\uc218<\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0 \u00a0 \u00a0\u00a0alert(i);<\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0\u00a0};<\/div>\n<\/li>\n<li>\n<div><\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0\u00a0return\u00a0namespace;<\/div>\n<\/li>\n<li>\n<div>})();<\/div>\n<\/li>\n<li>\n<div><\/div>\n<\/li>\n<li>\n<div>\/\/Parttern 2 \uad8c\uc7a5\ud55c\ub2e4 !!!!<\/div>\n<\/li>\n<li>\n<div>var\u00a0namespace\u00a0=\u00a0(function(namespace,\u00a0$,\u00a0undefined){<\/div>\n<div>\/\/\u00a0$<span style=\"color: #339933;\">\u00a0=\u00a0<\/span>jQuery\uc784 \uc804\uc5ed\ubc88\uc218\ub97c \uc9c0\uc5ed\ubcc0\uc218\ub85c \uc804\ub2ec\ud558\uba74 \uc2e4\ud589\ud568\uc218\ub0b4\uc5d0\uc11c \uc9c0\uc5ed\ubcc0\uc218\ub85c \uc0ac\uc6a9\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/\ud558\uae30\ub54c\ubb38\uc5d0 \ud0d0\uc0c9\uc791\uc5c5\uc774 \uc880\ub354 \ube68\ub77c\uc9c4\ub2e4<\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0\u00a0var\u00a0i \u00a0=\u00a00;<\/div>\n<\/li>\n<li>\n<div><\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0\u00a0function\u00a0func1(){\u00a0\/\/\ub0b4\ubd80 \ud568\uc218 private<\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0 \u00a0 \u00a0\u00a0alert(i);<\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0\u00a0};<\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0\u00a0namespace.func2\u00a0=\u00a0function(){\u00a0\/\/\uc678\ubd80 \ub178\ucd9c \ud568\uc218 public<\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0 \u00a0 \u00a0\u00a0alert(i);<\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0\u00a0};<\/div>\n<\/li>\n<li>\n<div><\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0\u00a0return\u00a0namespace; \/\/\ub9ac\ud134\uc744 \ud574\uc57c\ud568<\/div>\n<\/li>\n<li>\n<div>})(window.namespace\u00a0||\u00a0{},jQuery);\u00a0\/\/\uac1d\uccb4 \uc5c6\uc73c\uba74 \uc0dd\uc131<\/div>\n<\/li>\n<li>\n<div><\/div>\n<\/li>\n<li>\n<div>\/\/Parttern 3<\/div>\n<\/li>\n<li>\n<div>(function(namespace\u00a0,\u00a0$,\u00a0undefined)\u00a0{<\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0 \u00a0 \u00a0\u00a0var\u00a0i \u00a0=\u00a00;<\/div>\n<\/li>\n<li>\n<div><\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0\u00a0function\u00a0func1(){\u00a0\/\/\ub0b4\ubd80 \ud568\uc218<\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0 \u00a0 \u00a0\u00a0alert(i);<\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0\u00a0};<\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0\u00a0namespace.func2\u00a0=\u00a0function(){\u00a0\/\/\uc678\ubd80 \ub178\ucd9c \ud568\uc218<\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0 \u00a0 \u00a0\u00a0alert(i);<\/div>\n<\/li>\n<li>\n<div>\u00a0 \u00a0\u00a0};<\/div>\n<\/li>\n<li>\n<div>})(window.namespace\u00a0=\u00a0window.namespace\u00a0||\u00a0{},\u00a0jQuery);<\/div>\n<\/li>\n<\/ol>\n<\/div>\n<div><\/div>\n<div><\/div>\n<div>&#8212; \uc544\ub798 \uae00\uc740 \ud37c\uc634\u00a0<a href=\"http:\/\/oneblog.thoth.kr\/\">http:\/\/oneblog.thoth.kr\/<\/a><\/div>\n<div><\/div>\n<div>\n<div>\n<div>\n<div><strong>\ubaa8\ub4c8 (Modules)<\/strong><\/div>\n<div><strong><br \/>\n<\/strong><\/div>\n<div>\uc5ec\ub7ec\ubd84\uc774 \ub9cc\ub4e0 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc0ac\uc6a9\ud558\ub294 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\ub4e4\uc911 \uc5bc\ub9c8\ub098 \ub9ce\uc740 \uac83\ub4e4\uc774 \uc544\ub798\ucc98\ub7fc \ud30c\uc77c\uc5d0 \uc0bd\uc785\ub418\uc5b4 \uc788\ub098\uc694? (HTML \ud30c\uc77c\uc774\ub77c\uace0 \ub9d0\ud558\uc9c0 \uc54a\uc740\uac83\uc5d0 \uc8fc\ubaa9. HTML\uc774\ub77c\uba74 \uc5b8\uae09\ud560 \uac00\uce58\ub3c4 \uc5c6\uc2b5\ub2c8\ub2e4&#8230;)<\/div>\n<div><\/div>\n<div>\n<table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td>\n<div><code>var<\/code>\u00a0<code>someSharedValue = 10;<\/code><\/div>\n<div><code>var<\/code>\u00a0<code>myFunction =<\/code>\u00a0<code>function<\/code><code>(){<\/code>\u00a0<code>\/\/do something }<\/code><\/div>\n<div><code>var<\/code>\u00a0<code>anotherImportantFunction =<\/code>\u00a0<code>function<\/code><code>() {<\/code>\u00a0<code>\/\/do more stuff }<\/code><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div><\/div>\n<\/div>\n<div>\uc774 \uae00\uc744 \uc77d\ub294 \uc2dc\uc810\uc5d0, \uc5ec\ub7ec\ubd84\uc774 \ub2e4\ub8e8\ub294(\ud639\uc740 \ub9cc\ub4dc\ub294) \ucf54\ub4dc\ub294 \ub300\ubd80\ubd84 \uc704\ucc98\ub7fc \ub418\uc5b4\uc788\uc744\uac81\ub2c8\ub2e4. \uc5ec\ub7ec\ubd84\uc744 \ube44\ub09c\ud558\ub824\ub294\uac74 \uc544\ub2d9\ub2c8\ub2e4. \uc800\ub3c4 \uc624\ub798\ub3c4\ub85d \uc774\ub807\uac8c \ucf54\ub529\ud588\uc5c8\uc73c\ub2c8 \uae4c\uc694. \uc774\ub7f0 \ucf54\ub4dc\uc758 \ubb38\uc81c\uc810\uc740 \uc5ec\ub7ec\uac00\uc9c0\uac00 \uc788\uc2b5\ub2c8\ub2e4\ub9cc \uc5ec\uae30\uc11c\ub294 \uc804\uc5ed \ub124\uc784\uc2a4\ud398\uc774\uc2a4\ub97c \uc9c0\uc800\ubd84\ud558\uac8c \ub9cc\ub4e4\uc5b4 \ubc84\ub9b0\ub2e4\ub294 \uac83\uc5d0 \uc9d1\uc911\ud574 \ubd05\uc2dc\ub2e4(\uc5ed\uc790\uc8fc: \uc804\uc5ed \ub124\uc784\uc2a4\ud398\uc774\uc2a4\ub294 \uc18c\uc2a4\ucf54\ub4dc\ub0b4\uc758 \ubaa8\ub4e0 \uc601\uc5ed\uc5d0\uc11c \ucc38\uc870\uac00 \uac00\ub2a5\ud558\uae30 \ub54c\ubb38\uc5d0, \uc5ec\ub7ec \uc18c\uc2a4\ub97c \ud568\uaed8 \ub85c\ub4dc\ud560 \uacbd\uc6b0 \uc804\uc5ed \ubcc0\uc218\uac00 \uac19\uc740 \uc774\ub984\uc744 \uac00\uc9c0\uba74 \uc18c\uc2a4\ucf54\ub4dc\uac00 \ub9db\uc774 \uac11\ub2c8\ub2e4.. \uac00\uc694). \uc774\ub807\uac8c \ucf54\ub4dc\ub97c \uc9dc\uba74 \ubaa8\ub4e0 \uba54\uc11c\ub4dc\uc640 \ubcc0\uc218\uac00 \uc804\uc5ed \ub124\uc784\uc2a4\ud398\uc774\uc2a4\uc5d0 \ub4e4\uc5b4\uac00\uae30 \ub54c\ubb38\uc5d0 \uc598\ub124\ub97c \uc804\uc5ed \ubcc0\uc218\uc5d0\uc11c \uac77\uc5b4\ub0bc \ud544\uc694\uac00 \uc788\ub294\ub370, \uc5ec\uae30\uc5d0 \uc0ac\uc6a9\ub418\ub294\uac83\uc774 &#8216;\ubaa8\ub4c8 \ud328\ud134&#8217; \uc785\ub2c8\ub2e4. \ubaa8\ub4c8\uc740 \uc5ec\ub7ec\uac00\uc9c0 \ubaa8\uc2b5\uc73c\ub85c \ub9cc\ub4e4\uc218 \uc788\uc9c0\ub9cc \uc26c\uc6b0\uba74\uc11c\ub3c4 \uc694\uc0c8 \uc720\ud589\ud558\ub294 \ubc29\ubc95\uc774 IIFE(Immediately Invoked Founction Expression: \uc120\uc5b8\uacfc \ub3d9\uc2dc\uc5d0 \uc2e4\ud589\ub418\ub294 \ud568\uc218 \ud45c\ud604) \uc785\ub2c8\ub2e4.<\/div>\n<div><\/div>\n<div>\uc774\ub984\uc740 \uae38\uace0\ub3c4 \uac70\ucc3d\ud558\uc9c0\ub9cc, \ucf54\ub4dc\ub85c \uc368\ubcf4\uba74 \uac04\ub2e8\ud569\ub2c8\ub2e4.<\/div>\n<div>\n<table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td>\n<div><code>(<\/code><code>function<\/code><code>(){<\/code><\/div>\n<div><code>\u00a0 \u00a0 \/\/do some work<\/code><\/div>\n<div><code>})();<\/code><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div><\/div>\n<\/div>\n<div>IIFE\ub97c \uc774\uc804\uc5d0 \uc368\ubcf8\uc801\uc774 \uc5c6\ub294 \ubd84\ub4e4\uc740, &#8216;\ubb50 \uc774\ub807\uac8c \uc0dd\uaca8\uba39\uc740 \ucf54\ub4dc\uac00 \ub2e4\uc788\ub098&#8230;&#8217; \ud558\uc2e4 \uac81\ub2c8\ub2e4. \uc774 \ucf54\ub4dc\uc5d0\ub294 \uad04\ud638\uac00 \ub9ce\uc774 \ub098\uc640 \ud63c\ub780\uc2a4\ub7ec\uc6b8\uc218 \uc788\ub294\ub370, \uae30\ubcf8\uc801\uc73c\ub85c\ub294 \uc775\uba85\ud568\uc218(anonymous function)\uc640 \uadf8 \ub4a4\uc5d0 () \ub85c \ud568\uc218\ub97c\u00a0\uc2e4\ud589\ud558\ub294 \ubd80\ubd84\uc73c\ub85c \uc774\ub8e8\uc5b4\uc838 \uc788\uc2b5\ub2c8\ub2e4. \uc989 \ud568\uc218 \uc120\uc5b8 + \uc2e4\ud589\uc774 \ud55c\ubc88\uc5d0 \uc774\ub8e8\uc5b4 \uc9c0\ub294\uac83\uc774\uc8e0. \uadf8\ub798\uc11c &#8220;Immediately invoke function&#8221;\uac00 IIFE\ub77c\ub294 \uc774\ub984\uc5d0 \ud3ec\ud568\ub418\uc5b4\uc788\ub294\uac83\uc774\uace0, \ub098\uba38\uc9c0 &#8220;expression&#8221; \ubd80\ubd84\uc740 \uc774 \ucf54\ub4dc\uc18d\uc758 \ud568\uc218\uac00 \uc775\uba85\ud568\uc218\uc774\ubbc0\ub85c statement\uac00 \uc544\ub2cc expression\uc5d0 \ud574\ub2f9\ub428\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. (\uc5ed\uc790\uc8fc: statement \uc640 expression\uc740 \uc5ec\ub7ec\uac00\uc9c0\u00a0\ucc28\uc774\uc810\uc774 \uc788\ub294\ub370, \uc5ec\uae30\uc11c\ub294 expression\uc774 \ubaa8\uc5ec\uc11c statement \uac00 \ub418\uace0, \uc138\ubbf8\ucf5c\ub860\uc73c\ub85c \ud55c \ubb38\uc7a5\uc744 \uc644\uc131\ud574\uc57c statement \uac00 \ub41c\ub2e4 \uc815\ub3c4\ub85c \uc54c\uace0 \ub118\uc5b4\uac00\uba74 \ub420\ub4ef \ud569\ub2c8\ub2e4. \ub610\ud55c \ud568\uc218\uac00 statement \uac00 \ub418\ub824\uba74 \uc774\ub984\uc744 \uac00\uc838\uc57c \ud569\ub2c8\ub2e4). \uc774 \uacfc\uc815\uc740 \uc775\uba85\ud568\uc218 \uac89\uc5d0 ()\ub85c \uac10\uc2f8\uc8fc\ub294 \ubd80\ubd84\ub54c\ubb38\uc5d0 \uac00\ub2a5\ud569\ub2c8\ub2e4. \ub610\ud55c \uc774\ub7f0 \ud45c\ud604 (\ud568\uc218 \uc120\uc5b8 \ubc16\uc5d0 ()\ub85c \uac10\uc2f8\ub294 \uac83) \ub54c\ubb38\uc5d0 IIFE \ubc29\uc2dd\uc774 \ucf54\ub4dc\uc5d0 \uc0ac\uc6a9\ub418\uc5c8\ub2e4\ub294\uac83\uc744 \uc27d\uac8c \uc54c\uc544\ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/div>\n<div><\/div>\n<div>\uc774\uc81c \uad6c\ud604\ubc29\ubc95\uc744 \uc54c\uc558\uc73c\ub2c8, \uc774\uac78 \uc65c \uc4f0\ub294\uc9c0\ub3c4 \uc54c\uc544\ubd05\uc2dc\ub2e4. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c\ub294 scope\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 \ud568\uc218\ub97c \uc368\uc57c \ud569\ub2c8\ub2e4 (\uc5ed\uc790\uc8fc: scope\ub294 \ubcc0\uc218\uc758 \uc811\uadfc \uc81c\ud55c \ub2e8\uc704\uc774\uba70, \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub294 \ud568\uc218 \ub2e8\uc704\ub85c scope\ub97c \uad6c\ubd84\ud569\ub2c8\ub2e4). IIFE\ubc29\uc2dd\uc73c\ub85c \uc2e4\ud589\ub41c \uc775\uba85\ud568\uc218\ub294 \uadf8 \uc790\uccb4\ub85c scope\ub97c \uc81c\ud55c\ud558\uac8c \ub429\ub2c8\ub2e4. \ub530\ub77c\uc11c \uc804\uc5ed \ub124\uc784\uc2a4\ud398\uc774\uc2a4\ub97c \uac74\ub4dc\ub9ac\uc9c0 \uc54a\uac8c \ub418\uc9c0\uc694. \ub2e4\ub9cc, \uc775\uba85\ud568\uc218 \uc548\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \ubaa8\ub4e0 \ubcc0\uc218\uc758 scope\uac00 \uadf8 \ud568\uc218 \ub0b4\ubd80\ub85c\ub9cc \uc81c\ud55c\ub418\uc5b4\uc11c, \ud568\uc218 \ubc16\uc5d0\uc11c \uc811\uadfc\ud558\ub824\uba74 \uc804\uc5ed \ub124\uc784\uc2a4\ud398\uc774\uc2a4\uc640\uc758 \uc5f0\uacb0\uace0\ub9ac\ub97c \ub9cc\ub4e4\uc5b4\uc8fc\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/div>\n<div><\/div>\n<div>\uc774\ub97c \uc704\ud55c \uac00\uc7a5 \uac04\ub2e8\ud55c \ubc29\ubc95\uc911\uc5d0 \ud558\ub098\ub294 window \uc624\ube0c\uc81d\ud2b8\ub97c \ud568\uc218\uc5d0 \ud30c\ub77c\ubbf8\ud130\ub85c \ub118\uaca8\uc8fc\uace0, \uadf8 \ud568\uc218 \uc548\uc5d0\uc11c \ubcc0\uc218\ub098 \uba54\uc11c\ub4dc\ub97c window \uc624\ube0c\uc81d\ud2b8\uc5d0 \uc5f0\uacb0 \ud574\uc918\uc11c \ud568\uc218 \uc678\ubd80\uc5d0\uc11c\ub3c4 \uc2e4\ud589\uc774 \uac00\ub2a5\ud558\uac8c \ud558\ub294\uac83\uc785\ub2c8\ub2e4. (\uc5ed\uc790\uc8fc: window \uc624\ube0c\uc81d\ud2b8\ub294 \uae00\ub85c\ubc8c \uc624\ube0c\uc81d\ud2b8\ub85c\uc368 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c\ub294 \ucd5c\uc0c1\uc704 \uc624\ube0c\uc81d\ud2b8 \uc785\ub2c8\ub2e4. \uc5ec\uae30\uc5d0 \uac12\uc774\ub098 \ud568\uc218\ub97c \ud560\ub2f9\ud558\uba74 \ub2f9\uc5f0\ud788 \uc804\uc5ed \ubcc0\uc218 \ud639\uc740 \ud568\uc218\uac00 \ub429\ub2c8\ub2e4). window \ubcc0\uc218\uac00 \uaf2c\uc774\ub294\uac83\uc744 \ubc29\uc9c0\ud558\uae30 \uc704\ud574, window \uac1d\uccb4\ub97c \uba85\uc2dc\uc801\uc73c\ub85c \ud30c\ub77c\ubbf8\ud130\ub85c \ub118\uaca8\uc90d\ub2c8\ub2e4. \ub2e4\ub978 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub4e4\uc758 \ub808\ud37c\ub7f0\uc2a4\ub098 \uc2ec\uc9c0\uc5b4 &#8216;undefined&#8217; \uac12\ub3c4 \uc774\ub807\uac8c \ub118\uaca8\uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c\ub4e4\uba74 \uc774\ub7f0 \ud615\ud0dc\uac00 \ub418\uaca0\uad70\uc694.<\/div>\n<div><\/div>\n<div>\n<table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td>\n<div><code>(<\/code><code>function<\/code><code>(window, $, undefined){<\/code><\/div>\n<div><code>\u00a0 \u00a0 \/\/do some work<\/code><\/div>\n<div><code>})(window, jQuery);<\/code><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div><\/div>\n<\/div>\n<div>\ubcf4\uc2dc\ub2e4 \uc2dc\ud53c, window \uc640 jQuery($) \ub97c \ud30c\ub77c\ubbf8\ud130\ub85c \ub118\uaca8\uc8fc\uace0 \uc788\uc9c0\ub9cc, \ud568\uc218\uc5d0\ub294 3\uac1c\uc758 \ud30c\ub77c\ubbf8\ud130\ub97c \ubc1b\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uadf8 \uc774\uc720\ub294, \ub0b4\ubd80\uc758 \uc775\uba85\ud568\uc218\ub97c \uc2e4\ud589\ud560\ub54c 3\ubc88\uc9f8 \ud30c\ub77c\ubbf8\ud130\ub97c \ub118\uaca8\uc8fc\uc9c0 \uc54a\uc558\uae30 \ub54c\ubb38\uc5d0, \ub2e4\ub978 \ubaa8\ub4c8\uc5d0\uc11c &#8216;undefined&#8217; \ub77c\ub294 \ubcc0\uc218\uc758 \uac12\uc744 \ubcc0\uacbd\ud574\ub3c4, \uc801\uc5b4\ub3c4 \uc774 \ubaa8\ub4c8 \uc548\uc5d0\uc11c\ub294 undefined\uac12\uc744 \uac00\uc9c0\ub3c4\ub85d \ubcf4\uc7a5\ud558\uae30 \uc704\ud568\uc785\ub2c8\ub2e4. (\uc5ed\uc790\uc8fc: \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c\ub294 undefined\uac00 primitive \uac12\uc758 \ud55c \uc885\ub958 \uc785\ub2c8\ub2e4). \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\ub294 \ud074\ub85c\uc800\ub77c\ub294 \uac1c\ub150\uc774 \uc788\uc5b4\uc11c, \ud568\uc218\uac00 \uc815\uc758\ub420\ub54c \uadf8 \ud568\uc218 \uc678\ubd80\uc758 scope\ub97c \ucc38\uc870\ud560\uc218 \uc788\ub3c4\ub85d \uc790\ub3d9\uc73c\ub85c \ub9e4\ud551\uc774 \ub418\uae30 \ub54c\ubb38\uc5d0, \uc704\uc758 \uacbd\uc6b0 undefined \uac19\uc740 \uae00\ub85c\ubc8c \ubcc0\uc218\ub97c \ud30c\ub77c\ubbf8\ud130\ub85c \ub118\uae30\uc9c0 \uc54a\uc544\ub3c4 \ud568\uc218 \ub0b4\ubd80\uc5d0\uc11c \ucc38\uc870\uac00 \uac00\ub2a5\ud569\ub2c8\ub2e4. \ud074\ub85c\uc800\ub77c\ub294 \uac1c\ub150\uc740 \ub530\ub85c \uae00\uc744 \ud558\ub098 \uc368\uc57c \ud560\ub9cc\ud07c \uae38\uae30 \ub54c\ubb38\uc5d0 \uc800\uc790\uc758 \ub2e4\ub978\uae00(<a href=\"http:\/\/www.codethinked.com\/c-closures-explained)\" target=\"_blank\">http:\/\/www.codethinked.com\/c-closures-explained)<\/a>\u00a0\uc744 \ucc38\uc870\ud558\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/div>\n<div><\/div>\n<div>\uc774\uc81c \uc5ec\ub7ec\ubd84\uc740 window, $, undfined \ubcc0\uc218\ub97c \ubcf4\ub2e4 \uc548\uc804\ud558\uac8c \uc0ac\uc6a9\ud560\uc218 \uc788\ub294 \uc989\uc2dc \uc2e4\ud589\ub41c \uba54\uc11c\ub4dc\ub97c \uc791\uc131 \ud560\uc218 \uc788\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4. (\ubb3c\ub860 \uc774 \uba54\uc11c\ub4dc\uac00 \uc2e4\ud589\ub418\uae30\uc804\uc5d0 \uc774\ub7f0 \ubcc0\uc218\ub4e4 \uac12\uc774 \ubc14\ub014 \uc704\ud5d8\uc740 \uc5ec\uc804\ud788 \uc788\uc9c0\ub9cc, \uadf8\ub798\ub3c4 \ube44\uad50\uc801 \uc548\uc804\ud560\uac83\uc785\ub2c8\ub2e4). \uc774\uc81c \uc5ec\ub7ec\ubd84\uc740 \uc804\uc5ed \ub124\uc784\uc2a4\ud398\uc774\uc2a4\ub97c \ubcf4\ub2e4 \uae54\ub054\ud558\uac8c \ub9cc\ub4e4\uc218 \uc788\uace0, \ub2e4\ub978 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubaa8\ub4c8\uacfc\uc758 \uac04\uc12d\uc774 \uc0dd\uac08 \uac00\ub2a5\uc131\uc744 \ub9ce\uc774 \uc904\uc774\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/div>\n<div><\/div>\n<div>\ub0a8\uc740\uac74 window \uc624\ube0c\uc81d\ud2b8\uc5d0 \ubaa8\ub4c8\uc744 \uc5f0\uacb0 \ud574\uc8fc\ub294\uac83 \ubfd0\uc785\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc800\ub294 \ubaa8\ub4c8\uc744 \uc9c1\uc811 window \uc624\ube0c\uc81d\ud2b8\uc5d0 \uc5f0\uacb0\ud558\ub294\uac83 \ubcf4\ub2e4\ub294 \uccb4\uacc4\uc801\uc73c\ub85c \uc5f0\uacb0\uc774 \ub418\ub294 \uae30\ub2a5\uc744 \ub9cc\ub4dc\ub294\uac83\uc774 \uc88b\ub2e4\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4. \ub300\ubd80\ubd84\uc758 \ucef4\ud4e8\ud130 \uc5b8\uc5b4\uc5d0\uc11c\ub294 \uc774\uac78 \ub124\uc784\uc2a4\ud398\uc774\uc2a4\ub77c \ud558\uace0, \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uc624\ube0c\uc81d\ud2b8\uac1c\ub150\uc744 \uc774\uc6a9\ud558\uc5ec \ud749\ub0b4\ub0b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/div>\n<div><\/div>\n<div><strong>\ub124\uc784\uc2a4\ud398\uc774\uc2a4 (Namespaces)<\/strong><\/div>\n<div><\/div>\n<div>\ub124\uc784\uc2a4\ud398\uc774\uc2a4\ub97c \uc120\uc5b8\ud558\uace0 \ud568\uc218\ub97c \uc5f0\uacb0\ud574 \uc8fc\uae30 \uc704\ud574\uc11c\ub294 \uc544\ub9c8 \uc774\ub807\uac8c \ub9ce\uc774 \ud560\uac81\ub2c8\ub2e4.<\/div>\n<div><\/div>\n<div>\n<table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td>\n<div><code>window.myApp = window.myApp || {};<\/code><\/div>\n<div><code>window.myApp.someFunction =<\/code>\u00a0<code>function<\/code><code>(){<\/code><\/div>\n<div><code>\u00a0 \u00a0 \/\/so some work<\/code><\/div>\n<div><code>};<\/code><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div><\/div>\n<\/div>\n<div>\uc774\uac74 \ub2e8\uc9c0 \uc774\ubbf8 \uac19\uc740 \uc774\ub984\uc73c\ub85c \uc0dd\uc131\ub41c \uc624\ube0c\uc81d\ud2b8\uac00 \uc788\ub098 \ubcf4\uace0 \uc5c6\uc73c\uba74 {} \ud45c\ud604\uc744 \uc0ac\uc6a9\ud574\uc11c \uc0c8 \uc624\ube0c\uc81d\ud2b8\ub97c \ub9cc\ub4e4\uc5b4 \uc8fc\ub294 \uc815\ub3c4 \uc785\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc774\u00a0\ucf54\ub4dc \ucc98\ub7fc \ub124\uc784\uc2a4\ud398\uc774\uc2a4\ub97c \ub9cc\ub4dc\ub294 \uac83 \ubcf4\ub2e4\ub294, \uc704\uc5d0\uc11c \uc791\uc131\ud55c \ubaa8\ub4c8\ubc29\uc2dd\uc744 \ud65c\uc6a9\ud574 \ubcf4\uc8e0. \uc774\ub807\uac8c \ub9d0\uc774\uc8e0.<\/div>\n<div><\/div>\n<div>\n<table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td>\n<div><code>(<\/code><code>function<\/code><code>(myApp, $, undefined){<\/code><\/div>\n<div><code>\u00a0 \u00a0 \/\/do some work<\/code><\/div>\n<div><code>}(window.myApp = window.myApp\u00a0|| {}, jQuery));<\/code><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div><\/div>\n<\/div>\n<div>\ud639\uc740 \uc774\ub807\uac8c\ub3c4 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/div>\n<div><\/div>\n<div>\n<table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td>\n<div><code>window.myApp = (<\/code><code>function<\/code><code>(myApp, $, undefined){<\/code><\/div>\n<div><code>\u00a0 \u00a0 \/\/do some work<\/code><\/div>\n<div><code>\u00a0 \u00a0 return<\/code>\u00a0<code>myApp;<\/code><\/div>\n<div><code>})(window.myApp || {}, jQuery);<\/code><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div><\/div>\n<\/div>\n<div>\uc774\uc81c window \uc624\ube0c\uc81d\ud2b8\ub97c \ubaa8\ub4c8\uc5d0 \ub118\uaca8\uc8fc\ub294 \ub300\uc2e0, \uc708\ub3c4\uc6b0 \uc624\ube0c\uc81d\ud2b8\uc5d0\uc11c \ud30c\uc0dd\ub41c \ub124\uc784\uc2a4\ud398\uc774\uc2a4 \uc624\ube0c\uc81d\ud2b8\ub97c \ub118\uaca8 \uc8fc\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4. || \ud45c\ud604\uc744 \uc4f4 \uc774\uc720\ub294 \uc5ec\ub7ec \uc18c\uc2a4\uc5d0\uc11c \uac19\uc740 \ub124\uc784\uc2a4\ud398\uc774\uc2a4\ub97c \uc4f8 \uacbd\uc6b0 \uc0c8\ub85c\uc6b4 \uc624\ube0c\uc81d\ud2b8\ub97c \ub9e4\ubc88 \ub9cc\ub4e4\uc9c0 \uc54a\ub3c4\ub85d \ud558\uae30 \uc704\ud568\uc785\ub2c8\ub2e4. \ub9ce\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub4e4\uc774 \ub124\uc784\uc2a4\ud398\uc774\uc2a4 \ud568\uc218\ub97c \uc81c\uacf5\ud558\uace0 \uc788\uc73c\uba70, namespace.js(<a href=\"https:\/\/github.com\/maximebf\/Namespace.js)\" target=\"_blank\">https:\/\/github.com\/maximebf\/Namespace.js)<\/a>\u00a0\ub97c \uc4f0\ub294\uac83\ub3c4 \uc88b\uc740 \ubc29\ubc95\uc785\ub2c8\ub2e4. \ub610\ud55c \ub124\uc784\uc2a4\ud398\uc774\uc2a4\ub294 \ub108\ubb34 \uc5ec\ub7ec depth\ub85c \uc911\ucca9\ub418\uc9c0 \uc54a\ub3c4\ub85d \ud558\ub294\uac83\uc774 \uc88b\uc2b5\ub2c8\ub2e4. \uc608\ub97c\ub4e4\uc5b4 &#8220;doSometing&#8221;\uc774\ub77c\ub294 \uba54\uc11c\ub4dc\ub97c &#8220;MyApp.MyModule.MySubModule&#8221;\ub77c\ub294 \ub124\uc784\uc2a4\ud398\uc774\uc2a4 \ud558\uc704\uc5d0 \ucd94\uac00\ud55c\ub2e4\uba74, \uc774 \uba54\uc11c\ub4dc\ub97c \uc4f0\uae30\uc704\ud574\uc120 \uc544\ub798\ucc98\ub7fc \uae38\uac8c \uc368\uc57c\uaca0\uc8e0<\/div>\n<div><\/div>\n<div>\n<table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td><code>MyApp.MyModule.MySubModule.doSomething();<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div><\/div>\n<\/div>\n<div>\ub9e4\ubc88 \uc774\ub807\uac8c \uc0ac\uc6a9\ud558\uae30 \ud798\ub4e4\uba70 \uc544\ub798\ucc98\ub7fc \ubcc0\uc218\uc5d0 \ubd99\uc5ec\uc11c \uc4f8\uc218\ub294 \uc788\uc2b5\ub2c8\ub2e4.<\/div>\n<div><\/div>\n<div>\n<table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td><code>var<\/code>\u00a0<code>MySubModule = MyApp.MyModule.MySubModule;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div><\/div>\n<\/div>\n<div>\uc774\ub807\uac8c \ud558\uba74 &#8220;MySubModule.doSomething()&#8221; \uc815\ub3c4\ub85c \ud638\ucd9c\uc774 \uac00\ub2a5\ud558\uc8e0. \ud558\uc9c0\ub9cc \uc660\ub9cc\ud07c \ub300\uaddc\ubaa8\uc758 \ucf54\ub4dc\ub97c \uc9dc\ub294\uac8c \uc544\ub2c8\ub77c\uba74 \uc774\ub807\uac8c \uc5ec\ub7ec\ubc88 \uc911\ucca9\ub41c \ub124\uc784\uc2a4\ud398\uc774\uc2a4\ub97c \uc548\uc4f0\ub294\uac8c \uc88b\uc2b5\ub2c8\ub2e4.<\/div>\n<div><\/div>\n<div><strong>\ub178\ucd9c\uc2dd \ubaa8\ub4c8 \ud328\ud134 (Revealing Module Pattern)<\/strong><\/div>\n<div><\/div>\n<div>\ubaa8\ub4c8\uc744 \ub9cc\ub4e4\ub2e4 \ubcf4\uba74 \ub178\ucd9c\uc2dd \ubaa8\ub4c8 \ud328\ud134\uc774\ub77c \ubd88\ub9ac\ub294 \uc544\ub798 \ubc29\uc2dd\uc744 \uc790\uc8fc \ubcf4\uac8c \ub429\ub2c8\ub2e4. \uc774 \ud328\ud134\uc740 \ubaa8\ub4c8 \uc0dd\uc131 \ubc29\uc2dd\uc758 \ud558\ub098\ub85c\uc368, \ubaa8\ub4c8 \ub0b4\ubd80\uc5d0\uc11c \ubaa8\ub4e0 \uac12\ub4e4\uc744 \ucc98\ub9ac\ud55c \ub2e4\uc74c, \uc678\ubd80\uc5d0 \uacf5\uac1c\ud558\uace0 \uc2f6\uc740 \ubcc0\uc218\uc640 \uba54\uc11c\ub4dc\uc5d0 \ub300\ud574\uc11c\ub9cc \ub808\ud37c\ub7f0\uc2a4 \uc624\ube0c\uc81d\ud2b8\ub97c \ub9ac\ud134 \ud574\uc8fc\ub294 \uac83\uc785\ub2c8\ub2e4. \uc544\ub798 \ucf54\ub4dc\ub97c \ubcf4\uba74 \uc5b4\ub5bb\uac8c \uc0ac\uc6a9\ub418\ub294\uc9c0 \uc54c \uc218 \uc788\uc744 \uac81\ub2c8\ub2e4.<\/div>\n<div><\/div>\n<div>\n<table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td>\n<div><code>var<\/code>\u00a0<code>myModule = (<\/code><code>function<\/code><code>($, undefined){<\/code><\/div>\n<div><code>\u00a0 \u00a0 var<\/code>\u00a0<code>myVar1 =<\/code>\u00a0<code>''<\/code><code>,<\/code><\/div>\n<div><code>\u00a0 \u00a0 myVar2 =<\/code>\u00a0<code>''<\/code><code>;<\/code><\/div>\n<div><code>\u00a0 \u00a0 var<\/code>\u00a0<code>someFunction =<\/code>\u00a0<code>function<\/code><code>(){<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 return<\/code>\u00a0<code>myVar1 +<\/code>\u00a0<code>\" \"<\/code>\u00a0<code>+ myVar2;<\/code><\/div>\n<div><code>\u00a0 \u00a0 };<\/code><\/div>\n<div><code>\u00a0 \u00a0 return<\/code>\u00a0<code>{<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 getMyVar1:<\/code>\u00a0<code>function<\/code><code>() {<\/code>\u00a0<code>return<\/code>\u00a0<code>myVar1; },<\/code>\u00a0<code>\/\/myVar1 \u00a0 \u00a0 \u00a0 \u00a0 public getter<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 setMyVar1:<\/code>\u00a0<code>function<\/code><code>(val) { myVar1 = val; },<\/code>\u00a0<code>\/\/myVar1 public setter<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 someFunction: someFunction<\/code>\u00a0<code>\/\/some function made public<\/code><\/div>\n<div><code>\u00a0 \u00a0 }<\/code><\/div>\n<div><code>})(jQuery);<\/code><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div><\/div>\n<\/div>\n<div>\ubcf4\uc2dc\ub2e4\uc2dc\ud53c, \ubaa8\ub4c8 \uc0dd\uc131\uc774 \uac04\ub2e8\ud558\uac8c \ud55c\ubc88\uc5d0 \uc774\ub8e8\uc5b4 \uc9d1\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uc774 \ubaa8\ub4c8 \uc0dd\uc131 \ubc29\uc2dd\uc73c\ub85c \uc778\ud574 private \ubcc0\uc218\ub294 \ub0b4\ubd80\uc5d0 \uc228\uaca8\uc9c0\uace0, \uc678\ubd80\uc5d0 \ub178\ucd9c\ud558\uace0 \uc2f6\uc740 \uc77c\ubd80 \ub0b4\uc6a9\ub9cc \uc624\ube0c\uc81d\ud2b8 \ud615\uc2dd\uc73c\ub85c \ub9ac\ud134\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uacb0\uad6d &#8220;myModule&#8221;\ub77c\ub294 \ubcc0\uc218\uc5d0 \ub300\uc785\ub418\uc5b4, \uc774 \ubcc0\uc218\ub294 \ub450\uac1c\uc758 public \uba54\uc11c\ub4dc\ub97c \uac00\uc9c0\uac8c \ub418\uc9c0\ub9cc, \ub0b4\ubd80\uc5d0 \uc788\ub294 &#8220;someFunction&#8221;\uc740 priviate \ubcc0\uc218\uc778 &#8220;myVal2&#8243;\uac19\uc740\uac83\uc5d0 \uc811\uadfc\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/div>\n<div><\/div>\n<div><strong>\uc0dd\uc131\uc790 \ub9cc\ub4e4\uae30 (Creating Constructors: Classes)<\/strong><\/div>\n<div><\/div>\n<div>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\ub294 \ud074\ub798\uc2a4\uac00 \uc5c6\uc9c0\ub9cc, \uc624\ube0c\uc81d\ud2b8 \uc0dd\uc131\uc2dc\uc758 \uc0dd\uc131\uc790 \ud568\uc218\ub97c \ud1b5\ud574 \uad6c\ud604\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4. &#8216;Person&#8217; \uc624\ube0c\uc81d\ud2b8\ub97c \uc5ec\ub7ec\uac1c \uc0dd\uc131\ud55c\ub2e4\uace0 \ud574 \ubd05\uc2dc\ub2e4. \uc0dd\uc131\uc2dc\uc5d0\ub294 \uc774\ub984\uacfc \uc131, \ub098\uc774\ub97c \ud30c\ub77c\ubbf8\ud130\ub85c \ub118\uaca8\uc904\uc218 \uc788\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc544\ub9c8 \uc774\ub7f0 \ud615\ud0dc\uc758 \uc0dd\uc131\uc790\uac00 \ub420\uac83\uc785\ub2c8\ub2e4. (\uc5ed\uc790\uc8fc: \uc5ec\uae30\uc11c \uae00\uc4f4\uc774\uac00 \ub9d0\ud558\ub294 \uc0dd\uc131\uc790\uac00 \uace7 \ud074\ub798\uc2a4\ub97c \uc758\ubbf8\ud569\ub2c8\ub2e4)<\/div>\n<div><\/div>\n<div>\n<table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td>\n<div><code>var<\/code>\u00a0<code>Person =<\/code>\u00a0<code>function<\/code><code>(firstName, lastName, age){<\/code><\/div>\n<div><code>\u00a0 \u00a0 this<\/code><code>.firstName = firstName;<\/code><\/div>\n<div><code>\u00a0 \u00a0 this<\/code><code>.lastName = lastName;<\/code><\/div>\n<div><code>\u00a0 \u00a0 this<\/code><code>.age = age;<\/code><\/div>\n<div><code>}<\/code><\/div>\n<div><code><br \/>\n<\/code><\/div>\n<div><code>Person.prototype.fullName =<\/code>\u00a0<code>function<\/code><code>(){<\/code><\/div>\n<div><code>\u00a0 \u00a0 return<\/code>\u00a0<code>this<\/code><code>.firstName +<\/code>\u00a0<code>\" \"<\/code>\u00a0<code>+<\/code>\u00a0<code>this<\/code><code>.lastName;<\/code><\/div>\n<div><code>};<\/code><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div><\/div>\n<\/div>\n<div>\ub458\uc911 \uc704\ucabd \ud568\uc218\ub294 &#8216;Person&#8217; \uc758 \uc0dd\uc131\uc790 \uc785\ub2c8\ub2e4. \uc774\uac78\ub85c \uc0c8\ub85c\uc6b4 &#8216;Person&#8217; \uc624\ube0c\uc81d\ud2b8 \uc0dd\uc131\ud560\uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub54c 3\uac1c\uc758 \ud30c\ub77c\ubbf8\ud130\uac00 \ub118\uc5b4\uac00\ub294\ub370, \uc0dd\uc131\uc790\uac00 \uc2e4\ud589\ub418\uba74\uc11c \uc790\uc5f0\uc2a4\ub7fd\uac8c \ubcc0\uc218\uc5d0 \uc785\ub825\uc774 \ub429\ub2c8\ub2e4. \uc774\ub807\uac8c \uc0dd\uc131\ub41c \ubcc0\uc218\ub294 public \ubcc0\uc218\uac00 \ub429\ub2c8\ub2e4. \uc0dd\uc131\uc790 \ub0b4\ubd80\uc5d0 \ub530\ub85c \ub85c\uceec \ubcc0\uc218\ub97c \uc0dd\uc131\ud558\uba74 private\ubcc0\uc218\ub85c \uc0ac\uc6a9\uc774 \uac00\ub2a5\ud558\uc9c0\ub9cc, public \uba54\uc11c\ub4dc\uc5d0\uc11c \uc811\uadfc\uc774 \ubd88\uac00\ub2a5\ud574\uc9c0\ubbc0\ub85c \uc77c\ub2e8 \ubaa8\ub450 public \ubcc0\uc218\ub85c \ub9cc\ub4e4\uc5b4 \ub461\ub2c8\ub2e4. \uc0ac\uc2e4 \uc0dd\uc131\uc790 \ub0b4\ubd80\uc5d0 public \uba54\uc11c\ub4dc\ub97c \ub9cc\ub4e4\uba74 \uadf8 \uba54\uc11c\ub4dc\ub294 private\ubcc0\uc218\uc5d0 \uc811\uadfc\uc774 \uac00\ub2a5\ud558\uae34 \ud574\ub3c4 \ub610 \ub2e4\ub978 \ubb38\uc81c\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/div>\n<div><\/div>\n<div>\uadf8\ub2e4\uc74c\uc758 \ub450\ubc88\uc9f8 \ud568\uc218\ucabd\uc744 \ubcf4\uba74 &#8220;prototype&#8221;\uc744 \ud1b5\ud574 &#8216;person&#8217;\uc624\ube0c\uc81d\ud2b8\uc758 \uc0dd\uc131\uc790\uc5d0 \uc811\uadfc\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. &#8220;prototype&#8221; \uc624\ube0c\uc81d\ud2b8\ub294 \uc5b4\ub5a4 \ud568\uc218\ub4e0 \uc778\uc2a4\ud134\uc2a4\uac00 \uc0dd\uc131\ub418\uba74, \uadf8 \uc778\uc2a4\ud134\uc2a4\ub4e4\uc5d0\uac8c \uc5f0\uacb0\ub418\uc5b4\uc11c \ud574\ub2f9 \ud568\uc218\uc758 \ubcc0\uc218\ub098 \uba54\uc11c\ub4dc\uc5d0 \uc811\uadfc\ud560\ub54c \uac00\uc7a5 \uba3c\uc800 \uc811\uadfc\ud558\ub294 \uc218\ub2e8\uc774 \ub429\ub2c8\ub2e4. \ub530\ub77c\uc11c \uc5ec\uae30\uc11c &#8220;fullName&#8221; \uc774\ub77c\ub294 \uba54\uc11c\ub4dc\ub97c \ub9cc\ub4e4\uba74, &#8216;Person&#8217; \uc778\uc2a4\ud134\uc2a4\ub97c \ub9cc\ub4e4\ub54c \ub530\ub85c &#8220;fullName&#8221;\uc774\ub77c\ub294 \uba54\uc11c\ub4dc\ub97c \ub9cc\ub4e4\uc5b4 \uc8fc\uc9c0\uc54a\uc544\ub3c4 \ubaa8\ub4e0 &#8216;Person&#8217;\uc758 \uc778\uc2a4\ud134\uc2a4\uc5d0\uc11c \uc0ac\uc6a9\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4. \uc0dd\uc131\uc790 \ub0b4\ubd80\uc5d0\uc11c &#8220;this.fullName = function() { &#8230; }&#8221;\uac19\uc740 \ubc29\uc2dd\uc73c\ub85c\u00a0&#8220;fullName&#8221;\uac19\uc740 \uba54\uc11c\ub4dc\ub97c \uc0dd\uc131\uc790 \ub0b4\ubd80\uc5d0\uc11c \ub9cc\ub4e4 \uc218\ub3c4 \uc788\uae34 \ud558\uc9c0\ub9cc \uc774\ub807\uac8c \ud558\uba74 &#8216;Person&#8217;\uc758 \uc778\uc2a4\ud134\uc2a4\ub97c \ub9cc\ub4e4\ub54c\ub9c8\ub2e4 &#8220;fullName&#8221;\ud568\uc218\ub3c4 \uc0ac\ubcf8\uc774 \ub9cc\ub4e4\uc5b4\uc9c0\uac8c\ub418\uc5b4\uc11c \uc88b\uc9c0 \ubabb\ud55c \ubc29\ubc95\uc785\ub2c8\ub2e4.<\/div>\n<div><\/div>\n<div>\uc774\uc81c &#8216;Person&#8217;\uc758 \uc778\uc2a4\ud134\uc2a4\ub97c \uc0dd\uc131\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/div>\n<div><\/div>\n<div>\n<table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td>\n<div><\/div>\n<div><\/div>\n<\/td>\n<td>\n<div><code>var<\/code>\u00a0<code>person =<\/code>\u00a0<code>new<\/code>\u00a0<code>Person(<\/code><code>\"Justin\"<\/code><code>,<\/code>\u00a0<code>\"Etheredge\"<\/code><code>);<\/code><\/div>\n<div><code>alert(person.fullName());<\/code><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div><\/div>\n<\/div>\n<div>\uc6d0\ud55c\ub2e4\uba74, &#8216;Person&#8217; \uc0dd\uc131\uc790\uc5d0\uc11c \uc0c1\uc18d\uc744 \ud55c \uc0c8\ub85c\uc6b4 \uc0dd\uc131\uc790\ub97c \ub9cc\ub4e4\uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. &#8216;Spy&#8217;\ub77c\ub294 \uc0dd\uc131\uc790\ub97c \ub9cc\ub4e4\uace0, \uac70\uae30\uc5d0 \uba54\uc11c\ub4dc\ub97c \ud558\ub098 \ucd94\uac00\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/div>\n<div><\/div>\n<div>\n<table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td>\n<div><code>var<\/code>\u00a0<code>Spy =<\/code>\u00a0<code>function<\/code><code>(firstName, lastName, age){<\/code><\/div>\n<div><code>\u00a0 \u00a0 this<\/code><code>.firstName = firstName;<\/code><\/div>\n<div><code>\u00a0 \u00a0 this<\/code><code>.lastName = lastName;<\/code><\/div>\n<div><code>\u00a0 \u00a0 this<\/code><code>.age = age;<\/code><\/div>\n<div><code>};<\/code><\/div>\n<div><code>Spy.prototype =<\/code>\u00a0<code>new<\/code>\u00a0<code>Person();<\/code><\/div>\n<div><code><br \/>\n<\/code><\/div>\n<div><code>Spy.prototype.spy =<\/code>\u00a0<code>function<\/code><code>(){<\/code><\/div>\n<div><code>\u00a0 \u00a0 alert(<\/code><code>this<\/code><code>.fullName() +<\/code>\u00a0<code>\" is spying.\"<\/code><code>);<\/code><\/div>\n<div><code>}<\/code><\/div>\n<div><code><br \/>\n<\/code><\/div>\n<div><code>var<\/code>\u00a0<code>mySpy =<\/code>\u00a0<code>new<\/code>\u00a0<code>Spy(<\/code><code>\"Mr.\"<\/code><code>,<\/code>\u00a0<code>\"Spy\"<\/code><code>, 50);<\/code><\/div>\n<div><code>mySpy.spy();<\/code><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div><\/div>\n<\/div>\n<div>\ubcf4\uc2dc\ub2e4\uc2dc\ud53c &#8216;Person&#8217;\uacfc \ub611\uac19\uc740 \ubaa8\uc2b5\uc758 \uc0dd\uc131\uc790\ub97c \ub9cc\ub4e4\uc5c8\uc2b5\ub2c8\ub2e4. \ub2e4\ub9cc &#8216;Spy&#8217;\uc758 prototype\uc5d0 &#8216;Person&#8217;\uc758 \uc0dd\uc131\uc790\ub97c \uc5f0\uacb0\ud574 \uc8fc\uc5c8\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uac70\uae30\uc5d0 &#8216;spy&#8217; \uba54\uc11c\ub4dc\ub97c \ucd94\uac00\ud55c \ub2e4\uc74c &#8216;Spy&#8217;\uc758 \uc778\uc2a4\ud134\uc2a4\ub97c \ud558\ub098 \uc0dd\uc131\ud574 \uc8fc\uc5c8\uc2b5\ub2c8\ub2e4. \uc774 \uba54\uc11c\ub4dc\ub294 &#8216;Spy&#8217;\uc758 \u00a0&#8216;Person&#8217;\uc758 public \uba54\uc11c\ub4dc\uc5d0 \uc811\uadfc\uc774 \uac00\ub2a5\ud558\uba70, &#8216;Person&#8217;\uc758 \uba54\uc11c\ub4dc\ub4e4 \ub610\ud55c &#8216;Spy&#8217; \uc778\uc2a4\ud134\uc2a4\uc758 \ubcc0\uc218\ub4e4\uc5d0 \uc811\uadfc\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4. \ub2e4\uc18c \ubcf5\uc7a1\ud55c \uac10\uc774 \uc788\uc9c0\ub9cc, \ud070 \ud2c0\uc5d0\uc11c \ubcf4\uba74 \uad49\uc7a5\ud788 \uba4b\uc9c4 \ubc29\ubc95\uc774 \uc544\ub2d0\uc218 \uc5c6\uc2b5\ub2c8\ub2e4.<\/div>\n<div><\/div>\n<div><strong>\uc5ee\uc5b4 \ubcf4\uae30 (Wrapping it up)<\/strong><\/div>\n<div><\/div>\n<div>\uc774 \uae00\uc744 \uc5ec\uae30 \uae4c\uc9c0 \uc77d\uc740 \uc5ec\ub7ec\ubd84\uc774 \ubb54\uac00\ub97c \ubc30\uc6e0\ub2e4\uba74 \uc88b\uaca0\uc9c0\ub9cc, \uc774\uac78\ub85c\ub294 \ucd5c\uc2e0 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uac1c\ubc1c\uc774\ub77c\ub294 \uacbd\uc9c0\uc5d0 \uc774\ub974\ub800\ub2e4\uace0 \ubcf4\uae30\ub294 \uc5b4\ub835\uc2b5\ub2c8\ub2e4. \uc5ec\uae30\uc5d0 \uc18c\uac1c\ub41c \uc8fc\uc81c\ub4e4\uc740 \uc774\ubbf8 \uba87\ub144\uc774\uc0c1 \uc0ac\uc6a9\ub41c \ube44\uad50\uc801 \ub0a1\uc740 \uae30\ubc95\ub4e4\uc774\ub2c8\uae4c\uc694. \ud558\uc9c0\ub9cc \uc801\uc5b4\ub3c4 \uace0\uc218\uac00 \ub418\uae30 \uc704\ud55c \uae38\uc5d0 \ud55c\ubc1c\uc744 \ub0b4\ub51b\uc5c8\ub2e4\uace0 \ubcfc\uc218\ub294 \uc788\uc2b5\ub2c8\ub2e4. \uc5ec\uae30\uc11c \ubc30\uc6b4 \uae30\ubc95\uc744 \ubc14\ud0d5\uc73c\ub85c \uc5ec\ub7ec\ubd84\uc774 \ub9cc\ub4dc\ub294 \ucf54\ub4dc\ub97c \ubaa8\ub4c8\ud654 \ud574\uc11c \uc5ec\ub7ec \ud30c\uc77c\ub85c \ub098\ub220 \ubcf4\uc2ed\uc2dc\uc624. \uadf8\u00a0\ub2e4\uc74c\uc5d4 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uacb0\ud569(combination)\uacfc \uacbd\ub7c9\ud654(minification)\uc5d0 \ub300\ud574 \uacf5\ubd80\ud560 \ucc28\ub840\uc785\ub2c8\ub2e4. \uc5ec\ub7ec\ubd84\uc774 \ub9cc\uc57d Rails \uac1c\ubc1c\uc790\uc774\uace0 Rails3\uc744 \uc4f4\ub2e4\uba74 \uc774 \ub450\uac00\uc9c0\ub97c \uc27d\uac8c \ud55c\ubc88\uc5d0 \ud574\uacb0\uac00\ub2a5 \ud560\uac83\uc785\ub2c8\ub2e4. \uadf8\uc678\uc5d0 .NET \uac1c\ubc1c\uc790\ub77c\uba74 \uc81c\uac00 \uc2dc\ub3c4\ud574\ubd24\ub358 SquishIt(<a href=\"https:\/\/github.com\/jetheredge\/SquishIt)\" target=\"_blank\">https:\/\/github.com\/jetheredge\/SquishIt)<\/a>\uc744 \ud65c\uc6a9\ud560\uc218\ub3c4 \uc788\uc744\uac83\uc785\ub2c8\ub2e4. \uadf8\uc678\uc5d0 ASP.NET MVC4 \ub97c \uc0ac\uc6a9\ud55c\ub2e4\uba74, \ub0b4\uc7a5\ub41c \uacb0\ud569\uacfc \uacbd\ub7c9\ud654 \uc9c0\uc6d0 \uae30\ub2a5\uc774 \uc788\uc744\uac83\uc785\ub2c8\ub2e4.<\/div>\n<div><\/div>\n<div>\ub05d\uc73c\ub85c \uc774\uae00\uc774 \ub3c4\uc6c0\uc774 \ub418\uc5c8\uae30\ub97c \ubc14\ub77c\uba70, \ub2e4\uc74c \uae00\uc5d0\uc11c \ub610 \ub2e4\ub978 \ucd5c\uc2e0 \uc790\ubc14\uc2a4\ub9bd\ud2b8 \uac1c\ubc1c\uc5d0 \uad00\ud55c \uc8fc\uc81c\ub85c \ub9cc\ub0a0\uc218 \uc788\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/div>\n<\/div>\n<div><\/div>\n<div><a href=\"http:\/\/leejiheg.tistory.com\/24\">http:\/\/leejiheg.tistory.com\/24<\/a><\/div>\n<div><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; \/\/Parttern 1 var\u00a0namespace\u00a0=\u00a0(function(){ \u00a0 \u00a0\u00a0var\u00a0namespace\u00a0=\u00a0{}; \u00a0 \u00a0\u00a0var\u00a0i \u00a0=\u00a00; \u00a0 \u00a0\u00a0function\u00a0func1(){\u00a0\/\/\ub0b4\ubd80 \ud568\uc218 \u00a0 \u00a0 \u00a0 \u00a0\u00a0alert(i); \u00a0 \u00a0\u00a0}; \u00a0 \u00a0\u00a0namespace.func2\u00a0=\u00a0function(){\u00a0\/\/\uc678\ubd80 \ub178\ucd9c \ud568\uc218 \u00a0 \u00a0 \u00a0 \u00a0\u00a0alert(i); \u00a0 \u00a0\u00a0}; \u00a0 \u00a0\u00a0return\u00a0namespace;&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\/1360"}],"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=1360"}],"version-history":[{"count":0,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/1360\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}