{"id":494,"date":"2026-05-17T07:02:34","date_gmt":"2026-05-16T23:02:34","guid":{"rendered":"https:\/\/junai.ai\/blog\/ts-modules-9\/"},"modified":"2026-05-17T07:02:34","modified_gmt":"2026-05-16T23:02:34","slug":"ts-modules-9","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/ts-modules-9\/","title":{"rendered":"\ubaa8\ub4c8 \uc2dc\uc2a4\ud15c \u2014 ESM\u00b7CJS\u00b7.d.ts (\uae30\ucd08 9\ud3b8)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 280 -->\n<div style=\"max-width:800px;margin:0 auto;\">\n<style>\n:root{--color-primary:#3178c6;--color-accent:#60a5fa;--color-bg:#fafafa;--color-bg-card:#ffffff;--color-text:#1e293b;--color-text-muted:#64748b;--hero-start:#0f172a;--hero-end:#3178c6;--font-body:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;--size-body:17px;--line-height:1.75;}\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:#dbeafe;}\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,#3178c6 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){.hero{padding:52px 18px 44px;}.hero h1{font-size:26px;}.hero p.sub{font-size:15px;}article{padding:28px 18px;border-radius:10px;}h2{font-size:22px;}h3{font-size:18px;}body{font-size:16px;}pre{font-size:13px;padding:14px 16px;}}\n@media (max-width:560px){.tablewrap table,.tablewrap thead,.tablewrap tbody,.tablewrap tr,.tablewrap th,.tablewrap td{display:block;width:auto;}.tablewrap thead{display:none;}.tablewrap tr{margin:0 0 14px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;}.tablewrap td{border:none;border-bottom:1px solid #f1f5f9;padding:9px 14px;}.tablewrap td:first-child{background:#eff6ff;font-weight:800;font-size:15.5px;}.tablewrap td:last-child{border-bottom:none;}.tablewrap td[data-label]::before{content:attr(data-label) \" \u2014 \";font-weight:700;color:var(--color-primary);}}\n<\/style>\n<header class=\"hero\">\n  <span class=\"badge\">\ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8 \uad50\uc7ac \u00b7 9\ud3b8 \/ 20\ud3b8<\/span>\n  <h1>\ubaa8\ub4c8 \uc2dc\uc2a4\ud15c \u2014 ESM\u00b7CJS\u00b7.d.ts<\/h1>\n  <p class=\"sub\">import\/export \ubb38\ubc95, ESM vs CJS, paths\u00b7moduleResolution, .d.ts \ud55c \uc904.<\/p>\n  <div class=\"meta\"><span>\uae30\ucd08<\/span><span>\uc77d\ub294 \uc2dc\uac04 7\ubd84<\/span><span>2026-05-17<\/span><\/div>\n  <img decoding=\"async\" src=\"https:\/\/junai.ai\/blog\/wp-content\/uploads\/2026\/05\/hero-59.jpg\" alt=\"\uc5ec\ub7ec .ts \ud30c\uc77c\uc774 import\/export \ub85c \uc5f0\uacb0\ub41c \ubaa8\ub4c8 \uadf8\ub798\ud504 \uc77c\ub7ec\uc2a4\ud2b8\">\n<\/header>\n\n<div class=\"container\">\n<article>\n\n<p>\ucf54\ub4dc\uac00 \ud55c \ud30c\uc77c\uc744 \ub118\uc5b4\uac00\ub294 \uc21c\uac04 \ubaa8\ub4c8 \uc2dc\uc2a4\ud15c\uacfc \ub9c8\uc8fc\uce69\ub2c8\ub2e4. JS \uc758 \ubaa8\ub4c8\uc740 \uc5ed\uc0ac\uc0c1 \ub450 \uac00\uc9c0\uac00 \uacf5\uc874\ud574 \uc654\uc5b4\uc694 \u2014 <strong>CommonJS(CJS)<\/strong> \uc640 <strong>ESM(ES Modules)<\/strong>. TS \uac00 \ub458 \ub2e4 \ubc1b\uccd0\uc8fc\uc9c0\ub9cc, 2026\ub144 \uc0c8 \ucf54\ub4dc\ub294 \uac70\uc758 \ud56d\uc0c1 ESM \uc785\ub2c8\ub2e4. 9\ud3b8\uc740 import\/export \uc758 \ubaa8\ub4e0 \ubcc0\ud615\uacfc tsconfig \uc758 \ubaa8\ub4c8 \uc635\uc158\uc744 \uc815\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n\n<h2>ESM \uae30\ubcf8 \u2014 export \u00b7 import<\/h2>\n\n<pre><code>\/\/ math.ts\nexport function add(a: number, b: number) { return a + b; }\nexport const PI = 3.14159;\nexport type Pair = [number, number];\n\n\/\/ \ud55c\uaebc\ubc88\uc5d0 \ubb36\uc5b4\uc11c export \ub3c4 \uac00\ub2a5\nexport { add, PI, type Pair };\n\n\/\/ app.ts\nimport { add, PI, type Pair } from \".\/math\";\n\/\/                ^ \ud0c0\uc785\ub9cc import \ub294 type \ud0a4\uc6cc\ub4dc \uad8c\uc7a5 (\ub7f0\ud0c0\uc784 \ucf54\ub4dc 0)\n\nadd(1, 2);\nconsole.log(PI);<\/code><\/pre>\n\n<h2>default vs named<\/h2>\n\n<pre><code>\/\/ utils.ts \u2014 default export\nexport default function format(x: unknown): string {\n  return String(x);\n}\n\n\/\/ \uc774\ub984\uc744 \ud638\ucd9c\uc790\uac00 \uc815\ud568\nimport format from \".\/utils\";     \/\/ \uc5b4\ub5a4 \uc774\ub984\uc774\ub4e0 \uac00\ub2a5\nimport fmt from \".\/utils\";        \/\/ \uac19\uc740 \ubaa8\ub4c8\n\n\/\/ named \u2014 \uc774\ub984 \uace0\uc815\nexport function parse(...) { ... }\nexport function serialize(...) { ... }\n\nimport { parse, serialize } from \".\/utils\";\nimport { parse as p } from \".\/utils\";    \/\/ \ubcc4\uce6d<\/code><\/pre>\n\n<div class=\"databox\">\n  <p><strong>default vs named \u2014 \ucee8\ubca4\uc158.<\/strong> \ubaa8\ub4c8\uc5d0 \ub2e8 \ud558\ub098\uc758 \uc8fc\ub41c export \ub9cc \uc788\uc73c\uba74 default(\uc608: React \ucef4\ud3ec\ub10c\ud2b8 \ud30c\uc77c). \uc5ec\ub7ec \ud568\uc218\u00b7\ud0c0\uc785\u00b7\uc0c1\uc218\uac00 \uac19\uc774 \uc788\ub294 \uc720\ud2f8 \ubaa8\ub4c8\uc740 named. <strong>\ud070 \ucf54\ub4dc\ubca0\uc774\uc2a4\ub294 named-only<\/strong> \uac00 \uc77c\uad00\uc131 \uc88b\ub2e4\ub294 \uc758\uacac\uc774 \ub9ce\uc2b5\ub2c8\ub2e4(\uc790\ub3d9\uc644\uc131\u00b7\uac80\uc0c9 \uce5c\ud654).<\/p>\n<\/div>\n\n<h2>import \ubaa8\ub4e0 \ubcc0\ud615<\/h2>\n\n<pre><code>import { a, b } from \".\/x\";          \/\/ named\nimport { a as alias } from \".\/x\";    \/\/ \ubcc4\uce6d\nimport x from \".\/x\";                 \/\/ default\nimport x, { a } from \".\/x\";          \/\/ default + named\nimport * as X from \".\/x\";            \/\/ \uc804\uccb4\ub97c namespace \ub85c\nimport \".\/x\";                        \/\/ side-effect \ub9cc (CSS\u00b7polyfill \ub4f1)\nimport type { T } from \".\/x\";        \/\/ \ud0c0\uc785\ub9cc (\ub7f0\ud0c0\uc784 0)\nimport { type T, fn } from \".\/x\";    \/\/ \ud63c\ud569 (5.0+)\n\n\/\/ \ub3d9\uc801 import \u2014 \ucf54\ub4dc \ubd84\ud560\nconst m = await import(\".\/x\");\nm.fn();<\/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=\"ESM\">import\/export<\/td><td data-label=\"CJS\">require \/ module.exports<\/td><\/tr>\n    <tr><td data-label=\"\">\ub85c\ub529<\/td><td data-label=\"ESM\">\uc815\uc801 \ubd84\uc11d (\ud2b8\ub9ac \uc170\uc774\ud0b9 \uac00\ub2a5)<\/td><td data-label=\"CJS\">\ub3d9\uc801 (\ub7f0\ud0c0\uc784)<\/td><\/tr>\n    <tr><td data-label=\"\">\uc0c1\uc704 await<\/td><td data-label=\"ESM\">\uac00\ub2a5<\/td><td data-label=\"CJS\">\ubd88\uac00<\/td><\/tr>\n    <tr><td data-label=\"\">\ud30c\uc77c \ud655\uc7a5\uc790<\/td><td data-label=\"ESM\">.mjs \ub610\ub294 package.json type:module<\/td><td data-label=\"CJS\">.cjs \ub610\ub294 type:commonjs (\uae30\ubcf8)<\/td><\/tr>\n    <tr><td data-label=\"\">\ube0c\ub77c\uc6b0\uc800<\/td><td data-label=\"ESM\">\ud45c\uc900 (script type=&#8221;module&#8221;)<\/td><td data-label=\"CJS\">\ubc88\ub4e4\ub7ec \ud544\uc694<\/td><\/tr>\n    <tr><td data-label=\"\">Node \ud638\ud658<\/td><td data-label=\"ESM\">22+ \uc548\uc815<\/td><td data-label=\"CJS\">\ub808\uac70\uc2dc \uad11\ubc94\uc704<\/td><\/tr>\n  <\/tbody>\n<\/table>\n<\/div>\n\n<div class=\"warnbox\">\n  <p><strong>\uac19\uc740 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ub458\uc774 \uc11e\uc774\uba74 \uc9c0\uc625.<\/strong> Node \uc5d0\uc11c ESM \uc774 CJS \ub97c default import \ud558\uba74 wrapping \ub429\ub2c8\ub2e4 \u2014 <code>import pkg from \"cjs-pkg\"<\/code>. esModuleInterop\u00b7allowSyntheticDefaultImports tsconfig \uc635\uc158\uc774 \uc774 \ud638\ud658\uc744 \uc815\ub9ac\ud574 \uc90d\ub2c8\ub2e4. \uc0c8 \ud504\ub85c\uc81d\ud2b8\ub294 \ucc98\uc74c\ubd80\ud130 ESM \uc73c\ub85c.<\/p>\n<\/div>\n\n<h2>tsconfig \u2014 module \u00b7 moduleResolution<\/h2>\n\n<pre><code>{\n  \"compilerOptions\": {\n    \"target\": \"ES2022\",\n    \"module\": \"ESNext\",                  \/\/ import\/export \uadf8\ub300\ub85c \uc720\uc9c0\n    \"moduleResolution\": \"Bundler\",       \/\/ \ucd5c\uc2e0 esbuild\/vite \uc640 \ud638\ud658\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"isolatedModules\": true,             \/\/ \ud30c\uc77c\ubcc4 \ubcc0\ud658 \ub3c4\uad6c \ud638\ud658\n    \"resolveJsonModule\": true            \/\/ import data from \".\/x.json\"\n  }\n}<\/code><\/pre>\n\n<p>2026\ub144 \ud45c\uc900 \uc870\ud569: <strong>module=ESNext + moduleResolution=Bundler<\/strong>. \uc774\uc804\uc5d4 <code>Node16<\/code>\u00b7<code>NodeNext<\/code> \uac00 \uad8c\uc7a5\uc774\uc5c8\ub294\ub370, \ubc88\ub4e4\ub7ec + \ud504\ub808\uc784\uc6cc\ud06c \uc2dc\ub300\uc5d0\ub294 Bundler \uac00 \uac00\uc7a5 \ubb34\ub09c.<\/p>\n\n<h2>paths \u2014 alias \ub85c \uae4a\uc740 \uacbd\ub85c \uc904\uc774\uae30<\/h2>\n\n<pre><code>\/\/ tsconfig.json\n{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@\/*\": [\"src\/*\"],\n      \"@components\/*\": [\"src\/components\/*\"]\n    }\n  }\n}\n\n\/\/ \uc0ac\uc6a9\nimport Header from \"@components\/Header\";   \/\/ ..\/..\/..\/components\/Header \ub300\uc2e0\nimport { db } from \"@\/lib\/db\";<\/code><\/pre>\n\n<div class=\"warnbox\">\n  <p><strong>\uc8fc\uc758.<\/strong> paths \ub294 TS \ucef4\ud30c\uc77c\ub7ec + \uc77c\ubd80 \ubc88\ub4e4\ub7ec\uc5d0\ub9cc \uc54c\ub824\uc9d1\ub2c8\ub2e4. \ub7f0\ud0c0\uc784 Node \uc5d0\uc11c \uadf8\ub300\ub85c \uc4f0\ub824\uba74 tsconfig-paths\u00b7tsc-alias\u00b7\ubc88\ub4e4\ub7ec(esbuild\/vite) \uac19\uc740 \ub3c4\uc6b0\ubbf8\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \ubaa8\ub974\uba74 \ucc98\uc74c\uc5d0\ub294 \uc548 \uc4f0\ub294 \uac8c \ub2e8\uc21c.<\/p>\n<\/div>\n\n<h2>.d.ts \u2014 \ud0c0\uc785\ub9cc \ub4e4\uc5b4\uc788\ub294 \ud30c\uc77c<\/h2>\n\n<pre><code>\/\/ types\/global.d.ts\ndeclare global {\n  interface Window {\n    myApp: { version: string };\n  }\n}\n\n\/\/ \uc678\ubd80 JS \ub77c\uc774\ube0c\ub7ec\ub9ac\uc5d0 \ud0c0\uc785 \uc785\ud788\uae30 (\uc5c6\uc744 \ub54c)\ndeclare module \"untyped-lib\" {\n  export function doStuff(x: string): number;\n}\n\n\/\/ \ubaa8\ub4c8 \uc5c6\uc774 \ub2e8\uc21c \ud0c0\uc785 \uc120\uc5b8\nexport type ApiResponse&lt;T&gt; = { ok: boolean; data: T };<\/code><\/pre>\n\n<p>tsconfig <code>typeRoots<\/code> \uc640 <code>types<\/code> \uc635\uc158, \uadf8\ub9ac\uace0 npm \uc758 <code>@types\/*<\/code> \ud328\ud0a4\uc9c0(DefinitelyTyped) \uac00 \ud070 \uc0dd\ud0dc\uacc4\uc785\ub2c8\ub2e4. 17\ud3b8(namespace \uc640 .d.ts) \uc5d0\uc11c \ub354 \uae4a\uac8c.<\/p>\n\n<h2>\uc2e4\uc804 \ud55c \uc904 \uac00\uc774\ub4dc<\/h2>\n\n<ul>\n  <li>\uc0c8 \ud504\ub85c\uc81d\ud2b8\ub294 ESM + module=ESNext + moduleResolution=Bundler.<\/li>\n  <li>\uc720\ud2f8 \ubaa8\ub4c8\uc740 named export, \ucef4\ud3ec\ub10c\ud2b8 \ud30c\uc77c\uc740 default 1\uac1c\uac00 \ud754\ud568.<\/li>\n  <li>\ud0c0\uc785\ub9cc \uac00\uc838\uc62c \ub550 <code>import type<\/code> \u2014 \ub7f0\ud0c0\uc784 \ucf54\ub4dc 0.<\/li>\n  <li>\uac19\uc740 \ud504\ub85c\uc81d\ud2b8\uc5d0 ESM\u00b7CJS \ud63c\uc6a9 \ud53c\ud558\uae30. CJS \ub77c\uc774\ube0c\ub7ec\ub9ac \uc4f8 \ub54c\ub9cc esModuleInterop.<\/li>\n  <li>paths \ub294 \uc9c4\uc9dc \ud544\uc694\ud560 \ub54c\ub9cc \u2014 \ub7f0\ud0c0\uc784 \ud638\ud658\uc131\ub3c4 \uac19\uc774 \ucc59\uaca8\uc57c \ud568.<\/li>\n<\/ul>\n\n<div class=\"cta\">\n  <h3>10\ud3b8 \u2014 tsconfig \ud575\uc2ec \uc635\uc158 10\uac00\uc9c0<\/h3>\n  <p>strict \uac00\uc871, target\/module, lib, include\/exclude \uc758 \uc2e4\uc804 \uc870\ud569.<\/p>\n<\/div>\n\n<div class=\"series-nav\">\n  <strong>\ud83d\udcda \uc27d\uac8c \ubc30\uc6b0\ub294 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8 \uad50\uc7ac<\/strong><br>\n  \uc774\uc804: 8\ud3b8 \ud074\ub798\uc2a4 \u00b7 \ud604\uc7ac: <strong>9\ud3b8 (\uae30\ucd08)<\/strong> \u00b7 \ub2e4\uc74c \u2192 10\ud3b8 tsconfig \u00b7 \uc9c4\ud589: <strong>9\/20<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>ESM vs CJS, default\u00b7named\u00b7paths, .d.ts. 20\ud3b8 \uad50\uc7ac 9\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":280,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-494","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typescript-basic"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/494","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=494"}],"version-history":[{"count":0,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/494\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/280"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}