{"id":344,"date":"2026-06-26T13:34:44","date_gmt":"2026-06-26T13:34:44","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=344"},"modified":"2026-06-26T14:02:46","modified_gmt":"2026-06-26T14:02:46","slug":"module-export-import","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=344","title":{"rendered":"module-export-import"},"content":{"rendered":"<p><a href=\"https:\/\/ko.javascript.info\/modules-intro\">\ud83d\udd17\ubaa8\ub4c8\ud559\uc2b5 <\/a><br \/>\n<a href=\"https:\/\/developer.mozilla.org\/ko\/docs\/Web\/JavaScript\/Reference\/Statements\/export\">\ud83d\udd17MDN\ubaa8\ub4c8\ubb38\uc11c<\/a><\/p>\n<blockquote>\n<p><strong>Info<\/strong>: \ud83d\udce2 \ud504\ub85c\uadf8\ub798\ubc0d\uc5d0\uc11c\u00a0<code>\ubaa8\ub4c8 <\/code>\uc774\ub780\u00a0<strong>\ud504\ub85c\uadf8\ub7a8\uc744 \uad6c\uc131\ud558\ub294 \uad6c\uc131\uc694\uc18c\uc758 \uc77c\ubd80<br \/>\n\ub2e4\ub978 \uc0ac\ub78c\uc758 \ucf54\ub4dc\ub098, \ub0b4\uac00 \uc798\uac8c \ucabc\uac1c \ub193\uc740 \ucf54\ub4dc\ub97c \uc7ac\uc0ac\uc6a9\ud558\uace0 \uc2f6\uc744 \ub54c \uc4f4\ub2e4<\/strong><\/p>\n<\/blockquote>\n<hr>\n<ul>\n<li><strong>export,default<\/strong><\/li>\n<\/ul>\n<p><strong>\u270f\ufe0fmodule.html<\/strong><\/p>\n<pre><code class=\"language-javascript\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;ko&quot;&gt;\n\n&lt;head&gt;\n  &lt;meta charset=&quot;UTF-8&quot;&gt;\n  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n  &lt;title&gt;Document&lt;\/title&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n  &lt;h1&gt;modules&lt;\/h1&gt;\n  &lt;button&gt;say&lt;\/button&gt;\n  &lt;script&gt;\n    document.querySelector(&#39;button&#39;).addEventListener(&#39;click&#39;, () =&gt; { say(&quot;\ub9dd\uace0&quot;) })\n    function say(user) {\n      alert(`&#39;hello&#39;,${user}`)\n    }\n  &lt;\/script&gt;\n&lt;\/body&gt;\n\n&lt;\/html&gt;\n<\/code><\/pre>\n<p>\uc77c\ubc18 html \ubb38\uc11c\uc791\uc131\ud6c4 \ubaa8\ub4c8\ud654 \ud55c\ub2e4<\/p>\n<hr>\n<p><strong>\u270f\ufe0fsay.js<\/strong><\/p>\n<pre><code class=\"language-javascript\">\/*export \ub97c \ubcc0\uc218\ub098 \ud568\uc218 \uc55e\uc5d0 \ubd99\uc774\uba74 \uc678\ubd80 \ubaa8\ub4c8\uc5d0\uc11c \ud574\ub2f9 \ubcc0\uc218\ub098 \ud568\uc218\uc5d0 \uc811\uadfc\uac00\ub2a5*\/\nexport function say(user){\n  alert(`Hello,${user}!`)\n}\n<\/code><\/pre>\n<p><strong>\u270f\ufe0fmodule.html<\/strong><\/p>\n<pre><code class=\"language-javascript\">...\n&lt;body&gt;\n\n  &lt;script type=&quot;module&quot;&gt;\n    \/* import \ub97c \uc0ac\uc6a9\ud574 say.js\uc758 \ud568\uc218 say\ub97c \uc0ac\uc6a9 *\/\n\n    import {say} from &#39;.\/say.js&#39;;  \n\t   document.querySelector(&#39;button&#39;).addEventListener(&#39;click&#39;, () =&gt; { say(&quot;\ub9dd\uace0&quot;) })\n\n\t&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p>\uc2e4\ud589\ud654\uba74<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/01-23.png\" alt=\"\"><\/p>\n<blockquote>\n<p><strong>Info<\/strong>: \ud83d\udce2 <a href=\"https:\/\/ko.javascript.info\/modules-intro#ref-1055\">\uc8fc\uc758\uc0ac\ud56d<\/a> : <strong>\ub77c\uc774\ube0c\uc11c\ubc84\uc5d0\uc11c \ud560\uac83<\/strong><\/p>\n<\/blockquote>\n<ul>\n<li><strong>\ubaa8\ub4c8\uc740 \ub85c\uceec \ud30c\uc77c\uc5d0\uc11c \ub3d9\uc791\ud558\uc9c0 \uc54a\uace0, HTTP \ub610\ub294 HTTPS \ud504\ub85c\ud1a0\ucf5c\uc744 \ud1b5\ud574\uc11c\ub9cc \ub3d9\uc791\ud569\ub2c8\ub2e4.<\/strong><\/li>\n<li>\ubaa8\ub4c8\uc740 \uc790\uc2e0\ub9cc\uc758 \uc2a4\ucf54\ud504\uac00 \uc788\uc2b5\ub2c8\ub2e4. \ub530\ub77c\uc11c \ubaa8\ub4c8 \ub0b4\ubd80\uc5d0\uc11c \uc815\uc758\ud55c \ubcc0\uc218\ub098 \ud568\uc218\ub294 \ub2e4\ub978 \uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \uc811\uadfc\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4. \ube0c\ub77c\uc6b0\uc800 \ud658\uacbd\uc5d0\uc11c\ub3c4\u00a0<code>&lt;script type=&quot;module&quot;&gt;<\/code><br \/>\n\uc744 \uc0ac\uc6a9\ud574 \ubaa8\ub4c8\uc744 \ub9cc\ub4e4\uba74 \ub3c5\ub9bd\uc801\uc778 \uc2a4\ucf54\ud504\uac00 \ub9cc\ub4e4\uc5b4\uc9d1\ub2c8\ub2e4.<\/li>\n<li>\ub3d9\uc77c\ud55c \ubaa8\ub4c8\uc774 \uc5ec\ub7ec \uacf3\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub354\ub77c\ub3c4 \ubaa8\ub4c8\uc740 \ucd5c\ucd08 \ud638\ucd9c \uc2dc \ub2e8 \ud55c \ubc88\ub9cc \uc2e4\ud589\ub429\ub2c8\ub2e4. \uc2e4\ud589 \ud6c4 \uacb0\uacfc\ub294 \uc774 \ubaa8\ub4c8\uc744 \uac00\uc838\uac00\ub824\ub294 \ubaa8\ub4e0 \ubaa8\ub4c8\uc5d0 \ub0b4\ubcf4\ub0b4 \uc9d1\ub2c8\ub2e4.<\/li>\n<\/ul>\n<p><strong>[\uc5ec\ub7ec \uac1d\uccb4 export &amp; import \ud558\uae30]<\/strong><\/p>\n<p><strong>\u270f\ufe0fmain.js<\/strong><\/p>\n<pre><code class=\"language-javascript\">function funcA() {\n\tconsole.log(&quot;functionAA&quot;);\n}\nfunction funcB(test) {\n\tconsole.log(test, &quot;functionbb&quot;);\n}\nconst varC = &quot;hello&quot;;\nexport { funcA, funcB, varC };\n<\/code><\/pre>\n<p><code>import<\/code> \ud560 \ub54c\ub294 <code>{}<\/code> \ub97c \uc774\uc6a9\ud569\ub2c8\ub2e4.<br \/>\n<strong>\u270f\ufe0fmodule.html<\/strong><\/p>\n<pre><code class=\"language-javascript\">&lt;script type=&quot;module&quot;&gt;\n  import {funcA,funcB,varC} from &#39;.\/main.js&#39;;  \n  funcA()\n  funcB(varC)\n&lt;\/script&gt;\n<\/code><\/pre>\n<p><strong>\uc2e4\ud589\ud654\uba74<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/02-17.png\" alt=\"\"><\/p>\n<hr>\n<h4><strong>default export\uc640 named export \ucc28\uc774\uc810<\/strong><\/h4>\n<h3><strong>1. Default Export<\/strong><\/h3>\n<ul>\n<li>default \ub85c \uc120\uc5b8\ub41c \ubaa8\ub4c8\uc740 \ud558\ub098\uc758 \ud30c\uc77c\uc5d0\uc11c \ub2e8 \ud558\ub098\uc758 \ubcc0\uc218 \ub610\ub294 \ud074\ub798\uc2a4 \ub4f1\ub9cc export \ud560 \uc218 \uc788\ub2e4.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">\/\/app.js\nconst app= () =&gt; {\n     ...\n}export default app\n<\/code><\/pre>\n<ul>\n<li>import \ud560 \ub54c\ub294 \uc544\ubb34 \uc774\ub984\uc73c\ub85c\ub098 import \uac00\ub2a5\ud558\ub2e4.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">\/\/app-child1.js\nimport ypp from &#39;..\/app&#39;\n<\/code><\/pre>\n<p>\ub610\ub294<\/p>\n<pre><code class=\"language-javascript\">\/\/app-child2.js\nimport bpp from &#39;..\/app&#39;\n<\/code><\/pre>\n<p>\uc774\ub807\uac8c \uc0ac\uc6a9\ud558\ub294\uac83\uc774 \uac00\ub2a5<\/p>\n<h3><strong>2. named export<\/strong><\/h3>\n<ul>\n<li>\ud55c \ud30c\uc77c \ub0b4\uc5d0\uc11c \uc5ec\ub7ec \ubcc0\uc218\/\ud074\ub798\uc2a4 \ub4f1\ub4f1\uc744 export \ud558\ub294 \uac83\uc774 \uac00\ub2a5\ud558\ub2e4.<\/li>\n<\/ul>\n<pre><code class=\"language-text\">export class MyFirstClass { \/* ... *\/ }\nexport class MySecondClass { \/* ... *\/ }\n<\/code><\/pre>\n<ul>\n<li>\ub2e4\ub9cc, import \uc2dc {} \uc548\uc5d0\ub2e4\uac00 export \ub41c \uc774\ub984\uacfc \ub3d9\uc77c\ud558\uac8c \uc124\uc815\ud574\uc57c \ud55c\ub2e4.<\/li>\n<\/ul>\n<pre><code class=\"language-text\">import { MyFirstClass, MySecondClass } from &#39;.\/MyClass&#39;\n<\/code><\/pre>\n<ul>\n<li>\ub2e4\ub978 \uc774\ub984\uc73c\ub85c import \ud560 \uc218 \uc788\uc73c\ub098 \uc544\ub798\ucc98\ub7fc\u00a0<strong><code>as<\/code><\/strong>\ub97c \uc0ac\uc6a9\ud574\uc57c \ud55c\ub2e4.<\/li>\n<\/ul>\n<pre><code class=\"language-text\">import { MyFirstClass as BlahBlahClass, MySecondClass } from &#39;.\/MyClass&#39;\n<\/code><\/pre>\n<ul>\n<li><code>as<\/code>\u00a0\ub97c \uc0ac\uc6a9\ud558\uba74 \ud55c \ud30c\uc77c\uc5d0 \uc788\ub294 \ud074\ub798\uc2a4\/\ubcc0\uc218\ub4e4\uc744 \ud55c \ubc88\uc5d0 import \ud560 \uc218 \uc788\ub2e4.<\/li>\n<\/ul>\n<pre><code class=\"language-text\">import * as Hello from &#39;.\/MyClass&#39;\n\/\/ \uc774\ub807\uac8c import \ud558\uba74 Hello.MyFirstClass \uc774\ub7f0\uc2dd\uc73c\ub85c \uc0ac\uc6a9\ud574\uc57c \ud568\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udd17\ubaa8\ub4c8\ud559\uc2b5 \ud83d\udd17MDN\ubaa8\ub4c8\ubb38\uc11c Info: \ud83d\udce2 \ud504\ub85c\uadf8\ub798\ubc0d\uc5d0\uc11c\u00a0\ubaa8\ub4c8 \uc774\ub780\u00a0\ud504\ub85c\uadf8\ub7a8\uc744 \uad6c\uc131\ud558\ub294 \uad6c\uc131\uc694\uc18c\uc758 \uc77c\ubd80 \ub2e4\ub978 \uc0ac\ub78c\uc758 \ucf54\ub4dc\ub098, \ub0b4\uac00 \uc798\uac8c \ucabc\uac1c \ub193\uc740 \ucf54\ub4dc\ub97c \uc7ac\uc0ac\uc6a9\ud558\uace0 \uc2f6\uc744 \ub54c \uc4f4\ub2e4 export,default \u270f\ufe0fmodule.html &lt;!DOCTYPE html&gt; &lt;html lang=&quot;ko&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt;Document&lt;\/title&gt; &lt;\/head&gt; &lt;body&gt; &lt;h1&gt;modules&lt;\/h1&gt; &lt;button&gt;say&lt;\/button&gt; &lt;script&gt; document.querySelector(&#39;button&#39;).addEventListener(&#39;click&#39;, () =&gt; { say(&quot;\ub9dd\uace0&quot;) }) function say(user) { alert(`&#39;hello&#39;,${user}`) } &lt;\/script&gt; &#8230; <a title=\"module-export-import\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=344\" aria-label=\"module-export-import\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"class_list":["post-344","post","type-post","status-publish","format-standard","hentry","category-javascript-basics"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=344"}],"version-history":[{"count":2,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/344\/revisions"}],"predecessor-version":[{"id":2231,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/344\/revisions\/2231"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}