{"id":507,"date":"2026-05-17T07:03:58","date_gmt":"2026-05-16T23:03:58","guid":{"rendered":"https:\/\/junai.ai\/blog\/ts-async-promise-15\/"},"modified":"2026-05-17T07:03:58","modified_gmt":"2026-05-16T23:03:58","slug":"ts-async-promise-15","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/ts-async-promise-15\/","title":{"rendered":"\ube44\ub3d9\uae30 + Promise \u2014 async \ubc18\ud658 \ud0c0\uc785 (\uc911\uae09 15\ud3b8)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 298 -->\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 15\ud3b8 \/ 20\ud3b8<\/span>\n  <h1>\ube44\ub3d9\uae30 + Promise&lt;T&gt; \u2014 async \ubc18\ud658 \ud0c0\uc785<\/h1>\n  <p class=\"sub\">async\/await \uac00 \ud0c0\uc785\uacfc \uc5b4\ub5bb\uac8c \uc5b4\uc6b8\ub9ac\ub294\uc9c0. fetch \uacb0\uacfc \uc548\uc804\ud558\uac8c \ubc1b\uae30.<\/p>\n  <div class=\"meta\"><span>\uc911\uae09<\/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-77.jpg\" alt=\"Promise<T> \uac00 \ud480\ub824\uc11c T \uac00 \ub418\ub294 \ud750\ub984\uacfc await \uc758 \uc5ed\ud560 \ub3c4\uc2dd&#8221;>\n<\/header>\n\n<div class=\"container\">\n<article>\n\n<p>JS \uc758 \ube44\ub3d9\uae30(15\ud3b8) \uc704\uc5d0 TS \uac00 \ub354\ud558\ub294 \ud55c \uac00\uc9c0 \u2014 <strong>&#8220;\uc774 \ube44\ub3d9\uae30\uac00 \ubc18\ud658\ud558\ub294 \uac12\uc758 \ud0c0\uc785&#8221;<\/strong>. <code>Promise&lt;User&gt;<\/code> \uac19\uc740 \ud45c\uae30\ub85c \ucef4\ud30c\uc77c \uc2dc\uc810\uc5d0 \uacb0\uacfc \ubaa8\uc591\uc774 \ubcf4\uc7a5\ub429\ub2c8\ub2e4. 15\ud3b8\uc740 async \ubc18\ud658 \ud0c0\uc785, fetch \uacb0\uacfc \ud0c0\uc774\ud551, catch \uc758 unknown \uae4c\uc9c0.<\/p>\n\n<h2>Promise&lt;T&gt; \u2014 \ubbf8\ub798\uc758 \uac12 \ud0c0\uc785<\/h2>\n\n<pre><code>\/\/ Promise \uc9c1\uc811 \ub9cc\ub4e4\uae30 \u2014 \uac70\uc758 \uc548 \uc500 (\ub77c\uc774\ube0c\ub7ec\ub9ac \ub0b4\ubd80\uc6a9)\nconst p: Promise&lt;number&gt; = new Promise((resolve, reject) =&gt; {\n  setTimeout(() =&gt; resolve(42), 100);\n});\n\np.then(v =&gt; v + 1);   \/\/ v: number\n\n\/\/ \uc2e4\uc804 \u2014 \ub300\ubd80\ubd84 async \ud568\uc218\uac00 \uc790\ub3d9\uc73c\ub85c Promise \ubc18\ud658\nasync function getNumber(): Promise&lt;number&gt; {\n  return 42;\n}\n\/\/        ^ \ubc18\ud658 \ud0c0\uc785\uc740 Promise&lt;number&gt;\n\/\/          \ubcf8\ubb38\uc5d0\uc11c return 42 (number) \ud558\uc9c0\ub9cc \uc790\ub3d9 wrap<\/code><\/pre>\n\n<h2>async \ud568\uc218 \u2014 \ubc18\ud658 \ud0c0\uc785\uc758 \uaddc\uce59<\/h2>\n\n<pre><code>\/\/ \uba85\uc2dc\nasync function loadUser(id: number): Promise&lt;User&gt; {\n  const res = await fetch(`\/api\/users\/${id}`);\n  return res.json();\n}\n\n\/\/ \ucd94\ub860\uc5d0 \ub9e1\uae40 (\uad8c\uc7a5 \u2014 \ub77c\uc774\ube0c\ub7ec\ub9ac export \ub9cc \uba85\uc2dc)\nasync function loadUser(id: number) {\n  const res = await fetch(`\/api\/users\/${id}`);\n  return res.json() as Promise&lt;User&gt;;\n}\n\/\/        ^? Promise&lt;User&gt;\n\n\/\/ \uc5d0\ub7ec \ucf00\uc774\uc2a4 \u2014 null \uac00\ub2a5\uc131\nasync function findUser(id: number): Promise&lt;User | null&gt; {\n  const u = await db.findOne({ id });\n  return u ?? null;\n}<\/code><\/pre>\n\n<h2>await \u2014 Promise \ub97c \ud480\uc5b4\uc8fc\uae30<\/h2>\n\n<pre><code>\/\/ await \uc758 \ud0c0\uc785\uc740 Awaited&lt;T&gt;\nconst u: User = await loadUser(1);\n\/\/        ^ Promise&lt;User&gt; \uc758 await \u2192 User\n\n\/\/ \uc911\ucca9 Promise \ub3c4 \uc790\ub3d9\uc73c\ub85c \ud55c \ubc88\uc5d0\nasync function nested(): Promise&lt;Promise&lt;number&gt;&gt; {\n  return Promise.resolve(Promise.resolve(42));\n}\nconst n = await nested();   \/\/ n: number (\uc774\uc911 Promise \uc790\ub3d9 \ud3c9\ud0c4\ud654)<\/code><\/pre>\n\n<div class=\"databox\">\n  <p><strong>await \uc758 \ud55c \uc904 \uc758\ubbf8.<\/strong> &#8220;\uc774 Promise \uac00 \ud480\ub9b4 \ub54c\uae4c\uc9c0 \uae30\ub2e4\ub9b0 \ub2e4\uc74c \uac12\uc744 \uaebc\ub0b8\ub2e4&#8221;. \ubc18\ud658 \ud0c0\uc785\uc5d0 <code>Promise<\/code> \uac00 \ubcf4\uc774\uba74 await \ud574\uc11c \ud480\uc5b4\uc57c \ud568. \uc548 \ud480\uace0 <code>.toFixed()<\/code> \uac19\uc740 \uac70 \ud638\ucd9c\ud558\uba74 \ucef4\ud30c\uc77c \uc5d0\ub7ec.<\/p>\n<\/div>\n\n<h2>fetch \uacb0\uacfc \ud0c0\uc774\ud551 \u2014 \uc678\ubd80 \uc785\ub825 \uc548\uc804\ud558\uac8c<\/h2>\n\n<pre><code>\/\/ fetch \uc758 res.json() \uc740 Promise&lt;any&gt; \u2014 \uc704\ud5d8!\nasync function loadUserUnsafe(id: number): Promise&lt;User&gt; {\n  const res = await fetch(`\/api\/users\/${id}`);\n  return res.json();   \/\/ any \uac00 \uc790\ub3d9\uc73c\ub85c User \ub85c \u2014 \uac80\uc99d \uc5c6\uc774\n}\n\n\/\/ \uc548\uc804 \ud328\ud134 1 \u2014 \uc0ac\uc6a9\uc790 \uc815\uc758 \ud0c0\uc785 \uac00\ub4dc\nasync function loadUserGuard(id: number): Promise&lt;User&gt; {\n  const res = await fetch(`\/api\/users\/${id}`);\n  const raw: unknown = await res.json();\n  if (!isUser(raw)) throw new Error(\"\ud615\uc2dd \uc774\uc0c1\");\n  return raw;\n}\n\n\/\/ \uc548\uc804 \ud328\ud134 2 \u2014 zod (\uc2e4\uc804 \ud45c\uc900)\nimport { z } from \"zod\";\nconst UserSchema = z.object({\n  id: z.number(),\n  name: z.string(),\n});\ntype User = z.infer&lt;typeof UserSchema&gt;;\n\nasync function loadUser(id: number): Promise&lt;User&gt; {\n  const res = await fetch(`\/api\/users\/${id}`);\n  const raw = await res.json();\n  return UserSchema.parse(raw);   \/\/ throw if invalid\n}<\/code><\/pre>\n\n<h2>Promise.all \u00b7 allSettled \u00b7 race \u00b7 any<\/h2>\n\n<pre><code>\/\/ \ubaa8\ub450 \uc131\uacf5\ud574\uc57c \u2014 \ud558\ub098 \uc2e4\ud328\ud558\uba74 \uc989\uc2dc reject\nconst [users, posts] = await Promise.all([\n  fetch(\"\/users\").then(r =&gt; r.json()),\n  fetch(\"\/posts\").then(r =&gt; r.json()),\n]);\n\/\/ \ud0c0\uc785: [any, any] \u2014 \uc704 \uc548\uc804 \ud328\ud134 \uc801\uc6a9\ud574 \uc881\ud788\uae30\n\n\/\/ \ubaa8\ub450 \ub05d\ub0a0 \ub54c\uae4c\uc9c0 (\uc2e4\ud328\ub3c4 \ubc1b\uc74c)\nconst results = await Promise.allSettled([p1, p2, p3]);\nfor (const r of results) {\n  if (r.status === \"fulfilled\") console.log(r.value);\n  else console.error(r.reason);\n}\n\n\/\/ \uac00\uc7a5 \uba3c\uc800 settle \ub41c \uac70 (\uc131\uacf5\/\uc2e4\ud328 \ubb34\uad00)\nconst winner = await Promise.race([p1, p2]);\n\n\/\/ \uac00\uc7a5 \uba3c\uc800 \uc131\uacf5 (\uc2e4\ud328\ub294 \ubb34\uc2dc)\nconst first = await Promise.any([p1, p2]);<\/code><\/pre>\n\n<div class=\"tablewrap\">\n<table>\n  <thead>\n    <tr><th>\uba54\uc11c\ub4dc<\/th><th>\uc5b8\uc81c<\/th><th>\uc2e4\ud328 \ucc98\ub9ac<\/th><\/tr>\n  <\/thead>\n  <tbody>\n    <tr><td data-label=\"\">all<\/td><td data-label=\"\">\ubaa8\ub450 \uacb0\uacfc \ud544\uc694<\/td><td data-label=\"\">\ud558\ub098 \uc2e4\ud328 \u2192 \uc804\uccb4 \uc2e4\ud328<\/td><\/tr>\n    <tr><td data-label=\"\">allSettled<\/td><td data-label=\"\">\uacb0\uacfc\u00b7\uc2e4\ud328 \ubaa8\ub450 \ud655\uc778<\/td><td data-label=\"\">\uac1c\ubcc4 reason<\/td><\/tr>\n    <tr><td data-label=\"\">race<\/td><td data-label=\"\">\uac00\uc7a5 \ube60\ub978 \uc751\ub2f5\u00b7\ud0c0\uc784\uc544\uc6c3<\/td><td data-label=\"\">\uba3c\uc800 \uc2e4\ud328\ud574\ub3c4 \uacb0\uacfc<\/td><\/tr>\n    <tr><td data-label=\"\">any<\/td><td data-label=\"\">\ud558\ub098\ub9cc \uc131\uacf5\ud558\uba74 OK (fallback)<\/td><td data-label=\"\">\ubaa8\ub450 \uc2e4\ud328 \u2192 AggregateError<\/td><\/tr>\n  <\/tbody>\n<\/table>\n<\/div>\n\n<h2>catch \uc5d0\uc11c unknown<\/h2>\n\n<pre><code>try {\n  await loadUser(1);\n} catch (err) {\n  \/\/ \uae30\ubcf8 \u2014 err: unknown (strict \uc758 useUnknownInCatchVariables)\n  if (err instanceof Error) {\n    console.error(err.message);\n  } else {\n    console.error(\"\uc774\uc0c1\ud55c \uac83:\", err);\n  }\n}\n\n\/\/ \ud5ec\ud37c\ub85c \uae54\ub054\ud558\uac8c\nfunction isError(x: unknown): x is Error {\n  return x instanceof Error;\n}\nfunction getMsg(x: unknown): string {\n  return isError(x) ? x.message : String(x);\n}<\/code><\/pre>\n\n<h2>\ube44\ub3d9\uae30 + \uc81c\ub124\ub9ad \u2014 API \ud074\ub77c\uc774\uc5b8\ud2b8 \ud328\ud134<\/h2>\n\n<pre><code>async function api&lt;T&gt;(url: string, schema: z.ZodSchema&lt;T&gt;): Promise&lt;T&gt; {\n  const res = await fetch(url);\n  if (!res.ok) throw new Error(`HTTP ${res.status}`);\n  const raw = await res.json();\n  return schema.parse(raw);\n}\n\n\/\/ \uc0ac\uc6a9 \u2014 \ud55c \ud568\uc218\ub85c \ubaa8\ub4e0 \uc5d4\ub4dc\ud3ec\uc778\ud2b8\nconst user = await api(\"\/api\/users\/1\", UserSchema);    \/\/ user: User\nconst posts = await api(\"\/api\/posts\",   z.array(PostSchema));  \/\/ posts: Post[]<\/code><\/pre>\n\n<h2>\ud0c0\uc784\uc544\uc6c3 \ud328\ud134 \u2014 race \ud65c\uc6a9<\/h2>\n\n<pre><code>function withTimeout&lt;T&gt;(promise: Promise&lt;T&gt;, ms: number): Promise&lt;T&gt; {\n  return Promise.race([\n    promise,\n    new Promise&lt;T&gt;((_, reject) =&gt;\n      setTimeout(() =&gt; reject(new Error(\"Timeout\")), ms)\n    ),\n  ]);\n}\n\nconst user = await withTimeout(loadUser(1), 5000);\n\n\/\/ ES2024 \ud45c\uc900 \u2014 AbortSignal.timeout\nconst res = await fetch(url, { signal: AbortSignal.timeout(5000) });<\/code><\/pre>\n\n<div class=\"warnbox\">\n  <p><strong>async \uc5d0\uc11c \ub358\uc9c4 \uc5d0\ub7ec\ub294 \uc790\ub3d9\uc73c\ub85c reject.<\/strong> async \ud568\uc218 \uc548\uc5d0\uc11c <code>throw new Error()<\/code> \ud558\uba74 \ud638\ucd9c\uc790\uc758 <code>await<\/code> \uc5d0\uc11c throw \ub429\ub2c8\ub2e4. \uc77c\ubc18 \ud568\uc218\ucc98\ub7fc try\/catch \ub85c \ubc1b\uc73c\uba74 \ub05d.<\/p>\n<\/div>\n\n<div class=\"cta\">\n  <h3>16\ud3b8 \u2014 \ub370\ucf54\ub808\uc774\ud130 (\uace0\uae09 \uc2dc\uc791)<\/h3>\n  <p>class\u00b7method\u00b7property \ub370\ucf54\ub808\uc774\ud130, \uba54\ud0c0 \uc815\ubcf4\uc758 \uba54\ud0c0 \ub3c4\uad6c.<\/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: 14\ud3b8 \ud0c0\uc785 \uac00\ub4dc \u00b7 \ud604\uc7ac: <strong>15\ud3b8 (\uc911\uae09 \ub9c8\uc9c0\ub9c9)<\/strong> \u00b7 \ub2e4\uc74c \u2192 16\ud3b8 \ub370\ucf54\ub808\uc774\ud130 (\uace0\uae09 \uc2dc\uc791) \u00b7 \uc9c4\ud589: <strong>15\/20<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Promise\u00b7async \ud0c0\uc785\u00b7fetch \ud0c0\uc774\ud551\u00b7unknown catch. 20\ud3b8 \uad50\uc7ac 15\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":298,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-507","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\/507","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=507"}],"version-history":[{"count":0,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/507\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/298"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}