자바스크립트 데코레이터 완벽 가이드: 개념부터 실전까지

자바스크립트의 데코레이터는 코드의 가독성과 재사용성을 높이는 강력한 도구입니다. 이번 글에서는 데코레이터의 개념부터 실제 활용 사례까지 깊이 있게 탐구해보겠습니다.

목차

1. 데코레이터란 무엇인가?
2. 자바스크립트에서의 데코레이터
3. 데코레이터의 실제 활용 사례
4. 데코레이터 사용 시 주의사항
5. 마무리

데코레이터란 무엇인가?

데코레이터는 함수나 메서드의 동작을 수정하거나 확장하기 위해 사용되는 함수입니다. 이는 고차 함수(Higher-Order Function)의 한 형태로, 하나의 함수를 입력으로 받아 새로운 함수를 반환합니다.

파이썬에서의 예시:

def emphasize(func):
    def wrapper():
        print("!!!")
        func()
        print("!!!")
    return wrapper

@emphasize
def greet():
    print("Hello, World!")

greet()

위 코드에서 emphasize 함수는 데코레이터로서 greet 함수의 동작을 감싸고, 실행 전후에 "!!!"를 출력합니다.

자바스크립트에서의 데코레이터

자바스크립트에서도 데코레이터를 사용할 수 있지만, 현재(2025년 기준) 공식 표준으로 채택되지 않았습니다. 그러나 Babel과 같은 트랜스파일러를 통해 데코레이터를 사용할 수 있습니다.

자바스크립트 데코레이터의 구조:

function decorator(target, key, descriptor) {
    // 데코레이터 로직
    return descriptor;
}

• target: 데코레이터가 적용된 객체
• key: 데코레이터가 적용된 속성명
• descriptor: 속성의 설명자(Property Descriptor)

예시: 메서드의 실행 시간을 측정하는 데코레이터

function logExecutionTime(target, key, descriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function(...args) {
        const start = Date.now();
        const result = originalMethod.apply(this, args);
        const end = Date.now();
        console.log(`${key} 실행 시간: ${end - start}ms`);
        return result;
    };

    return descriptor;
}

class Example {
    @logExecutionTime
    compute() {
        // 복잡한 계산 로직
    }
}

위 예시에서 logExecutionTime 데코레이터는 compute 메서드의 실행 시간을 측정하여 로그로 출력합니다.

데코레이터의 실제 활용 사례

1. 메서드 로깅

   메서드의 호출 여부, 인자, 반환값 등을 로깅하여 디버깅에 활용할 수 있습니다.

   function logMethod(target, key, descriptor) {
       const originalMethod = descriptor.value;
   
       descriptor.value = function(...args) {
           console.log(`Calling ${key} with`, args);
           const result = originalMethod.apply(this, args);
           console.log(`${key} returned`, result);
           return result;
       };
   
       return descriptor;
   }
   
   class MathOperations {
       @logMethod
       add(a, b) {
           return a + b;
       }
   }

2. 권한 검사

   특정 메서드가 호출되기 전에 사용자 권한을 검사할 수 있습니다.

   function requireRole(role) {
       return function(target, key, descriptor) {
           const originalMethod = descriptor.value;
   
           descriptor.value = function(...args) {
               if (this.userRole !== role) {
                   throw new Error('권한이 없습니다.');
               }
               return originalMethod.apply(this, args);
           };
   
           return descriptor;
       };
   }
   
   class UserService {
       constructor(userRole) {
           this.userRole = userRole;
       }
   
       @requireRole('admin')
       deleteUser(userId) {
           // 사용자 삭제 로직
       }
   }

3. 캐싱

   메서드의 결과를 캐싱하여 성능을 향상시킬 수 있습니다.

   function memoize(target, key, descriptor) {
       const originalMethod = descriptor.value;
       const cache = new Map();
   
       descriptor.value = function(...args) {
           const key = JSON.stringify(args);
           if (cache.has(key)) {
               return cache.get(key);
           }
           const result = originalMethod.apply(this, args);
           cache.set(key, result);
           return result;
       };
   
       return descriptor;
   }
   
   class Fibonacci {
       @memoize
       calculate(n) {
           if (n <= 1) return n;
           return this.calculate(n - 1) + this.calculate(n - 2);
       }
   }

데코레이터 사용 시 주의사항

• 표준화 상태: 데코레이터는 아직 ECMAScript의 공식 기능이 아니므로, 사용 시 주의가 필요합니다. 최신 정보는 TC39 프로세스를 참고하세요.

• 트랜스파일러 의존성: Babel과 같은 트랜스파일러를 사용하여 데코레이터를 적용할 수 있지만, 설정과 호환성에 주의해야 합니다.

• 디버깅 복잡성: 데코레이터는 코드의 흐름을 변경하므로, 디버깅 시 예상치 못한 동작을 유발할 수 있습니다.

마무리

자바스크립트의 데코레이터는 코드의 모듈화와 재사용성을 높이는 강력한 도구입니다. 그러나 현재 표준화되지 않았으며, 사용 시 주의가 필요합니다. 프로젝트의 요구 사항과 환경에 맞게 데코레이터를 활용하여 코드의 품질을 향상시켜보세요.