{"id":490,"date":"2026-05-17T07:02:19","date_gmt":"2026-05-16T23:02:19","guid":{"rendered":"https:\/\/junai.ai\/blog\/ts-enum-7\/"},"modified":"2026-05-17T07:02:19","modified_gmt":"2026-05-16T23:02:19","slug":"ts-enum-7","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/ts-enum-7\/","title":{"rendered":"enum \uacfc const enum \u2014 \uc4f8\uc9c0 \ub9d0\uc9c0 (\uae30\ucd08 7\ud3b8)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 273 -->\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 7\ud3b8 \/ 20\ud3b8<\/span>\n  <h1>enum \uacfc const enum \u2014 \uc4f8\uc9c0 \ub9d0\uc9c0<\/h1>\n  <p class=\"sub\">enum \uc758 \ubaa8\uc591\uacfc \ud568\uc815, \uadf8\ub9ac\uace0 \uac70\uc758 \ubaa8\ub4e0 \uacbd\uc6b0 union literal \uc774 \uc815\ub2f5\uc778 \uc774\uc720.<\/p>\n  <div class=\"meta\"><span>\uae30\ucd08<\/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-53.jpg\" alt=\"enum vs union literal \uc758 \uc0ac\uc6a9 \ube44\uad50\uac00 \uce74\ub4dc \ud615\ud0dc\ub85c \uc815\ub9ac\ub41c \uc77c\ub7ec\uc2a4\ud2b8\">\n<\/header>\n\n<div class=\"container\">\n<article>\n\n<p>TypeScript \uc758 <code>enum<\/code> \uc740 \ub2e4\ub978 \uc5b8\uc5b4\uc758 enum \uacfc \ube44\uc2b7\ud55c \uc774\ub984\uc758 \ub2e4\ub978 \uac83 \u2014 JS \uc5d0\ub294 enum \uc774 \uc5c6\uc73c\ubbc0\ub85c TS \uac00 \ucef4\ud30c\uc77c \uc2dc \uac1d\uccb4\ub85c \ub9cc\ub4e4\uc5b4\ub0c5\ub2c8\ub2e4. \ud3b8\ub9ac\ud558\uc9c0\ub9cc \uc758\uc678\uc131\uc774 \uc788\uc5b4, <strong>&#8220;enum \ubcf4\ub2e4 union literal \uc774 \uac70\uc758 \ud56d\uc0c1 \ub0ab\ub2e4&#8221;<\/strong> \ub294 \uac8c 2026\ub144\uc758 \ucee8\uc13c\uc11c\uc2a4\uc785\ub2c8\ub2e4. 7\ud3b8\uc740 \uadf8 \uacb0\ub860\uc5d0 \ub3c4\ub2ec\ud558\ub294 \uacfc\uc815\uc744 \uc815\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n\n<h2>enum \uae30\ubcf8\ud615 \u2014 numeric \u00b7 string<\/h2>\n\n<pre><code>\/\/ numeric enum (\uae30\ubcf8 0\ubd80\ud130 \uc99d\uac00)\nenum Direction {\n  Up,        \/\/ 0\n  Down,      \/\/ 1\n  Left,      \/\/ 2\n  Right,     \/\/ 3\n}\n\nDirection.Up;            \/\/ 0\nDirection[0];            \/\/ \"Up\"  \u2190 \uc591\ubc29\ud5a5 \ub9e4\ud551\n\n\/\/ string enum (\uad8c\uc7a5 \u2014 \uac12\uc774 \uba85\uc2dc\uc801)\nenum Theme {\n  Light = \"light\",\n  Dark  = \"dark\",\n  Auto  = \"auto\",\n}\n\nTheme.Light;             \/\/ \"light\"\nTheme[\"Light\"];          \/\/ \"light\" (string enum \uc740 \ub2e8\ubc29\ud5a5)<\/code><\/pre>\n\n<h2>enum \uc758 \ucef4\ud30c\uc77c \uacb0\uacfc \u2014 \ub7f0\ud0c0\uc784 \ucf54\ub4dc \uc0dd\uc131<\/h2>\n\n<pre><code>\/\/ TS\nenum Theme { Light = \"light\", Dark = \"dark\" }\n\n\/\/ \ucef4\ud30c\uc77c \uacb0\uacfc (JS)\nvar Theme;\n(function (Theme) {\n  Theme[\"Light\"] = \"light\";\n  Theme[\"Dark\"] = \"dark\";\n})(Theme || (Theme = {}));<\/code><\/pre>\n\n<p>\uc774\uac8c enum \uc758 \uac00\uc7a5 \ud070 \ud2b9\uc774\uc810\uc785\ub2c8\ub2e4. <strong>\ud0c0\uc785\ub9cc\uc774 \uc544\ub2c8\ub77c \uc2e4\uc81c \uac1d\uccb4\uac00 \ub7f0\ud0c0\uc784\uc5d0 \ub9cc\ub4e4\uc5b4\uc9d1\ub2c8\ub2e4.<\/strong> \ubaa8\ub4e0 \ub2e4\ub978 TS \ud0c0\uc785 \ud45c\uae30\ub294 \ucef4\ud30c\uc77c \uc2dc \uc0ac\ub77c\uc9c0\ub294\ub370 enum \ub9cc \ub2e4\ub985\ub2c8\ub2e4.<\/p>\n\n<h2>const enum \u2014 \uc778\ub77c\uc778\ub418\uc5b4 \ub7f0\ud0c0\uc784 \ucf54\ub4dc \uc5c6\uc74c<\/h2>\n\n<pre><code>const enum Theme { Light = \"light\", Dark = \"dark\" }\n\nconst t = Theme.Light;\n\/\/ \ucef4\ud30c\uc77c \uacb0\uacfc: const t = \"light\";  \u2190 Theme \uac1d\uccb4 \uc790\uccb4\uac00 \uc0ac\ub77c\uc9d0<\/code><\/pre>\n\n<div class=\"warnbox\">\n  <p><strong>const enum \uc758 \ud568\uc815.<\/strong> \u2460 babel\u00b7esbuild\u00b7swc \ub4f1 \uc77c\ubd80 \ube4c\ub4dc \ub3c4\uad6c\ub294 const enum \uc744 \uc9c0\uc6d0 \uc548 \ud568(\ucef4\ud30c\uc77c \uc2dc \ud0c0\uc785 \uc815\ubcf4\uac00 \ud544\uc694\ud55c\ub370 \uadf8\ub4e4\uc740 \ud30c\uc77c\ubcc4 \ubcc0\ud658). \u2461 <code>isolatedModules<\/code> \uc635\uc158 \ucf1c\uba74 \uc0ac\uc6a9 \ubd88\uac00. \u2462 d.ts \ub85c \ub178\ucd9c\ub41c const enum \uc740 \uc0ac\uc6a9\ucc98\uc5d0\uc11c \uc778\ub77c\uc778\uc774 \uae68\uc9c8 \uc218 \uc788\uc74c. \uacb0\ub860: <strong>\ub300\ubd80\ubd84 \uc548 \uc4f0\ub294 \uac8c \ub0ab\ub2e4.<\/strong><\/p>\n<\/div>\n\n<h2>\uc65c union literal \uc774 \ub354 \ub098\uc740\uac00<\/h2>\n\n<pre><code>\/\/ enum\nenum Status { Pending, Paid, Shipped, Done }\nfunction ship(s: Status) { ... }\nship(Status.Pending);         \/\/ 0 \uc73c\ub85c \ucef4\ud30c\uc77c (\uc758\ubbf8 \uc0ac\ub77c\uc9d0)\nship(99);                     \/\/ \u274c \ub9c9\ud798 (\ub2e4\ud589)\n\n\/\/ union literal\ntype Status = \"pending\" | \"paid\" | \"shipped\" | \"done\";\nfunction ship(s: Status) { ... }\nship(\"pending\");              \/\/ \"pending\" \uadf8\ub300\ub85c \u2014 JSON \ud638\ud658\nship(\"hello\");                \/\/ \u274c \ucef4\ud30c\uc77c \ucc28\ub2e8\n\n\/\/ JSON \uc2dc\ub9ac\uc5bc\ub77c\uc774\uc988 \/ \ub514\ubc84\uae45\nJSON.stringify({status: Status.Pending});  \/\/ {\"status\":0}  \u2190 \uc758\ubbf8 \uc5c6\uc74c\nJSON.stringify({status: \"pending\"});       \/\/ {\"status\":\"pending\"}  \u2190 \uc77d\ud798<\/code><\/pre>\n\n<p>union literal \uc758 \uc7a5\uc810:<\/p>\n\n<ul>\n  <li><strong>\ub7f0\ud0c0\uc784 \ucf54\ub4dc 0<\/strong> \u2014 \ucef4\ud30c\uc77c \uc2dc \ubaa8\ub450 \uc0ac\ub77c\uc9d0<\/li>\n  <li><strong>JSON\u00b7API \uc640 \uc790\uc5f0 \ud638\ud658<\/strong> \u2014 \uc11c\ubc84\uac00 &#8220;pending&#8221; \ubcf4\ub0b4\uba74 \uadf8\ub300\ub85c<\/li>\n  <li><strong>\uad6c\ubd84 \uac00\ub2a5 \uc720\ub2c8\uc628<\/strong>(5\ud3b8) \uc73c\ub85c \uc790\uc5f0\uc2a4\ub7fd\uac8c \ud655\uc7a5<\/li>\n  <li><strong>switch exhaustive \uac80\uc0ac<\/strong> (20\ud3b8 \ud328\ud134) \ub354 \ub2e8\uc21c<\/li>\n<\/ul>\n\n<h2>enum \uc774 \uc815\ub2f9\ud55c \uacbd\uc6b0 \u2014 3\uac00\uc9c0\ub9cc<\/h2>\n\n<ol>\n  <li><strong>\ube44\ud2b8 \ud50c\ub798\uadf8 (numeric enum \uc758 OR \uc5f0\uc0b0)<\/strong> \u2014 \uad8c\ud55c \ube44\ud2b8\ub9c8\uc2a4\ud06c \ub4f1.\n    <pre><code>enum Perm { Read = 1, Write = 2, Exec = 4 }\nconst me = Perm.Read | Perm.Write;<\/code><\/pre>\n  <\/li>\n  <li><strong>\uc678\ubd80 API \uac00 \uc815\uc218 \ucf54\ub4dc\ub9cc \ubc1b\uc74c<\/strong> \u2014 gRPC enum, \ub808\uac70\uc2dc \uc2dc\uc2a4\ud15c \ub4f1. JS \ucf54\ub4dc\uc5d0 \ub9e4\uc9c1 \ub118\ubc84 \ubc15\uc9c0 \uc54a\uc73c\ub824\uace0.<\/li>\n  <li><strong>\uc5ed\ubc29\ud5a5 \ub9e4\ud551\uc774 \uc815\ub9d0 \ud544\uc694<\/strong> \u2014 \uc22b\uc790 \u2192 \uc774\ub984 (\uc608: \ub85c\uadf8 \ucd9c\ub825\uc6a9).<\/li>\n<\/ol>\n\n<p>\uadf8 \uc678 99% \uc758 \uc0c1\ud0dc\uac12\u00b7\ud14c\ub9c8\u00b7HTTP \ucf54\ub4dc\ub294 <strong>union literal<\/strong> \uc774 \ub2f5\uc785\ub2c8\ub2e4.<\/p>\n\n<h2>\ub9c8\uc774\uadf8\ub808\uc774\uc158 \ud328\ud134 \u2014 enum \u2192 union<\/h2>\n\n<pre><code>\/\/ before\nenum Status { Pending = \"pending\", Paid = \"paid\", Done = \"done\" }\n\n\/\/ after \u2014 \uac19\uc740 \ucf54\ub4dc, \ub354 \uac00\ubcbc\uc6c0\nconst STATUS = [\"pending\", \"paid\", \"done\"] as const;\ntype Status = typeof STATUS[number];   \/\/ \"pending\" | \"paid\" | \"done\"\n\n\/\/ \uc0ac\uc6a9\ucc98 \ubcc0\uacbd\nship(\"pending\");                       \/\/ \uadf8\ub300\ub85c OK\nSTATUS.includes(input);                \/\/ runtime \uac80\uc99d\ub3c4 \uac00\ub2a5<\/code><\/pre>\n\n<div class=\"databox\">\n  <p><strong>\ud55c \uc904 \uacb0\ub860.<\/strong> \uc0c8 \ucf54\ub4dc\ub294 <strong>union literal + as const<\/strong>. enum \uc740 (1) \ube44\ud2b8 \ud50c\ub798\uadf8, (2) \uc815\uc218 \uc678\ubd80 API, (3) \uba85\uc2dc\uc801 \uc5ed\ubc29\ud5a5 \ub9e4\ud551\uc774 \ud544\uc694\ud560 \ub54c\ub9cc. const enum \uc740 \uac70\uc758 \uc548 \uc500.<\/p>\n<\/div>\n\n<div class=\"cta\">\n  <h3>8\ud3b8 \u2014 \ud074\ub798\uc2a4 + \uc811\uadfc \uc81c\uc5b4\uc790<\/h3>\n  <p>class \uc5d0 \ud0c0\uc785 \ubd99\uc774\uae30, public\u00b7private\u00b7protected, implements, abstract \uae4c\uc9c0.<\/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: 6\ud3b8 \uc81c\ub124\ub9ad \u00b7 \ud604\uc7ac: <strong>7\ud3b8 (\uae30\ucd08)<\/strong> \u00b7 \ub2e4\uc74c \u2192 8\ud3b8 \ud074\ub798\uc2a4 \u00b7 \uc9c4\ud589: <strong>7\/20<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>enum\u00b7const enum\u00b7union literal \ube44\uad50. \uc5b8\uc81c enum, \uc5b8\uc81c union. 20\ud3b8 \uad50\uc7ac 7\ud3b8.<\/p>\n","protected":false},"author":1,"featured_media":273,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-490","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\/490","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=490"}],"version-history":[{"count":0,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/490\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/273"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}