TS decorator가 무엇인가요?

TS decorator의 개념

TypeScript Decorator는 클래스, 메서드, 프로퍼티, 매개변수 등에 적용되는 특별한 형태의 함수입니다. 데코레이터는 @ 기호를 사용하여 적용하며, 클래스 및 멤버에 메타데이터를 추가하고 동작을 수정하는 데 사용됩니다.

데코레이터는 클래스 또는 멤버를 래핑하는 함수로서, 런타임에 해당 클래스 또는 멤버의 동작을 변경하거나 추가할 수 있습니다. 주로 다음과 같은 기능을 수행하는 데 사용됩니다:

1. 메타데이터 추가: 데코레이터를 사용하여 클래스, 메서드, 프로퍼티 등에 메타데이터를 추가할 수 있습니다. 메타데이터는 런타임에서 정보를 얻거나 사용할 수 있는 추가적인 정보를 제공합니다.

2. 동작 변경: 데코레이터를 사용하여 클래스, 메서드, 프로퍼티의 동작을 수정하거나 확장할 수 있습니다. 예를 들어, 메서드 데코레이터를 사용하여 메서드 호출 전후에 로깅, 인증, 성능 측정 등의 기능을 추가할 수 있습니다.

3. 팩토리 패턴 구현: 데코레이터를 사용하여 클래스 또는 멤버에 대한 팩토리 패턴을 구현할 수 있습니다. 데코레이터 팩토리는 인자를 받아 특정 조건에 따라 데코레이터를 생성하고 적용할 수 있습니다.

4. 의존성 주입(Dependency Injection): 데코레이터를 사용하여 의존성 주입을 구현할 수 있습니다. 의존성 주입 데코레이터는 클래스의 생성자 매개변수에 의존성을 주입하고, 인스턴스 생성 시 자동으로 의존성을 해결합니다.

TypeScript Decorator는 ECMAScript의 데코레이터 기능을 확장한 것으로, JavaScript 환경에서는 실험적인 기능으로 간주됩니다. Decorator를 사용하려면 TypeScript 컴파일러 옵션에서 experimentalDecorators를 활성화해야 합니다. 데코레이터는 주로 클래스 기반 프레임워크, 의존성 주입 컨테이너 등에서 활용되며, 코드의 가독성과 유연성을 향상시키는 데 도움이 됩니다.

TS decorator의 예시

TypeScript 데코레이터의 몇 가지 예시를 제시해 드리겠습니다:

1. 클래스 데코레이터:

function logClass(target: any) {
  console.log(`Class: ${target.name}`);
}

@logClass
class MyClass {
  // 클래스 내용...
}

위의 예시에서 logClass 함수는 클래스 데코레이터입니다. 이 데코레이터는 MyClass 클래스를 래핑하고, 래핑된 클래스의 이름을 콘솔에 출력합니다. 즉, @logClass 문법을 사용하여 MyClass 클래스에 logClass 데코레이터를 적용하면 콘솔에 "Class: MyClass"가 출력됩니다.

2. 메서드 데코레이터:

function logMethod(target: any, key: string, descriptor: PropertyDescriptor) {
  console.log(`Method: ${key}`);
}

class MyClass {
  @logMethod
  greet() {
    console.log('Hello, world!');
  }
}

위의 예시에서 logMethod 함수는 메서드 데코레이터입니다. 이 데코레이터는 MyClass의 greet 메서드를 래핑하고, 래핑된 메서드의 이름을 콘솔에 출력합니다. @logMethod 문법을 사용하여 greet 메서드에 logMethod 데코레이터를 적용하면 콘솔에 "Method: greet"가 출력됩니다.

3. 프로퍼티 데코레이터:

function readonly(target: any, key: string) {
  const descriptor: PropertyDescriptor = {
    writable: false
  };
  Object.defineProperty(target, key, descriptor);
}

class MyClass {
  @readonly
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

const obj = new MyClass('John');
obj.name = 'Jane'; // 에러: Cannot assign to 'name' because it is a read-only property.

위의 예시에서 readonly 함수는 프로퍼티 데코레이터입니다. 이 데코레이터는 MyClass의 name 프로퍼티를 읽기 전용으로 설정합니다. 즉, @readonly 문법을 사용하여 name 프로퍼티에 readonly 데코레이터를 적용하면 해당 프로퍼티는 읽기 전용이 되어 값을 변경할 수 없습니다.

이외에도 매개변수 데코레이터, 접근자 데코레이터 등 다양한 유형의 데코레이터를 사용할 수 있습니다. 데코레이터는 주로 프레임워크, 의존성 주입 컨테이너 등에서 활용되며, 코드의 동작을 수정하거나 메타데이터를 추가하는 용도로 사용됩니다.