0Pricing
TypeScript Academy · 강의

메서드 및 속성 데코레이터

개별 메서드와 속성에 데코레이터를 적용합니다.

메서드 및 속성 데코레이터은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

환영합니다

이 단원에서는 TypeScript의 메서드 및 속성 데코레이터를 다룹니다.

소개

데코레이터는 메타데이터를 추가하고 클래스와 그 구성원을 수정하기 위한 3단계 JavaScript 제안이자 실험적인 TypeScript 기능입니다.

핵심 개념

데코레이터는 @ 구문을 사용하여 클래스, 메서드, 속성 또는 매개변수에 적용하는 함수입니다.
@sealed
class BugReport {
  type = 'report';
  title: string;
  constructor(t: string) { this.title = t; }
}

클래스 데코레이터

클래스 데코레이터는 생성자 함수를 전달받고 수정된 버전을 반환할 수 있습니다.
function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

메서드 데코레이터

메서드 데코레이터는 대상, 속성 이름, 속성 설명자를 전달받습니다.
function log(target: any, key: string, desc: PropertyDescriptor) {
  const orig = desc.value;
  desc.value = function(...args: any[]) {
    console.log('Calling', key);
    return orig.apply(this, args);
  };
}

속성 데코레이터

속성 데코레이터는 대상과 속성 키를 전달받습니다. 읽기와 쓰기를 직접 가로챌 수는 없습니다.
function readonly(target: any, key: string) {
  Object.defineProperty(target, key, { writable: false });
}

매개변수 데코레이터

매개변수 데코레이터는 대상, 메서드 이름, 매개변수 인덱스를 전달받습니다.
function required(target: any, key: string, index: number) {
  const meta = Reflect.getMetadata('required', target, key) || [];
  meta.push(index);
  Reflect.defineMetadata('required', meta, target, key);
}

데코레이터 팩토리

데코레이터 팩토리는 데코레이터를 반환하는 함수입니다. 설정 매개변수를 받습니다.
function role(name: string) {
  return function(target: any, key: string) {
    Reflect.defineMetadata('role', name, target, key);
  };
}

class UserController {
  @role('admin')
  deleteUser() {}
}

NestJS 데코레이터

NestJS는 컨트롤러, 의존성 주입, 라우팅에 데코레이터를 광범위하게 사용합니다.
@Controller('users')
class UsersController {
  constructor(private usersService: UsersService) {}

  @Get()
  findAll(): User[] {
    return this.usersService.findAll();
  }
}

reflect-metadata

데코레이터는 런타임에 메타데이터를 저장하고 가져오기 위해 reflect-metadata 폴리필과 함께 사용되는 경우가 많습니다.
import 'reflect-metadata';
// Enable in tsconfig: experimentalDecorators: true, emitDecoratorMetadata: true

데코레이터 순서

같은 선언에 있는 여러 데코레이터는 아래에서 위 순서로 적용됩니다. 즉, 마지막에 작성한 데코레이터가 먼저 평가됩니다.
@first
@second
class Example {}
// Applied: second first, then first

빠른 확인

데코레이터를 사용하려면 어떤 TypeScript 설정이 필요합니까?

복습

데코레이터는 @ 구문을 사용하여 클래스, 메서드, 속성, 매개변수를 수정합니다. tsconfig에서 experimentalDecorators를 활성화하면 사용할 수 있으며, NestJS와 Angular 같은 프레임워크에서 널리 사용됩니다.

자주 묻는 질문

“메서드 및 속성 데코레이터” 강의는 무료인가요?

네 — “메서드 및 속성 데코레이터” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“메서드 및 속성 데코레이터”에서 뭘 배우나요?

개별 메서드와 속성에 데코레이터를 적용합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“메서드 및 속성 데코레이터” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 클래스 데코레이터: 동작 감싸기
  2. 메서드 및 속성 데코레이터
  3. 매개변수 데코레이터 및 메타데이터
  4. 프레임워크의 데코레이터: NestJS 예제
← TypeScript Academy(으)로 돌아가기