타입스크립트에서 Decorator란 무엇인가요?

아래는 타입스크립트 Decorator에 대해 자주 묻는 질문(FAQ) 형식으로 정리한 내용입니다.

1. Q: Decorator란 무엇인가요?
A: Decorator는 클래스 선언, 메서드, 접근자(getter/setter), 속성, 매개변수 등에 추가 기능을 부여할 수 있는 특수한 어노테이션(함수)입니다. 런타임에 해당 요소를 감싸거나 수정하여 코드의 재사용성과 가독성을 높여 줍니다.

2. Q: Decorator를 사용하려면 어떻게 설정하나요?
A: tsconfig.json에 아래 옵션을 추가해야 합니다.
```
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true // (선택) 타입 메타데이터 활용 시
}
}
```

3. Q: Decorator의 종류에는 어떤 것이 있나요?
A: 타입스크립트가 지원하는 기본 Decorator 유형은 다음과 같습니다.
1) 클래스 Decorator
2) 메서드 Decorator
3) 접근자(getter/setter) Decorator
4) 속성(Property) Decorator
5) 매개변수(Parameter) Decorator

4. Q: 각 Decorator에는 어떤 시그니처(인자)가 전달되나요?
A:
- 클래스: (constructor: Function) => Function | void
- 메서드: (target: Object, propertyKey: string|symbol, descriptor: PropertyDescriptor) => PropertyDescriptor | void
- 접근자: 메서드 Decorator와 동일
- 속성: (target: Object, propertyKey: string|symbol) => void
- 매개변수: (target: Object, propertyKey: string|symbol, parameterIndex: number) => void

5. Q: Decorator 팩토리(Factory)란 무엇인가요?
A: 인자를 받아 Decorator를 생성하는 함수입니다.
예)
```
function Log(prefix: string) {
return function(target, key, descriptor) {
const orig = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(prefix, key, args);
return orig.apply(this, args);
};
};
}
```

6. Q: Decorator의 실행 순서는 어떻게 되나요?
A: 같은 타겟 요소에 여러 Decorator가 적용될 때, 작성된 순서의 역순 (아래→위)으로 평가(Factory 호출), 그리고 순서대로 (위→아래)로 적용됩니다.
1) 팩토리 호출(역순)
2) 반환된 Decorator 함수 호출(순서대로)

7. Q: 메타데이터(emitDecoratorMetadata) 옵션은 무엇인가요?
A: 타입스크립트가 런타임에 타입 정보를 reflect-metadata 패키지 형태로 저장하게 해 줍니다. 주로 의존성 주입(DI) 라이브러리나 검증 라이브러리에서 활용됩니다.

8. Q: Decorator로 어떤 유용한 기능을 구현할 수 있나요?
A:
- 로깅(Logging)
- 캐싱(Caching)
- 접근 제어(Authorization)
- 성능 측정(Profiling)
- 의존성 주입(DI)
- 유효성 검증(Validation)
- 라우팅 메타데이터 설정 등

9. Q: 클래스 Decorator로 생성자 로직을 변경할 수 있나요? A: 네, 클래스 Decorator에서 원본 생성자를 상속받아 확장하거나 새로운 생성자를 반환할 수 있습니다.
```ts
function Sealed(constructor: Function) {
Object.seal(constructor);
Object.seal(constructor.prototype);
}

@Sealed
class MyClass { /* ... */ }
```

10. Q: Decorator 사용 시 주의할 점은?
A:
- ES 표준이 아직 최종 확정되지 않은 제안 단계(experimental)이므로 사양 변경 가능성
- 트랜스파일 순서와 emit 순서로 인한 디버깅 어려움
- 너무 과도한 사용은 코드 복잡도 증가

11. Q: Reflect.metadata는 어떻게 쓰나요?
A:
```ts
import 'reflect-metadata';

function Role(role: string) {
return Reflect.metadata('role', role);
}

class User {
@Role('admin')
name: string;
}

// 읽기
const role = Reflect.getMetadata('role', User.prototype, 'name'); // 'admin'
```

12. Q: 서드파티 라이브러리와의 연동 예시는?
A:
- class-validator: 속성 Decorator로 유효성 검사 규칙 지정
- routing-controllers: 메서드 Decorator로 HTTP 라우트 설정
- typedi, inversify: 클래스/매개변수 Decorator로 의존성 주입

13. Q: Decorator를 타입스크립트 외 순수 자바스크립트에서도 쓸 수 있나요?
A: Babel이나 SWC 같은 트랜스파일러에서 experimentalDecorators 옵션을 활성화하면 ESNext 환경에서 활용할 수 있습니다만, 런타임 메타데이터나 타입 시스템 연동은 타입스크립트 쪽이 더 편리합니다.

14. Q: Decorator와 Aspect-Oriented Programming(AOP)의 관계는?
A: Decorator는 메서드 호출 전후에 공통 로직을 삽입할 수 있어 AOP의 대표적 구현 수단으로 사용됩니다. 로깅, 트랜잭션, 권한 검사 등을 횡단 관심사(cross-cutting concern)로 분리할 때 유용합니다.

15. Q: Decorator 사용 예시를 간단히 보여주세요.
```ts
function Log(target: any, key: string, descriptor: PropertyDescriptor) {
const orig = descriptor.value;
descriptor.value = function(...args: any[]) {
console.log(`Calling ${key}`, args);
return orig.apply(this, args);
};
}

class Calculator {
@Log
add(a: number, b: number) {
return a + b;
}
}

const c = new Calculator();
c.add(2, 3); // 콘솔: Calling add [2,3]
```

타입스크립트에서 Decorator는 클래스, 메서드, 접근자, 프로퍼티 또는 매개변수에 추가적인 기능을 부여할 수 있는 특별한 종류의 선언적 기능입니다.

Decorator는 주로 코드의 재사용성을 높이고, 코드의 가독성을 향상시키며, 특정 기능을 쉽게 적용할 수 있도록 도와줍니다.

타입스크립트는 ECMAScript의 제안된 Decorator 기능을 지원하며, 이 기능은 주로 Angular와 같은 프레임워크에서 많이 사용됩니다.

Decorator의 종류 타입스크립트에서 사용할 수 있는 Decorator의 종류는 다음과 같습니다: 1. 클래스 Decorator : 클래스 선언 위에 적용되며, 클래스의 생성자에 대한 정보를 수정하거나, 클래스의 인스턴스를 생성할 때의 동작을 변경할 수 있습니다.

```typescript function LogClass(target: Function) { console.log(`Class ${target.name} is created.`); } @LogClass class User { constructor(public name: string) {} } ```

2. 메서드 Decorator : 클래스의 메서드 위에 적용되며, 메서드의 동작을 수정하거나, 메서드 호출 시 추가적인 로직을 실행할 수 있습니다.

```typescript function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) { const originalMethod = descriptor.value; descriptor.value = function(...args: any[]) { console.log(`Method ${propertyKey} is called with args: ${JSON.stringify(args)}`); return originalMethod.apply(this, args); }; } class User { @LogMethod sayHello(name: string) { return `Hello, ${name}!`; } } ```

3. 접근자 Decorator : 클래스의 접근자(예: getter, setter) 위에 적용되며, 접근자의 동작을 수정할 수 있습니다.

```typescript function LogAccessor(target: any, propertyKey: string, descriptor: PropertyDescriptor) { const originalGet = descriptor.get; descriptor.get = function() { console.log(`Getting value of ${propertyKey}`); return originalGet.call(this); }; } class User { private _name: string; constructor(name: string) { this._name = name; } @LogAccessor get name() { return this._name; } } ```

4. 프로퍼티 Decorator : 클래스의 프로퍼티 위에 적용되며, 프로퍼티의 메타데이터를 추가하거나, 프로퍼티의 동작을 변경할 수 있습니다.

```typescript function LogProperty(target: any, propertyKey: string) { let value: any; const getter = () => { console.log(`Getting value of ${propertyKey}`); return value; }; const setter = (newValue: any) => { console.log(`Setting value of ${propertyKey} to ${newValue}`); value = newValue; }; Object.defineProperty(target, propertyKey, { get: getter, set: setter, enumerable: true, configurable: true, }); } class User { @LogProperty name: string; constructor(name: string) { this.name = name; } } ```

5. 매개변수 Decorator : 메서드의 매개변수에 적용되며, 매개변수에 대한 메타데이터를 추가할 수 있습니다.

```typescript function LogParameter(target: any, propertyKey: string, parameterIndex: number) { console.log(`Parameter at index ${parameterIndex} in method ${propertyKey} is decorated.`); } class User { greet(@LogParameter name: string) { return `Hello, ${name}!`; } } ``` Decorator의 사용 목적 1. 코드의 재사용성 : Decorator를 사용하면 공통적인 기능을 여러 클래스나 메서드에 쉽게 적용할 수 있습니다.

예를 들어, 로깅, 권한 검사, 캐싱 등의 기능을 Decorator로 구현하여 코드의 중복을 줄일 수 있습니다.



2. 가독성 향상 : Decorator를 사용하면 코드의 의도를 명확하게 표현할 수 있습니다.

예를 들어, 특정 메서드가 어떤 기능을 수행하는지 Decorator를 통해 쉽게 알 수 있습니다.



3. 메타프로그래밍 : Decorator는 메타데이터를 추가하는 데 유용합니다.

이를 통해 런타임에 클래스나 메서드에 대한 정보를 동적으로 처리할 수 있습니다.

결론 타입스크립트의 Decorator는 강력한 기능으로, 코드의 구조를 개선하고, 재사용성을 높이며, 가독성을 향상시키는 데 도움을 줍니다.

그러나 Decorator의 사용은 코드의 복잡성을 증가시킬 수 있으므로, 적절한 상황에서 신중하게 사용하는 것이 중요합니다.

Decorator를 활용하여 더 나은 아키텍처와 유지보수성을 가진 코드를 작성할 수 있습니다.