{"id":784,"date":"2012-04-25T08:56:34","date_gmt":"2012-04-25T08:56:34","guid":{"rendered":"http:\/\/brain.dailyon.net\/?p=784"},"modified":"2012-04-25T08:56:34","modified_gmt":"2012-04-25T08:56:34","slug":"js-%eb%8a%90%ea%b8%8b%ed%95%98%ea%b2%8c-%eb%b9%84%eb%8f%99%ea%b8%b0%ec%8b%9d%ec%9c%bc%eb%a1%9c-javascript%eb%a5%bc-%ec%9b%b9-%eb%ac%b8%ec%84%9c%ec%97%90-%ec%b6%94%ea%b0%80%ed%95%98%eb%8a%94","status":"publish","type":"post","link":"https:\/\/blog.goorigo.com\/?p=784","title":{"rendered":"JS : \ub290\uae0b\ud558\uac8c \ube44\ub3d9\uae30\uc2dd\uc73c\ub85c JavaScript\ub97c \uc6f9 \ubb38\uc11c\uc5d0 \ucd94\uac00\ud558\ub294 \ubc29\ubc95"},"content":{"rendered":"<p>\uc678\ubd80 JavaScript \ud30c\uc77c\uc744 \ubb38\uc11c\uc5d0 \ucd94\uac00\ud558\ub294 \ubc29\ubc95\uc5d0\ub294 \uc5ec\ub7ec \uac00\uc9c0\uac00 \uc788\uc9c0\ub9cc, \uc5ec\uae30\uc5d4 onload event\ub97c \uc9c0\uc5f0\uc2dc\ud0a4\uc9c0 \uc54a\uc73c\uba74\uc11c \ubcd1\ub82c \ube44\ub3d9\uae30\uc2dd\uc73c\ub85c \ubd88\ub7ec\uc640\uc11c \ucd94\uac00\ud558\ub294 \ubc29\ubc95\uc744 \uc18c\uac1c\ud55c\ub2e4.<\/p>\n<h3>Script tag<\/h3>\n<p>\uac00\uc7a5 \ubcf4\ud3b8\uc801\uc73c\ub85c \uc4f0\uc774\ub294 \ubc99\ubc95\uc774\ub2e4.<\/p>\n<div><a title=\"\ucf54\ub4dc \ubaa8\uc591\uc0c8 \ubc14\uafb8\uae30\" href=\"http:\/\/appletree.or.kr\/blog\/quotes\/%eb%8a%90%ea%b5%bf%ed%95%98%ea%b2%8c-%eb%b9%84%eb%8f%99%ea%b8%b0%ec%8b%9d%ec%9c%bc%eb%a1%9c-javascript%eb%a5%bc-%ec%9b%b9-%eb%ac%b8%ec%84%9c%ec%97%90-%ec%b6%94%ea%b0%80%ed%95%98%eb%8a%94-%eb%b0%a9\/#content\">?<\/a><\/div>\n<pre>&lt;script type=\"http:\/\/yourdomain.com\/script.js\"&gt;&lt;\/script&gt;<\/pre>\n<p>\ubb3c\ub860, \uc81c\uc77c \ub2e8\uc21c\ud55c \ubc29\ubc95\uc774\uc9c0\ub9cc, \ube44\ub3d9\uae30\uc2dd(asynchronous) \ud30c\uc77c \ub0b4\ub824\ubc1b\uae30\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\uc73c\uba70 \uadf8 \ub9cc\ud07c onload event\ub3c4 \uc9c0\uc5f0\ub41c\ub2e4. (\ube68\uac04 \uc120\uc740 Load event \ubc1c\uc0dd \uc2dc\uc810\uc744 \ub098\ud0c0\ub0c4.)<\/p>\n<p><img loading=\"lazy\" src=\"http:\/\/appletree.or.kr\/blog\/images\/js-script.png\" alt=\"\" width=\"550\" height=\"53\" \/><\/p>\n<h3>\ube44\ub3d9\uae30\uc2dd \ud615\ud0dc (JavaScirpt\ub97c \uc774\uc6a9\ud55c script tag \ucd94\uac00):<\/h3>\n<p>\uc6f9 \ucd5c\uc801\ud654 \uc804\ubb38\uac00\uc778?<a href=\"http:\/\/stevesouders.com\/\">Steve Sounders<\/a>\uc528\uc758?<a href=\"http:\/\/stevesouders.com\/efws\/images\/0405-load-scripts-decision-tree-04.gif\">JavaScript load decision tree<\/a>\ub3c4 \ucc38\uace0\ubc14\ub78c.<\/p>\n<div><a title=\"\ucf54\ub4dc \ubaa8\uc591\uc0c8 \ubc14\uafb8\uae30\" href=\"http:\/\/appletree.or.kr\/blog\/quotes\/%eb%8a%90%ea%b5%bf%ed%95%98%ea%b2%8c-%eb%b9%84%eb%8f%99%ea%b8%b0%ec%8b%9d%ec%9c%bc%eb%a1%9c-javascript%eb%a5%bc-%ec%9b%b9-%eb%ac%b8%ec%84%9c%ec%97%90-%ec%b6%94%ea%b0%80%ed%95%98%eb%8a%94-%eb%b0%a9\/#content\">?<\/a><\/div>\n<pre>(function() {\n    var s = document.createElement('script');\n    s.type = 'text\/javascript';\n    s.async = true;\n    s.src = 'http:\/\/yourdomain.com\/script.js';\n    var x = document.getElementsByTagName('script')[0];\n    x.parentNode.insertBefore(s, x);\n})();<\/pre>\n<p>\ucc38\uace0: \uc704\uc5d0?<em>async<\/em>\ub294?<a href=\"http:\/\/www.whatwg.org\/specs\/web-apps\/current-work\/#attr-script-async\">HTML5\uc5d0 \uc815\uc758\ub41c \uc18d\uc131<\/a>\uc73c\ub85c, \uc6d0\ud558\ub294 \ubaa9\uc801\uc5d0 \ubd80\ud569\ub418\ubbc0\ub85c \ucd94\uac00\ud574 \ub460.<\/p>\n<p><a href=\"http:\/\/code.google.com\/apis\/analytics\/docs\/tracking\/asyncTracking.html\">Google Analytics\uc5d0\uc11c\ub3c4 \uc0ac\uc6a9\ub418\ub294 \uac83<\/a>\uc73c\ub85c \ub9ce\uc774 \uc4f0\uc774\ub294 \ubc29\ubc95\uc774\ub2e4. \ubb38\uc81c\ub294 \uc5ec\uae30\uc11c\ub3c4 \uc2a4\ud06c\ub9bd\ud2b8\uac00 \ubaa8\ub450 \ubc1b\uc544\uc9c8 \ub54c\uae4c\uc9c0 onload event\uac00 \uc9c0\uc5f0\ub41c\ub2e4\ub294 \ubb38\uc81c\uc810\uc774 \uc788\ub2e4.<\/p>\n<p><img loading=\"lazy\" src=\"http:\/\/appletree.or.kr\/blog\/images\/js-asyncload.png\" alt=\"\" width=\"550\" height=\"52\" \/><\/p>\n<h3>\ub290\uae0b\ud558\uac8c \ucd94\uac00\ud558\ub294 \ubc29\ubc95 (onload \ub54c \ucd94\uac00\ub418\ub294 \ube44\ub3d9\uae30\uc2dd \ud615\ud0dc)<\/h3>\n<p>onload event\ub97c \uc9c0\uc5f0\uc2dc\ud0a4\uc9c0 \uc54a\ub294 \ubc29\ubc95\uc73c\ub860 \uc5b4\ub5a4 \uac83\ub4e4\uc774 \uc788\uc744\uae4c? \uc790\uc5f0\uc2a4\ub7fd\uac8c \ub5a0\uc624\ub974\ub294 \ubc29\ubc95\uc740, \uadf8\ub0e5 onload \uc2dc \ucd94\uac00 function\uc744 \ubd88\ub7ec\uc624\uba74 \uc5b4\ub5a8\uae4c?<\/p>\n<div><a title=\"\ucf54\ub4dc \ubaa8\uc591\uc0c8 \ubc14\uafb8\uae30\" href=\"http:\/\/appletree.or.kr\/blog\/quotes\/%eb%8a%90%ea%b5%bf%ed%95%98%ea%b2%8c-%eb%b9%84%eb%8f%99%ea%b8%b0%ec%8b%9d%ec%9c%bc%eb%a1%9c-javascript%eb%a5%bc-%ec%9b%b9-%eb%ac%b8%ec%84%9c%ec%97%90-%ec%b6%94%ea%b0%80%ed%95%98%eb%8a%94-%eb%b0%a9\/#content\">?<\/a><\/div>\n<pre>window.onload = function() {\n    var s = document.createElement('script');\n    s.type = 'text\/javascript';\n    s.async = true;\n    s.src = 'http:\/\/yourdomain.com\/script.js';\n    var x = document.getElementsByTagName('script')[0];\n    x.parentNode.insertBefore(s, x);\n}<\/pre>\n<p>\uc774 \ubc29\ubc95\ub3c4 \uc791\ub3d9\uc740 \ud558\uaca0\uc9c0\ub9cc, \uc0ac\uc774\ud2b8\uc758 onload event\uc5d0 \uc774\ubbf8 \ub4f1\ub85d\ub418\uc5b4 \uc788\ub294 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \ubb34\ub825\ud654\uc2dc\ud0a4\ub294 \ubd80\uc791\uc6a9\uc774 \uc788\ub2e4.<\/p>\n<h3>\ub290\uae0b\ud558\uace0 \uc870\uc2ec\uc2a4\ub7fd\uac8c \ucd94\uac00\ud558\ub294 \ud615\ud0dc<\/h3>\n<p>\uc704 \ubc29\ubc95\uc758 \ubb38\uc81c\uc810\uc744 \ud574\uacb0\ud560 \ub2e4\uc74c \ub17c\ub9ac\uc801 \ubc29\uc2dd\uc740?<em>addEventListener \ud639\uc740 attachEvent<\/em>?\ud568\uc218\ub97c \uc368\uc11c onload event\uc5d0 \uc5b9\uc5b4 \uc8fc\ub294 \uac83\uc774\ub2e4.<\/p>\n<div><a title=\"\ucf54\ub4dc \ubaa8\uc591\uc0c8 \ubc14\uafb8\uae30\" href=\"http:\/\/appletree.or.kr\/blog\/quotes\/%eb%8a%90%ea%b5%bf%ed%95%98%ea%b2%8c-%eb%b9%84%eb%8f%99%ea%b8%b0%ec%8b%9d%ec%9c%bc%eb%a1%9c-javascript%eb%a5%bc-%ec%9b%b9-%eb%ac%b8%ec%84%9c%ec%97%90-%ec%b6%94%ea%b0%80%ed%95%98%eb%8a%94-%eb%b0%a9\/#content\">?<\/a><\/div>\n<pre>(function() {\n    function async_load(){\n        var s = document.createElement('script');\n        s.type = 'text\/javascript';\n        s.async = true;\n        s.src = 'http:\/\/yourdomain.com\/script.js';\n        var x = document.getElementsByTagName('script')[0];\n        x.parentNode.insertBefore(s, x);\n    }\n    window.attachEvent ? window.attachEvent('onload', async_load) : window.addEventListener('load', async_load, false);\n})();<\/pre>\n<p>\uacb0\uad6d, \uc774\ub807\uac8c \ud558\uba74 onload event\ub97c \uc9c0\uc5f0\uc2dc\ud0a4\uc9c0 \uc54a\uc73c\uba74\uc11c \ub290\uae0b\ud558\uac8c \uc2a4\ud06c\ub9bd\ud2b8\ub97c \ubd88\ub7ec\uc62c \uc218 \uc788\uac8c \ub41c\ub2e4.<\/p>\n<p><img loading=\"lazy\" src=\"http:\/\/appletree.or.kr\/blog\/images\/js-lazyload.png\" alt=\"\" width=\"550\" height=\"54\" \/><\/p>\n<p>\ucc38\uace0\ub85c, \uc678\ubd80 \uc790\ubc14\uc2a4\ud06c\ub9bd\ub97c \ubd88\ub7ec\uc62c \ub54c \ube44\ub3d9\uae30\uc2dd\uc73c\ub85c dependencies\uc5d0 \ub530\ub978 \uc12c\uc138\ud55c \ub85c\ub529 \uc21c\uc11c\ub97c \uc870\uc808\ud574 \uc904 \uc218 \uc788\ub294 \ub2e4\ubaa9\uc801\uc758?<a title=\"Loading And Blocking JavaScript\" href=\"http:\/\/labjs.com\/\">LABjs<\/a>\ub3c4 \ub208\uc5ec\uaca8\ubcfc \ub9cc\ud558\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc678\ubd80 JavaScript \ud30c\uc77c\uc744 \ubb38\uc11c\uc5d0 \ucd94\uac00\ud558\ub294 \ubc29\ubc95\uc5d0\ub294 \uc5ec\ub7ec \uac00\uc9c0\uac00 \uc788\uc9c0\ub9cc, \uc5ec\uae30\uc5d4 onload event\ub97c \uc9c0\uc5f0\uc2dc\ud0a4\uc9c0 \uc54a\uc73c\uba74\uc11c \ubcd1\ub82c \ube44\ub3d9\uae30\uc2dd\uc73c\ub85c \ubd88\ub7ec\uc640\uc11c \ucd94\uac00\ud558\ub294 \ubc29\ubc95\uc744 \uc18c\uac1c\ud55c\ub2e4. Script tag \uac00\uc7a5 \ubcf4\ud3b8\uc801\uc73c\ub85c \uc4f0\uc774\ub294 \ubc99\ubc95\uc774\ub2e4. ? &lt;script type=&#8221;http:\/\/yourdomain.com\/script.js&#8221;&gt;&lt;\/script&gt; \ubb3c\ub860,&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\/784"}],"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=784"}],"version-history":[{"count":0,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/784\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}