{"id":351,"date":"2026-05-17T06:46:12","date_gmt":"2026-05-16T22:46:12","guid":{"rendered":"https:\/\/junai.ai\/blog\/js-modules-19\/"},"modified":"2026-05-17T07:11:48","modified_gmt":"2026-05-16T23:11:48","slug":"js-modules-19","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/js-modules-19\/","title":{"rendered":"\ubaa8\ub4c8 \u2014 import\u00b7export\u00b7\ubc88\ub4e4\ub7ec (\uc911\uae09 19\ud3b8)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 545 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n\/* js-textbook \u2014 PostgreSQL \uad50\uc7ac \ub3d9\uc77c \ud314\ub808\ud2b8 *\/\n:root {\n  --color-primary: #336791;\n  --color-accent: #60a5fa;\n  --color-bg: #fafafa;\n  --color-bg-card: #ffffff;\n  --color-text: #1e293b;\n  --color-text-muted: #64748b;\n  --hero-start: #0f172a;\n  --hero-end: #336791;\n  --font-body: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;\n  --size-body: 17px;\n  --line-height: 1.75;\n}\n* { box-sizing: border-box; }\n.container { max-width: 760px; margin: 0 auto; padding: 0 22px 80px; }\n.hero { background: linear-gradient(135deg, var(--hero-start) 0%, var(--hero-end) 100%); color: #fff; padding: 72px 22px 56px; text-align: center; }\n.hero .badge { display: inline-block; background: rgba(96,165,250,0.18); color: var(--color-accent); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 18px; }\n.hero h1 { margin: 0 0 18px; font-size: 36px; line-height: 1.3; letter-spacing: -0.3px; }\n.hero p.sub { margin: 0 auto; max-width: 580px; font-size: 17px; color: #bfdbfe; }\n.hero img { width: 100%; max-width: 720px; height: auto; margin: 36px auto 0; display: block; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); }\n.meta { display: flex; gap: 14px; justify-content: center; margin-top: 20px; font-size: 13px; color: #93c5fd; flex-wrap: wrap; }\n.meta span::before { content: \"\u00b7\"; margin-right: 14px; color: #1e3a8a; }\n.meta span:first-child::before { content: \"\"; margin: 0; }\narticle { background: var(--color-bg-card); margin-top: -36px; padding: 44px 28px; border-radius: 14px; box-shadow: 0 2px 18px rgba(0,0,0,0.06); }\narticle p { margin: 0 0 18px; }\nh2 { font-size: 28px; line-height: 1.35; letter-spacing: -0.3px; margin: 48px 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--color-primary); }\nh2:first-of-type { margin-top: 8px; }\nh3 { font-size: 21px; line-height: 1.4; margin: 30px 0 12px; color: var(--color-primary); }\ncode { background: #f1f5f9; color: #0f172a; padding: 2px 6px; border-radius: 4px; font-family: 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 0.92em; }\npre { background: #0f172a; color: #e2e8f0; padding: 18px 20px; border-radius: 10px; overflow-x: auto; font-size: 14.5px; line-height: 1.65; margin: 18px 0; }\npre code { background: transparent; color: inherit; padding: 0; }\nul, ol { margin: 0 0 18px; padding-left: 24px; }\nli { margin-bottom: 8px; }\nstrong { color: #0f172a; }\n.databox { background: #eff6ff; border-left: 4px solid var(--color-primary); padding: 18px 20px; border-radius: 6px; margin: 22px 0; }\n.databox p { margin: 0 0 8px; }\n.databox p:last-child { margin: 0; }\n.databox strong { color: var(--color-primary); }\n.warnbox { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-left: 4px solid #d97706; padding: 18px 20px; border-radius: 6px; margin: 22px 0; }\n.warnbox strong { color: #92400e; }\n.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 22px 0; }\ntable { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--color-bg-card); }\nth, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid #e2e8f0; vertical-align: top; }\nth { background: #f1f5f9; font-weight: 700; color: #0f172a; }\ntd:first-child, th:first-child { font-weight: 700; }\n.cta { background: linear-gradient(135deg, #336791 0%, #60a5fa 100%); color: #fff; padding: 30px 24px; border-radius: 12px; margin-top: 44px; text-align: center; }\n.cta h3 { color: #fff; margin: 0 0 10px; }\n.cta p { margin: 0; color: #dbeafe; }\n.series-nav { background: #eff6ff; padding: 18px 22px; border-radius: 10px; margin-top: 24px; font-size: 14.5px; color: var(--color-text-muted); }\n.series-nav strong { color: var(--color-primary); }\n@media (max-width: 480px) {\n  .hero { padding: 52px 18px 44px; }\n  .hero h1 { font-size: 26px; }\n  .hero p.sub { font-size: 15px; }\n  article { padding: 28px 18px; border-radius: 10px; }\n  h2 { font-size: 22px; }\n  h3 { font-size: 18px; }\npre { font-size: 13px; padding: 14px 16px; }\n}\n@media (max-width: 560px) {\n  .tablewrap table, .tablewrap thead, .tablewrap tbody, .tablewrap tr, .tablewrap th, .tablewrap td { display: block; width: auto; }\n  .tablewrap thead { display: none; }\n  .tablewrap tr { margin: 0 0 14px; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }\n  .tablewrap td { border: none; border-bottom: 1px solid #f1f5f9; padding: 9px 14px; }\n  .tablewrap td:first-child { background: #eff6ff; font-weight: 800; font-size: 15.5px; }\n  .tablewrap td:last-child { border-bottom: none; }\n  .tablewrap td[data-label]::before { content: attr(data-label) \" \u2014 \"; font-weight: 700; color: var(--color-primary); }\n}\n<\/style>\n<header class=\"hero\">\n  <span class=\"badge\">\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uad50\uc7ac \u00b7 19\ud3b8 \/ 26\ud3b8<\/span>\n  <h1>\ubaa8\ub4c8 \u2014 import\u00b7export\u00b7\ubc88\ub4e4\ub7ec<\/h1>\n  <p class=\"sub\">ESM vs CommonJS, default vs named, \ubc88\ub4e4\ub7ec \ud55c \uc904.<\/p>\n  <div class=\"meta\"><span>\uc911\uae09<\/span><span>\uc77d\ub294 \uc2dc\uac04 6\ubd84<\/span><span>2026-05-17<\/span><\/div>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-190.jpg\" alt=\"\uc5ec\ub7ec JS \ud30c\uc77c\uc774 import\/export \ub85c \uc5f0\uacb0\ub41c \ubaa8\ub4c8 \uadf8\ub798\ud504 \uadf8\ub9bc\">\n<\/header>\n\n<div class=\"container\">\n<article>\n\n<p>\ucf54\ub4dc\uac00 \ud55c \ud30c\uc77c\uc744 \ub118\uc5b4\uac00\uba74 \ubaa8\ub4c8\uc774 \ud544\uc694\ud569\ub2c8\ub2e4. JS \uc758 \ubaa8\ub4c8\uc740 \uc5ed\uc0ac\uc0c1 \ub450 \uac00\uc9c0\uac00 \uacf5\uc874 \u2014 <strong>ESM<\/strong>(\ud604\uc7ac \ud45c\uc900) \uacfc <strong>CommonJS<\/strong>(Node \uc758 \uc61b \ud45c\uc900). 19\ud3b8\uc740 \ub450 \ubaa8\uc591\uc758 \ucc28\uc774\uc640, \uadf8 \uc704\uc5d0 \ubc88\ub4e4\ub7ec\uac00 \ubb34\uc5c7\uc744 \ud558\ub294\uc9c0 \uc815\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n\n<h2>ESM \u2014 \ud604\uc7ac \ud45c\uc900<\/h2>\n\n<pre><code>\/\/ math.js\nexport function add(a, b) { return a + b; }\nexport const PI = 3.14159;\n\n\/\/ \ud55c\uaebc\ubc88\uc5d0\nexport { add, PI };\n\n\/\/ default \u2014 \ubaa8\ub4c8\uc758 \uba54\uc778 export\nexport default function main() { ... }\n\n\/\/ app.js\nimport main, { add, PI } from \".\/math.js\";\n\/\/     ^ default      ^ named<\/code><\/pre>\n\n<h2>import \ubaa8\ub4e0 \ud615\ud0dc<\/h2>\n\n<pre><code>import { a, b } from \".\/x.js\";         \/\/ named\nimport { a as alias } from \".\/x.js\";    \/\/ \ubcc4\uce6d\nimport x from \".\/x.js\";                 \/\/ default\nimport x, { a } from \".\/x.js\";          \/\/ default + named\nimport * as X from \".\/x.js\";            \/\/ \ub124\uc784\uc2a4\ud398\uc774\uc2a4\nimport \".\/x.js\";                        \/\/ side-effect (CSS\u00b7polyfill)\n\n\/\/ \ub3d9\uc801 import \u2014 \ucf54\ub4dc \ubd84\ud560\nconst m = await import(\".\/x.js\");\nm.add(1, 2);<\/code><\/pre>\n\n<h2>CommonJS \u2014 Node \uc758 \uc61b \ud45c\uc900<\/h2>\n\n<pre><code>\/\/ math.cjs\nfunction add(a, b) { return a + b; }\nconst PI = 3.14159;\nmodule.exports = { add, PI };\n\n\/\/ \ub610\ub294 default \ube44\uc2b7\nmodule.exports = function main() { ... };\n\n\/\/ app.cjs\nconst { add, PI } = require(\".\/math.cjs\");\nconst main = require(\".\/math.cjs\");<\/code><\/pre>\n\n<h2>ESM vs CommonJS \u2014 \ud55c \ud45c<\/h2>\n\n<div class=\"tablewrap\">\n<table>\n  <thead>\n    <tr><th><\/th><th>ESM<\/th><th>CommonJS<\/th><\/tr>\n  <\/thead>\n  <tbody>\n    <tr><td data-label=\"\">\ubb38\ubc95<\/td><td data-label=\"\">import\/export<\/td><td data-label=\"\">require\/module.exports<\/td><\/tr>\n    <tr><td data-label=\"\">\ub85c\ub529<\/td><td data-label=\"\">\uc815\uc801 (\ud2b8\ub9ac \uc170\uc774\ud0b9 \uac00\ub2a5)<\/td><td data-label=\"\">\ub3d9\uc801 (\ub7f0\ud0c0\uc784)<\/td><\/tr>\n    <tr><td data-label=\"\">\uc0c1\uc704 await<\/td><td data-label=\"\">\uac00\ub2a5<\/td><td data-label=\"\">\ubd88\uac00<\/td><\/tr>\n    <tr><td data-label=\"\">\ube0c\ub77c\uc6b0\uc800<\/td><td data-label=\"\">\ud45c\uc900 (script type=&#8221;module&#8221;)<\/td><td data-label=\"\">\ubc88\ub4e4\ub7ec \ud544\uc694<\/td><\/tr>\n    <tr><td data-label=\"\">\ud30c\uc77c \ud655\uc7a5\uc790<\/td><td data-label=\"\">.mjs \ub610\ub294 type:module<\/td><td data-label=\"\">.cjs \ub610\ub294 \uae30\ubcf8<\/td><\/tr>\n  <\/tbody>\n<\/table>\n<\/div>\n\n<h2>package.json \u2014 type \ud544\ub4dc<\/h2>\n\n<pre><code>{\n  \"name\": \"my-pkg\",\n  \"type\": \"module\",       \/\/ \u2190 \uc774 \uc904: .js \ud30c\uc77c\uc774 ESM \uc73c\ub85c \ud574\uc11d\ub428\n  \"main\": \".\/dist\/index.js\",\n  \"exports\": {\n    \".\": {\n      \"import\": \".\/dist\/index.js\",\n      \"require\": \".\/dist\/index.cjs\"\n    }\n  }\n}<\/code><\/pre>\n\n<p>2026\ub144 \uc0c8 \ud504\ub85c\uc81d\ud2b8\ub294 \uac70\uc758 <code>\"type\": \"module\"<\/code>. CJS \uc640 \ud638\ud658\uc774 \ud544\uc694\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub294 <code>exports<\/code> \ub85c \ub450 \uac00\uc9c0\ub97c \ubaa8\ub450 \uc81c\uacf5.<\/p>\n\n<h2>\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c ESM \uc9c1\uc811 \uc0ac\uc6a9<\/h2>\n\n<pre><code>&lt;script type=\"module\" src=\".\/app.js\"&gt;&lt;\/script&gt;\n\n\/\/ app.js (\ube0c\ub77c\uc6b0\uc800)\nimport { greet } from \".\/greet.js\";   \/\/ \ud655\uc7a5\uc790 \ud544\uc218\ngreet();\n\n\/\/ CDN \uc73c\ub85c \ub77c\uc774\ube0c\ub7ec\ub9ac (esm.sh, unpkg)\nimport { z } from \"https:\/\/esm.sh\/zod@3\";<\/code><\/pre>\n\n<div class=\"warnbox\">\n  <p><strong>\ube0c\ub77c\uc6b0\uc800 ESM \uc758 \ud55c\uacc4.<\/strong> \u2460 \ub124\ud2b8\uc6cc\ud06c\uc5d0 \uc694\uccad\uc774 \ud30c\uc77c\ub9c8\ub2e4 \ub530\ub85c (\uc791\uc740 \ubaa8\ub4c8 \uc218\uc2ed \uac1c \u2192 \ub290\ub9bc). \u2461 \ud655\uc7a5\uc790\u00b7\uacbd\ub85c \ubcc0\ud658 \uc5c6\uc74c. \uc2e4\uc81c \uc11c\ube44\uc2a4\ub294 \uac70\uc758 \ud56d\uc0c1 <strong>\ubc88\ub4e4\ub7ec<\/strong>\ub85c \ud55c \ud30c\uc77c(\ub610\ub294 \uccad\ud06c \uba87 \uac1c) \ub85c \ubb36\uc74c.<\/p>\n<\/div>\n\n<h2>\ubc88\ub4e4\ub7ec \u2014 esbuild\u00b7vite\u00b7webpack<\/h2>\n\n<pre><code># Vite \u2014 2026\ub144 \ud45c\uc900\nnpm create vite@latest my-app\n# \u2192 React\/Vue\/Svelte \ub4f1 \ud15c\ud50c\ub9bf \uc120\ud0dd\n# \uac1c\ubc1c: vite (dev server + HMR)\n# \ube4c\ub4dc: vite build \u2192 \ucd5c\uc801\ud654\ub41c \uc815\uc801 \ud30c\uc77c\n\n# esbuild \u2014 \ub2e8\uc21c \ube4c\ub354\nnpm install -D esbuild\nnpx esbuild app.js --bundle --outfile=dist.js --minify\n\n# webpack \u2014 \uc61b \ud45c\uc900 (\uac00\uc7a5 \ub9ce\uc740 \uc635\uc158, \uac00\uc7a5 \ubcf5\uc7a1)\n# tsup \u2014 \ub77c\uc774\ube0c\ub7ec\ub9ac \ubc1c\ud589\uc6a9 (esbuild \uc704)<\/code><\/pre>\n\n<div class=\"databox\">\n  <p><strong>2026\ub144 \uc120\ud0dd\uc9c0.<\/strong> \u2460 \uc571 \u2014 <strong>Vite<\/strong> (\ubaa8\ub4e0 \ud504\ub808\uc784\uc6cc\ud06c \ud638\ud658, dev\/build \ube60\ub984). \u2461 \ub77c\uc774\ube0c\ub7ec\ub9ac \u2014 <strong>tsup<\/strong>(esbuild \uae30\ubc18, ESM+CJS \ub3d9\uc2dc \ucd9c\ub825). \u2462 \ubaa8\ub178\ub808\ud3ec\u00b7\uadf9\ub3c4 \ucee4\uc2a4\ud130\ub9c8\uc774\uc988 \u2014 <strong>webpack\/turbopack<\/strong>. webpack \uc740 \uc0c8\ub85c \uc2dc\uc791\ud560 \uc774\uc720 \uac70\uc758 \uc5c6\uc74c.<\/p>\n<\/div>\n\n<h2>\ud2b8\ub9ac \uc170\uc774\ud0b9 \u2014 \uc548 \uc4f0\ub294 \ucf54\ub4dc \uc81c\uac70<\/h2>\n\n<pre><code>\/\/ util.js\nexport function used() { ... }\nexport function unused() { ... }   \/\/ \uc548 \uc4f0\ub294 \ud568\uc218\n\n\/\/ app.js\nimport { used } from \".\/util.js\";\nused();\n\n\/\/ \ubc88\ub4e4 \uacb0\uacfc \u2192 unused \uac00 \uc0ac\ub77c\uc9d0 (\ud2b8\ub9ac \uc170\uc774\ud0b9)\n\/\/ ESM \ub9cc \uac00\ub2a5 (CJS \ub294 \ub3d9\uc801\uc774\ub77c \ubd88\uac00)<\/code><\/pre>\n\n<h2>\ucf54\ub4dc \ubd84\ud560 \u2014 dynamic import<\/h2>\n\n<pre><code>\/\/ \ubb34\uac70\uc6b4 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub294 \ud544\uc694\ud560 \ub54c\ub9cc \ub85c\ub4dc\nbtn.addEventListener(\"click\", async () =&gt; {\n  const { default: Chart } = await import(\".\/chart-lib.js\");\n  new Chart(...);\n});\n\n\/\/ React lazy\nconst Heavy = React.lazy(() =&gt; import(\".\/Heavy.js\"));<\/code><\/pre>\n\n<h2>\uc2e4\uc804 \u2014 \ubaa8\ub4c8 \ub514\uc790\uc778 \uac00\uc774\ub4dc<\/h2>\n\n<ul>\n  <li><strong>\ud55c \ud30c\uc77c \ud55c \ucc45\uc784<\/strong>. 100~300\uc904 \uc815\ub3c4\uac00 \ubcf4\ud1b5 \uc88b\uc740 \ud06c\uae30.<\/li>\n  <li><strong>default \ubcf4\ub2e4 named<\/strong>. \uc790\ub3d9\uc644\uc131\u00b7\uac80\uc0c9\u00b7\ub9ac\ud329\ud130\ub9c1 \uce5c\ud654.<\/li>\n  <li><strong>\uc678\ubd80\uc5d0\ub294 \uc791\uc740 API<\/strong>. <code>index.js<\/code> \uc5d0\uc11c \ud544\uc694\ud55c \uac83\ub9cc re-export.<\/li>\n  <li><strong>\uc21c\ud658 import \ud53c\ud558\uae30<\/strong>. A \u2192 B \u2192 A \ub294 undefined \uc704\ud5d8.<\/li>\n  <li><strong>side-effect import \ucd5c\uc18c\ud654<\/strong>. \ud2b8\ub9ac \uc170\uc774\ud0b9\uc744 \uc704\ud574 <code>sideEffects: false<\/code>(package.json).<\/li>\n<\/ul>\n\n<div class=\"warnbox\">\n  <p><strong>\uc21c\ud658 import \uc758 \ud568\uc815.<\/strong> A \uac00 B \ub97c import, B \uac00 A \ub97c import. ESM \uc740 \ubd80\ubd84 \ucd08\uae30\ud654 \uc0c1\ud0dc\ub85c \uc9c4\ud589\ud574\uc11c <strong>undefined<\/strong> \uac00 \ub4e4\uc5b4\uac08 \uc218 \uc788\uc74c. \ubcf4\ud1b5 \ud55c \ucabd\uc744 \ubd84\ub9ac\ud558\uac70\ub098 \uacf5\ud1b5 \ubaa8\ub4c8\ub85c \ucd94\ucd9c\ud574 \ud574\uacb0.<\/p>\n<\/div>\n\n<div class=\"cta\">\n  <h3>20\ud3b8 \u2014 \uc815\uaddc\uc2dd \uae30\ucd08<\/h3>\n  <p>\uc774\uba54\uc77c\u00b7\uc804\ud654\ubc88\ud638 \uac80\uc99d, \uadf8\ub8f9\uacfc \ucea1\ucc98.<\/p>\n<\/div>\n\n<div class=\"series-nav\">\n  <strong>\ud83d\udcda \uc27d\uac8c \ubc30\uc6b0\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uad50\uc7ac<\/strong><br>\n  \uc774\uc804: 18\ud3b8 \ud074\ub798\uc2a4 \u00b7 \ud604\uc7ac: <strong>19\ud3b8 (\uc911\uae09)<\/strong> \u00b7 \ub2e4\uc74c \u2192 20\ud3b8 \uc815\uaddc\uc2dd \u00b7 \uc9c4\ud589: <strong>19\/26<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>ESM\u00b7CJS\u00b7default\u00b7named\u00b7\ubc88\ub4e4\ub7ec \uc815\ub9ac. 26\ud3b8 \uad50\uc7ac 19\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":545,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-351","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-basic"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/comments?post=351"}],"version-history":[{"count":2,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/351\/revisions"}],"predecessor-version":[{"id":571,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/351\/revisions\/571"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/545"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}