데코레이터와 메타데이터
실험적 데코레이터를 활성화하고, 클래스·메서드·속성 데코레이터를 작성하며, 의존성 주입 패턴에 reflect-metadata를 사용합니다.
데코레이터와 메타데이터은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
데코레이터란 무엇인가요
데코레이터는 정의 시점에 클래스, 메서드, 속성 또는 매개변수를 수정하는 함수입니다. Angular, NestJS, TypeORM, 클래스 기반 MobX에서 많이 사용됩니다.
데코레이터 문법
클래스, 메서드, 속성 또는 매개변수 앞에 @DecoratorName을 붙이세요. 클래스가 정의될 때 데코레이터 함수가 실행됩니다.
@Component({ selector: 'app-root' })
export class AppComponent {
@Input() title: string;
@HostListener('click')
onClick() {
console.log('clicked');
}
}데코레이터 활성화하기
tsconfig.json에서 실험적 플래그를 활성화하세요. 새로운 ECMAScript 3단계 데코레이터(TypeScript 5.0 이상)는 이 플래그가 필요하지 않지만 의미가 다릅니다.
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}클래스 데코레이터
생성자를 인수로 받습니다. 클래스를 대체하거나 감싸거나 확장할 수 있습니다.
function Singleton<T extends { new (...a: any[]): {} }>(target: T) {
let instance: T;
return class extends target {
constructor(...args: any[]) {
if (!instance) instance = new target(...args) as T;
return instance;
}
};
}
@Singleton
class Logger { /* ... */ }메서드 데코레이터
(대상, 키, 설명자)를 받습니다. 메서드를 감쌀 수 있으며, 예를 들어 호출을 기록하는 데 사용할 수 있습니다.
function Log(target: any, key: string, descriptor: PropertyDescriptor) {
const original = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log(`[${key}]`, args);
return original.apply(this, args);
};
}
class Service {
@Log
greet(name: string) { return `Hello ${name}`; }
}속성 데코레이터
(대상, 키)를 받습니다. 속성에 대한 정보를 등록하기 위해 reflect-metadata와 함께 사용하는 경우가 많습니다.
function Required(target: any, key: string) {
const existing = Reflect.getMetadata('required', target) || [];
Reflect.defineMetadata('required', [...existing, key], target);
}
class User {
@Required name: string;
@Required email: string;
}매개변수 데코레이터
(대상, 키, parameterIndex)를 받습니다. 의존성 주입에 사용하여 어떤 매개변수에 어떤 서비스가 필요한지 기록합니다.
function Inject(token: string) {
return function (target: any, key: string, index: number) {
const existing = Reflect.getMetadata('inject', target, key) || {};
existing[index] = token;
Reflect.defineMetadata('inject', existing, target, key);
};
}
class UserService {
constructor(@Inject('Database') db: Database) {}
}reflect-metadata
reflect-metadata는 데코레이터가 클래스의 메타데이터를 읽고 쓸 수 있게 해 주는 폴리필입니다. Angular DI와 많은 ORM에 필요합니다.
npm install reflect-metadata
// main.ts (entry point):
import 'reflect-metadata';
import { Reflect } from 'reflect-metadata';
Reflect.defineMetadata('key', 'value', target);
Reflect.getMetadata('key', target); // 'value'데코레이터 팩토리
팩토리는 데코레이터를 반환하며, 인수를 전달할 때 사용합니다.
function Component(config: { selector: string }) {
return function (target: any) {
target.selector = config.selector;
};
}
@Component({ selector: 'app-root' })
class AppComponent {}유효성 검사 사용 사례
속성 데코레이터를 유효성 검사 함수와 결합하여 작은 유효성 검사 라이브러리를 만들 수 있습니다.
// Decorator records that a field is required:
function Required(target: any, key: string) {
const fields = Reflect.getMetadata('required', target) || [];
Reflect.defineMetadata('required', [...fields, key], target);
}
class User {
@Required name!: string;
@Required email!: string;
}
function validate(obj: any): string[] {
const required: string[] = Reflect.getMetadata('required', obj) || [];
return required.filter(k => obj[k] == null);
}3단계 데코레이터(TC39)
표준화된 데코레이터(TS 5.0 이상, 플래그를 사용하면 Node 22 이상에서 지원됨)는 시그니처가 다릅니다. 실험적 플래그가 필요하지 않으며 reflect-metadata도 필요하지 않습니다.
데코레이터를 사용할 때
프레임워크가 제공하는 경우에 데코레이터를 사용하세요(Angular, NestJS, TypeORM). 일반 프런트엔드 코드에서 직접 만들지는 마세요. 복잡성을 높이고 특정 런타임 동작에 종속되기 때문입니다.
빠른 확인
메타데이터 리플렉션과 함께 레거시(실험적) 데코레이터를 사용하려면 어떤 tsconfig 플래그를 활성화해야 하나요?
복습: 데코레이터
데코레이터는 정의 시점에 클래스, 메서드, 속성, 매개변수를 수정합니다. experimentalDecorators와 emitDecoratorMetadata를 활성화하세요. 클래스, 메서드, 속성, 매개변수 데코레이터의 시그니처는 서로 다릅니다. reflect-metadata는 메타데이터를 저장하고, 팩토리는 인수를 전달합니다. Angular, NestJS, TypeORM에서 많이 사용됩니다. 3단계 데코레이터(TS 5 이상)는 앞으로 사용할 표준이며 플래그가 필요하지 않습니다.
자주 묻는 질문
“데코레이터와 메타데이터” 강의는 무료인가요?
네 — “데코레이터와 메타데이터” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“데코레이터와 메타데이터”에서 뭘 배우나요?
실험적 데코레이터를 활성화하고, 클래스·메서드·속성 데코레이터를 작성하며, 의존성 주입 패턴에 reflect-metadata를 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“데코레이터와 메타데이터” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.