{"id":509,"date":"2026-05-17T07:04:06","date_gmt":"2026-05-16T23:04:06","guid":{"rendered":"https:\/\/junai.ai\/blog\/ts-decorators-16\/"},"modified":"2026-05-17T07:04:06","modified_gmt":"2026-05-16T23:04:06","slug":"ts-decorators-16","status":"publish","type":"post","link":"https:\/\/junai.ai\/blog\/ts-decorators-16\/","title":{"rendered":"\ub370\ucf54\ub808\uc774\ud130 \u2014 class\u00b7method\u00b7property (\uace0\uae09 16\ud3b8)"},"content":{"rendered":"\n<!-- WordPress REST API \ubc1c\ud589\uc6a9 HTML (\uc790\ub3d9 \uc0dd\uc131) -->\n<!-- WP-FEATURED-MEDIA-ID: 301 -->\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 16\ud3b8 \/ 20\ud3b8<\/span>\n  <h1>\ub370\ucf54\ub808\uc774\ud130 \u2014 class\u00b7method\u00b7property<\/h1>\n  <p class=\"sub\">\ud568\uc218\ub97c \ud074\ub798\uc2a4 \uc815\uc758\uc5d0 \uc9c1\uc811 \ubd99\uc774\ub294 \uba54\ud0c0 \ub3c4\uad6c. ES2024 \ud45c\uc900\uacfc legacy \ucc28\uc774.<\/p>\n  <div class=\"meta\"><span>\uace0\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-80.jpg\" alt=\"@decorator \uac00 \ud074\ub798\uc2a4 \uba54\uc11c\ub4dc \uc704\uc5d0 \uc801\uc6a9\ub418\ub294 \ub3c4\uc2dd\">\n<\/header>\n\n<div class=\"container\">\n<article>\n\n<p>\uace0\uae09 \ud30c\ud2b8 \uc2dc\uc791. \ub370\ucf54\ub808\uc774\ud130\ub294 \ud074\ub798\uc2a4\u00b7\uba54\uc11c\ub4dc\u00b7\uc18d\uc131 \uc704\uc5d0 <code>@name<\/code> \ud55c \uc904\ub85c \ud568\uc218\ub97c \uc801\uc6a9\ud574 \ucd94\uac00 \ub3d9\uc791\uc744 \uc785\ud788\ub294 \ub3c4\uad6c. Angular\u00b7NestJS\u00b7TypeORM \ub4f1 OOP \uc0c9\uc774 \uc9c4\ud55c \ud504\ub808\uc784\uc6cc\ud06c\uc5d0\uc11c \uad11\ubc94\uc704\ud558\uac8c \uc0ac\uc6a9. 16\ud3b8\uc740 ES2024 \ud45c\uc900\uacfc \uc61b legacy \ud615\ud0dc\uc758 \ucc28\uc774, \uadf8\ub9ac\uace0 4\uac00\uc9c0 \ub370\ucf54\ub808\uc774\ud130 \uc885\ub958\uae4c\uc9c0.<\/p>\n\n<h2>ES2024 \ud45c\uc900 vs Legacy<\/h2>\n\n<div class=\"tablewrap\">\n<table>\n  <thead>\n    <tr><th><\/th><th>Legacy (\uc61b)<\/th><th>ES2024 \ud45c\uc900 (\ud604\uc7ac)<\/th><\/tr>\n  <\/thead>\n  <tbody>\n    <tr><td data-label=\"\">tsconfig<\/td><td data-label=\"\">experimentalDecorators: true<\/td><td data-label=\"\">5.0+ \uae30\ubcf8 \ud65c\uc131<\/td><\/tr>\n    <tr><td data-label=\"\">@types<\/td><td data-label=\"\">reflect-metadata \ud544\uc694<\/td><td data-label=\"\">\uc5c6\uc5b4\ub3c4 \ub428<\/td><\/tr>\n    <tr><td data-label=\"\">\ub9e4\uac1c\ubcc0\uc218 \ub370\ucf54<\/td><td data-label=\"\">\uc9c0\uc6d0<\/td><td data-label=\"\">\ubbf8\uc9c0\uc6d0 (\uc81c\uc548 \ub2e8\uacc4)<\/td><\/tr>\n    <tr><td data-label=\"\">\uc2dc\uadf8\ub2c8\ucc98<\/td><td data-label=\"\">(target, key, descriptor)<\/td><td data-label=\"\">(value, context)<\/td><\/tr>\n  <\/tbody>\n<\/table>\n<\/div>\n\n<div class=\"databox\">\n  <p><strong>\ud604\uc7ac \uc0c1\ud0dc.<\/strong> TS 5.0+ \ub294 ES2024 \ud45c\uc900\uc774 \uae30\ubcf8. Angular\u00b7NestJS\u00b7TypeORM \uac19\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub4e4\uc740 \uc544\uc9c1 legacy \uc0ac\uc6a9 \u2014 <code>experimentalDecorators: true<\/code> + reflect-metadata. \ubcf8 \ud3b8\uc740 ES2024 \ud45c\uc900 \uc704\uc8fc.<\/p>\n<\/div>\n\n<h2>class \ub370\ucf54\ub808\uc774\ud130<\/h2>\n\n<pre><code>\/\/ ES2024 \ud45c\uc900\nfunction logCreation&lt;T extends new (...args: any[]) =&gt; any&gt;(\n  Target: T,\n  context: ClassDecoratorContext\n) {\n  return class extends Target {\n    constructor(...args: any[]) {\n      super(...args);\n      console.log(`[${context.name}] \uc778\uc2a4\ud134\uc2a4 \uc0dd\uc131`);\n    }\n  };\n}\n\n@logCreation\nclass User {\n  constructor(public name: string) {}\n}\n\nnew User(\"\uc900\uc131\");   \/\/ \"[User] \uc778\uc2a4\ud134\uc2a4 \uc0dd\uc131\"<\/code><\/pre>\n\n<h2>method \ub370\ucf54\ub808\uc774\ud130<\/h2>\n\n<pre><code>function logCall(\n  method: Function,\n  context: ClassMethodDecoratorContext\n) {\n  return function (this: any, ...args: any[]) {\n    console.log(`${String(context.name)} \ud638\ucd9c`, args);\n    return method.apply(this, args);\n  };\n}\n\nclass Calc {\n  @logCall\n  add(a: number, b: number) {\n    return a + b;\n  }\n}\n\nnew Calc().add(1, 2);   \/\/ \"add \ud638\ucd9c [1, 2]\" \ucd9c\ub825 \ud6c4 3<\/code><\/pre>\n\n<h2>accessor (getter\/setter) \ub370\ucf54\ub808\uc774\ud130<\/h2>\n\n<pre><code>function notNull(\n  value: { get: () =&gt; any; set: (v: any) =&gt; void },\n  context: ClassAccessorDecoratorContext\n) {\n  return {\n    get: value.get,\n    set(this: any, newValue: any) {\n      if (newValue == null) throw new Error(`${String(context.name)} \uc740 null \ubd88\uac00`);\n      value.set.call(this, newValue);\n    },\n    init(initialValue: any) {\n      if (initialValue == null) throw new Error(`${String(context.name)} \ucd08\uae30\uac12 null`);\n      return initialValue;\n    },\n  };\n}\n\nclass User {\n  @notNull\n  accessor name: string = \"\";\n}<\/code><\/pre>\n\n<h2>property \ub370\ucf54\ub808\uc774\ud130 (field)<\/h2>\n\n<pre><code>function defaultValue&lt;T&gt;(value: T) {\n  return function (\n    target: undefined,\n    context: ClassFieldDecoratorContext\n  ) {\n    return function (this: any, initial: T | undefined) {\n      return initial ?? value;\n    };\n  };\n}\n\nclass Config {\n  @defaultValue(3000)\n  port!: number;\n\n  @defaultValue(\"localhost\")\n  host!: string;\n}<\/code><\/pre>\n\n<h2>\ub370\ucf54\ub808\uc774\ud130 \ud329\ud1a0\ub9ac \u2014 \uc778\uc790 \ubc1b\uae30<\/h2>\n\n<pre><code>\/\/ \ub370\ucf54\ub808\uc774\ud130\uc5d0 \uc635\uc158\uc744 \uc8fc\ub824\uba74 \ud55c \ub2e8\uacc4 \ub354 \uac10\uc2f8\uae30\nfunction trace(prefix: string) {\n  return function (method: Function, context: ClassMethodDecoratorContext) {\n    return function (this: any, ...args: any[]) {\n      console.log(`[${prefix}] ${String(context.name)}`);\n      return method.apply(this, args);\n    };\n  };\n}\n\nclass Service {\n  @trace(\"DB\")\n  query(sql: string) { ... }\n\n  @trace(\"API\")\n  fetch(url: string) { ... }\n}<\/code><\/pre>\n\n<h2>\uc2e4\uc804 \u2014 \uce90\uc2f1 \ub370\ucf54\ub808\uc774\ud130<\/h2>\n\n<pre><code>function memoize(method: Function, context: ClassMethodDecoratorContext) {\n  const cache = new Map&lt;string, any&gt;();\n  return function (this: any, ...args: any[]) {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) return cache.get(key);\n    const result = method.apply(this, args);\n    cache.set(key, result);\n    return result;\n  };\n}\n\nclass Stats {\n  @memoize\n  expensive(n: number): number {\n    console.log(\"\uacc4\uc0b0 \uc911...\");\n    return n * n;\n  }\n}\n\nconst s = new Stats();\ns.expensive(5);  \/\/ \"\uacc4\uc0b0 \uc911...\" \ucd9c\ub825 \ud6c4 25\ns.expensive(5);  \/\/ \uce90\uc2dc hit, \uc989\uc2dc 25<\/code><\/pre>\n\n<h2>Legacy (\uc61b) \ub370\ucf54\ub808\uc774\ud130 \u2014 Angular\u00b7NestJS \uac00 \uc5ec\uc804\ud788 \uc0ac\uc6a9<\/h2>\n\n<pre><code>\/\/ \uc61b \ud615\uc2dd \u2014 tsconfig: experimentalDecorators: true\nfunction Component(options: { selector: string }) {\n  return function (target: Function) {\n    Reflect.defineMetadata(\"selector\", options.selector, target);\n  };\n}\n\n@Component({ selector: \"app-user\" })\nclass UserComponent { }\n\n\/\/ NestJS \uc2a4\ud0c0\uc77c\n@Controller(\"users\")\nclass UserController {\n  @Get(\":id\")\n  findOne(@Param(\"id\") id: string) { ... }\n}<\/code><\/pre>\n\n<div class=\"warnbox\">\n  <p><strong>\uc2e4\uc804 \uad8c\uace0.<\/strong> <strong>\uc0c8\ub85c \ub9cc\ub4dc\ub294 \uc77c\ubc18 \ucf54\ub4dc<\/strong>\ub294 \ub370\ucf54\ub808\uc774\ud130\ub97c \uac70\uc758 \uc548 \uc501\ub2c8\ub2e4 \u2014 \ub2e8\uc21c \ud568\uc218\u00b7\uace0\ucc28 \ud568\uc218\ub85c \ucda9\ubd84. <strong>\ud504\ub808\uc784\uc6cc\ud06c\uac00 \uc694\uad6c\ud560 \ub54c<\/strong>(Angular\u00b7NestJS\u00b7TypeORM\u00b7class-validator) \ub9cc. \ub370\ucf54\ub808\uc774\ud130\ub294 \uac15\ub825\ud558\uc9c0\ub9cc &#8220;\ub9c8\ubc95&#8221; \ucc98\ub7fc \ub3d9\uc791\uc774 \uc228\uaca8\uc838 \ub514\ubc84\uae45\uc774 \uc5b4\ub824\uc6cc\uc694.<\/p>\n<\/div>\n\n<h2>\ud55c \ud45c \u2014 \ub370\ucf54\ub808\uc774\ud130 4\uc885 (ES2024)<\/h2>\n\n<div class=\"tablewrap\">\n<table>\n  <thead>\n    <tr><th>\ub300\uc0c1<\/th><th>\uc704\uce58<\/th><th>context.kind<\/th><\/tr>\n  <\/thead>\n  <tbody>\n    <tr><td data-label=\"\">class<\/td><td data-label=\"\">class \uc704<\/td><td data-label=\"\">&#8220;class&#8221;<\/td><\/tr>\n    <tr><td data-label=\"\">method<\/td><td data-label=\"\">\uba54\uc11c\ub4dc \uc704<\/td><td data-label=\"\">&#8220;method&#8221;<\/td><\/tr>\n    <tr><td data-label=\"\">accessor (get\/set)<\/td><td data-label=\"\">accessor \uc704<\/td><td data-label=\"\">&#8220;accessor&#8221;, &#8220;getter&#8221;, &#8220;setter&#8221;<\/td><\/tr>\n    <tr><td data-label=\"\">field (\uc18d\uc131)<\/td><td data-label=\"\">\ud544\ub4dc \uc704<\/td><td data-label=\"\">&#8220;field&#8221;<\/td><\/tr>\n  <\/tbody>\n<\/table>\n<\/div>\n\n<div class=\"cta\">\n  <h3>17\ud3b8 \u2014 namespace \uc640 .d.ts<\/h3>\n  <p>JS \ub77c\uc774\ube0c\ub7ec\ub9ac\uc5d0 \ud0c0\uc785 \uc785\ud788\uae30. DefinitelyTyped(@types\/*) \uc758 \ub3d9\uc791 \ubc29\uc2dd.<\/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: 15\ud3b8 \ube44\ub3d9\uae30 \ud0c0\uc785 \u00b7 \ud604\uc7ac: <strong>16\ud3b8 (\uace0\uae09 \uc2dc\uc791)<\/strong> \u00b7 \ub2e4\uc74c \u2192 17\ud3b8 .d.ts \u00b7 \uc9c4\ud589: <strong>16\/20<\/strong>\n<\/div>\n\n<\/article>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\ub370\ucf54\ub808\uc774\ud130 4\uc885\u00b7\ud45c\uc900 vs legacy. 20\ud3b8 \uad50\uc7ac 16\ud3b8 (\uace0\uae09 \uc2dc\uc791).<\/p>\n","protected":false},"author":1,"featured_media":301,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-509","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\/509","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=509"}],"version-history":[{"count":0,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/posts\/509\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media\/301"}],"wp:attachment":[{"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/media?parent=509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/categories?post=509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/junai.ai\/blog\/wp-json\/wp\/v2\/tags?post=509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}