TypeScript에서 Decorator 사용법 완벽 가이드: 코드 재사용과 효율성 극대화

TypeScript에서 Decorator 사용법 완벽 가이드

TypeScript 데코레이터(Decorator)의 모든 것: 개념, 설정 및 활용법

TypeScript의 데코레이터는 클래스와 메서드, 프로퍼티에 메타프로그래밍 기능을 부여하여 코드 재사용과 유지보수성을 크게 향상할 수 있는 강력한 기능입니다. 이 글에서는 데코레이터의 개념과 설정 방법을 정리하고, 구체적인 활용 사례를 통해 효율적으로 데코레이터를 사용하는 방법을 알려드립니다.

1. 데코레이터란 무엇인가?

 

데코레이터(Decorator)는 TypeScript에서 코드에 추가적인 기능을 부여하고, 메타데이터를 추가하거나 수정할 수 있도록 돕는 기능입니다. 데코레이터는 클래스, 메서드, 접근자, 프로퍼티, 매개 변수 등에 사용되며, `@` 기호와 함께 사용됩니다. 이를 통해 코드에 일종의 ‘장식’을 추가하는 효과를 얻을 수 있습니다.

데코레이터의 기본 개념

TypeScript의 데코레이터는 메타 프로그래밍을 위한 도구로, 클래스와 그 구성 요소에 부가적인 기능을 부여하는 역할을 합니다. 예를 들어, 메서드나 클래스에 공통적인 로직을 추가할 때, 일일이 해당 로직을 작성하는 대신 데코레이터를 활용해 한 번만 정의하고 필요할 때마다 호출할 수 있습니다. 이는 코드 재사용성을 높이고 유지보수를 용이하게 합니다.

데코레이터의 동작 방식

데코레이터는 함수 형태로 작성되며, 적용되는 요소에 대해 특정한 동작을 수행합니다. 예를 들어, **클래스 데코레이터**는 클래스 선언 앞에 위치하여 전체 클래스에 영향을 미치는 반면, 메서드 데코레이터는 메서드에만 특정 로직을 추가하는 데 사용됩니다.

데코레이터의 활용 예시

데코레이터는 주로 로그 기록, 인증 체크와 같은 반복적이고 공통적인 작업을 수행하는 데 사용됩니다. 예를 들어, 메서드 호출 전후로 로그를 기록하는 데코레이터를 적용하면 코드의 가독성을 유지하면서도 필요할 때만 이 기능을 손쉽게 추가할 수 있습니다.

데코레이터를 사용할 때의 유의점

TypeScript에서 데코레이터는 **실험적인 기능**으로 취급됩니다. 따라서 사용하기 위해서는 `tsconfig.json` 파일에서 `experimentalDecorators` 옵션을 활성화해야 하며, JavaScript 런타임 환경에서는 제대로 동작하지 않을 수 있으므로 주의가 필요합니다.

자바스크립트 개발자가 2024년에 주목해야 할 필수 기술

2. TypeScript에서 데코레이터 활성화하기

 

데코레이터는 TypeScript에서 강력한 기능이지만, 기본적으로 실험적 기능으로 설정되어 있어 사용하기 위해서는 추가적인 설정이 필요합니다. 이번 섹션에서는 데코레이터를 활성화하는 방법을 단계별로 알아보겠습니다.

1. tsconfig.json 파일 수정하기

TypeScript 프로젝트의 루트에 위치한 tsconfig.json 파일에서 데코레이터를 사용하려면, experimentalDecorators 옵션을 true로 설정해야 합니다. 이를 통해 TypeScript가 데코레이터 구문을 인식하게 됩니다. 설정 방법은 다음과 같습니다:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

이 옵션을 설정하지 않으면 데코레이터 관련 구문을 사용할 때 컴파일 오류가 발생합니다. 따라서, 데코레이터를 사용하고자 할 때는 반드시 이 설정을 확인하세요.

2. emitDecoratorMetadata 설정 (선택 사항)

emitDecoratorMetadata 옵션을 활성화하면 런타임에서 클래스와 메서드에 추가적인 메타데이터를 제공합니다. 이를 통해 데코레이터는 타입 정보나 메서드의 메타데이터를 참조할 수 있어, 더 복잡한 기능을 구현할 수 있습니다. 이 옵션은 experimentalDecorators가 활성화된 상태에서만 동작하므로, 다음과 같이 함께 설정할 수 있습니다:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

3. 데코레이터 설정 후 확인하기

설정을 완료한 후, 간단한 예제를 작성하여 데코레이터가 정상적으로 작동하는지 확인해 볼 수 있습니다. 예를 들어, 클래스 위에 데코레이터를 추가해 보세요:

function TestDecorator(constructor: Function) {
  console.log("데코레이터가 호출되었습니다!");
}

@TestDecorator
class ExampleClass {
  // 클래스 내용
}

위 예제에서 TestDecorator 데코레이터가 제대로 동작하면 콘솔에 "데코레이터가 호출되었습니다!" 메시지가 출력됩니다. 이를 통해 데코레이터 설정이 성공적으로 완료되었는지 확인할 수 있습니다.

4. 데코레이터 활성화 시 주의 사항

데코레이터는 ES6 표준이 아닌 실험적 기능으로, 특정 TypeScript 버전이나 환경에 따라 동작이 달라질 수 있습니다. 따라서 프로젝트 요구사항을 고려해 사용해야 하며, 호환성 테스트도 필수입니다. 특히, 다른 컴파일 옵션과의 충돌 가능성도 있으므로 설정을 꼼꼼히 확인하는 것이 좋습니다.

이와 같이 데코레이터 설정을 통해 TypeScript 코드에 메타프로그래밍 기능을 쉽게 추가할 수 있으며, 설정 과정이 끝난 후에는 더 복잡한 데코레이터 기능도 자유롭게 구현할 수 있습니다.

3. 클래스 데코레이터와 메서드 데코레이터의 차이점

 

클래스 데코레이터와 메서드 데코레이터는 TypeScript에서 많이 사용되는 데코레이터 유형으로, 각각 클래스 전체와 클래스 내 특정 메서드에 기능을 추가합니다. 두 데코레이터는 적용되는 범위와 용도가 달라 코드 재사용성과 유지보수성을 높이는 방식이 다릅니다. 여기서는 클래스와 메소드 데코레이터의 주요 차이점과 활용 방법을 다룹니다.

클래스 데코레이터

클래스 데코레이터는 클래스 선언에 적용되어 전체 클래스의 동작을 수정하거나 설정하는 데 사용됩니다. 예를 들어, 로깅이나 클래스 초기화 설정, 전역 상태 관리와 같은 동작을 클래스 수준에서 추가할 때 유용합니다. 클래스 데코레이터는 함수로 정의되어 대상 클래스의 생성자 함수를 인자로 받아, 클래스의 프로토타입이나 정적 메서드를 수정할 수 있습니다.

메소드 데코레이터

메소드 데코레이터는 클래스의 특정 메서드에만 적용되어 메서드의 동작을 보강하거나 수정하는 데 사용됩니다. 예를 들어, API 요청 메서드에 인증 검사를 추가하거나, 메서드 실행 시간을 측정하는 로직을 주입할 때 유용합니다. 메소드 데코레이터는 함수로 정의되며, 첫 번째 인자로 클래스의 프로토타입을, 두 번째 인자로 메소드 이름을, 세 번째 인자로 해당 메서드의 속성 설명자를 받습니다. 이를 통해 메소드의 기능을 확장하거나 조건을 부여할 수 있습니다.

차이점 요약 및 예제

클래스 데코레이터는 클래스 전체에 영향을 미치며, 객체 생성 이전에 전역적인 설정을 적용할 때 적합합니다. 반면, 메서드 데코레이터는 특정 메서드에만 적용되어 메소드 단위로 기능을 추가하고자 할 때 활용됩니다. 예를 들어, 클래스 데코레이터를 이용해 클래스가 생성될 때마다 로깅을 하는 로직을 추가할 수 있고, 메소드 데코레이터로 특정 메소드 호출 시 접근 제어를 추가할 수 있습니다.

// 클래스 데코레이터 예시
function Logger(constructor: Function) {
    console.log(`클래스 ${constructor.name}가 생성되었습니다.`);
}

@Logger
class ExampleClass { }

// 메소드 데코레이터 예시
function LogExecutionTime(
  target: Object,
  propertyKey: string,
  descriptor: PropertyDescriptor
) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function (...args: any[]) {
    console.time(propertyKey);
    const result = originalMethod.apply(this, args);
    console.timeEnd(propertyKey);
    return result;
  };
  return descriptor;
}

class Example {
  @LogExecutionTime
  someMethod() {
    // 메소드 실행 코드
  }
}

클래스 데코레이터와 메소드 데코레이터는 적용 범위와 사용 목적에 따라 적절하게 선택하여 사용해야 합니다. 이러한 구분을 통해 프로젝트의 요구에 맞게 데코레이터를 활용하면 효율적인 코드 관리가 가능합니다.

자바스크립트 학습 가이드: 3주 만에 기초 마스터하기

4. 데코레이터를 활용한 코드 재사용 예제

반응형

TypeScript에서 데코레이터는 코드의 재사용성을 극대화할 수 있는 방법을 제공합니다. 특히 반복적인 코드 패턴을 데코레이터로 모듈화 하면 코드의 가독성과 유지보수가 쉬워지며, 재사용성을 높일 수 있습니다. 여기서는 코드 재사용을 위한 데코레이터 예제를 통해 구체적인 방법을 알아보겠습니다.

반복적인 로깅 코드 제거

애플리케이션을 개발하다 보면 특정 메서드가 호출될 때마다 로그를 남기는 경우가 많습니다. 이를 메서드 데코레이터로 구현하면, 각 메서드에 일일이 로깅 코드를 추가할 필요 없이 재사용할 수 있습니다.

function LogExecution(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);
  };
  return descriptor;
}

class ExampleService {
  @LogExecution
  runTask(taskName: string) {
    console.log(`${taskName} is running`);
  }
}

위 코드에서는 `@LogExecution` 데코레이터가 메서드 `runTask`에 적용되어, 해당 메서드가 호출될 때마다 자동으로 실행 정보를 로그에 출력합니다. 이렇게 하면 메서드에 직접 로깅 코드를 추가하지 않아도 되어 코드가 간결해집니다.

권한 검사 데코레이터로 인증 로직 간소화

특정 메서드나 기능에 접근할 때 권한을 검사하는 코드는 대부분 공통으로 적용됩니다. 이때 메서드 데코레이터를 이용하여 권한 검사를 자동화하면 각 메서드에서 중복된 코드를 줄일 수 있습니다.

function CheckPermission(role: string) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
      if (userRole !== role) {
        throw new Error("Permission denied");
      }
      return originalMethod.apply(this, args);
    };
    return descriptor;
  };
}

class AdminService {
  @CheckPermission("admin")
  deleteUser(userId: string) {
    console.log(`User ${userId} deleted.`);
  }
}

위 예제에서 `@CheckPermission` 데코레이터는 `deleteUser` 메서드에 접근하기 전에 사용자 역할을 확인합니다. 이를 통해 코드 중복을 줄이며, 권한 로직을 간결하게 관리할 수 있습니다.

데코레이터는 이처럼 코드 재사용성과 효율성을 극대화할 수 있는 강력한 기능입니다. 반복되는 로직을 데코레이터로 추상화하여, 코드 유지보수를 단순화하고 모듈화 된 코드를 통해 개발 효율성을 크게 향상할 수 있습니다.

5. 커스텀 데코레이터 작성법과 실전 활용

데코레이터는 코드를 꾸며주고, 부가 기능을 적용할 수 있는 강력한 도구입니다. 특히 커스텀 데코레이터를 활용하면 기존 코드에 직접적인 수정 없이 기능을 추가할 수 있어 유지보수성과 재사용성을 극대화할 수 있습니다. 이번 섹션에서는 커스텀 데코레이터의 작성 방법과 실전 활용 예제를 다룹니다.

1. 커스텀 데코레이터란?

커스텀 데코레이터는 기존에 제공되는 데코레이터와 달리 개발자가 직접 정의하는 함수 형태의 데코레이터입니다. 함수에 부가적인 속성이나 동작을 추가하거나, 클래스의 메서드 실행을 제어하는 등 유연한 기능을 제공합니다. 커스텀 데코레이터는 크게 클래스, 메서드, 속성, 파라미터 데코레이터로 나뉘며, 각 데코레이터는 다른 역할과 매개변수를 갖습니다.

2. 커스텀 메서드 데코레이터 작성하기

가장 많이 사용되는 커스텀 데코레이터 유형 중 하나는 메서드 데코레이터입니다. 이 데코레이터는 특정 메서드에만 적용되어 함수의 실행 전, 후에 추가적인 동작을 실행할 수 있습니다. 예를 들어, 함수 호출 전 로그를 남기는 데코레이터는 아래와 같이 작성할 수 있습니다:

function LogExecution(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
        console.log(`Executing ${propertyKey} with arguments:`, args);
        const result = originalMethod.apply(this, args);
        console.log(`Executed ${propertyKey} with result:`, result);
        return result;
    };
    return descriptor;
}

class MyService {
    @LogExecution
    doSomething(data: string) {
        return `Data processed: ${data}`;
    }
}

위 코드에서 @LogExecution 데코레이터는 doSomething 메서드 호출 시마다 실행되어, 함수의 인수와 결과를 출력합니다. 이처럼 커스텀 데코레이터를 통해 함수의 동작을 쉽게 확장할 수 있습니다.

3. 커스텀 클래스 데코레이터 활용

클래스에 직접 적용할 수 있는 커스텀 데코레이터도 있습니다. 예를 들어, 클래스 생성 시 로그를 남기거나 특정 속성을 자동으로 할당하는 기능을 추가할 수 있습니다. 아래는 클래스 인스턴스 생성 시 로그를 기록하는 예제입니다:

function LogClassCreation(constructor: Function) {
    console.log(`Class ${constructor.name} is created.`);
}

@LogClassCreation
class User {
    constructor(public name: string) {}
}

이 예제에서 @LogClassCreation 데코레이터는 User 클래스가 생성될 때마다 로그를 남겨, 인스턴스 생성 여부를 쉽게 추적할 수 있도록 합니다. 이는 객체 초기화 과정을 효율적으로 관리하는 데 유용합니다.

4. 커스텀 데코레이터 실전 활용 사례

커스텀 데코레이터는 실제 프로젝트에서 인증, 권한 검사, 캐싱, 로깅 등 다양한 부가 기능을 코드에 쉽게 추가하는 용도로 많이 활용됩니다. 예를 들어, 특정 메서드에 접근 제한을 걸어 인증된 사용자만 접근하도록 할 때 아래와 같은 데코레이터를 사용할 수 있습니다:

function AuthRequired(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
        if (!this.isAuthenticated) {
            throw new Error("User is not authenticated");
        }
        return originalMethod.apply(this, args);
    };
    return descriptor;
}

class AdminService {
    isAuthenticated = true;

    @AuthRequired
    sensitiveOperation() {
        console.log("Sensitive operation executed.");
    }
}

이 데코레이터는 메서드 호출 시 isAuthenticated 속성을 검사하여 인증이 필요할 때 예외를 발생시키도록 설계되었습니다. 이처럼 커스텀 데코레이터를 사용하면 각 기능별로 모듈화 된 코드를 작성할 수 있어 코드의 가독성과 유지보수성을 높일 수 있습니다.

5. 커스텀 데코레이터 작성 시 유의사항

커스텀 데코레이터는 코드 확장에 매우 유용하지만, 남용 시 오히려 코드의 복잡성을 증가시킬 수 있습니다. 데코레이터는 가독성과 유지보수를 고려하여 필요한 부분에만 사용하는 것이 좋으며, 적절한 주석과 함께 사용하여 코드의 의도를 명확히 하는 것이 중요합니다.

가장 많이 찾는 글

타입스크립트로 코드 품질을 높이는 5가지 필수 팁

2024년 타입스크립트 vs 자바스크립트: 어떤 것이 더 유리한가?

타입스크립트의 미래: AI와 함께하는 새로운 개발 패러다임

결론

데코레이터를 활용하면 코드의 재사용성을 극대화하고 유지보수를 쉽게 할 수 있습니다. 다양한 설정과 예제를 통해 TypeScript의 데코레이터를 보다 적극적으로 활용하여 효율적인 개발 환경을 구축해 보세요.