[Angular] 자바스크립트 데코레이터 (JavaScript Decorator)

■ Desscriptor(설명자/속성 설명자)

Object.getOwnPropertyDescriptor( )

 

1. 정의

[1] 자바스크립트 객체의 프로퍼티로 프로퍼티가 쓰기(writable) 가능한지 열거(enumerable) 가능한지 여부를 나타낸다.

[2] 자바스크립트의 객체는 속성이 있고, 각 속성은 값을 가지고 있다. 그러나 각 속성은 값 외에도 화면 밖에 숨겨진 정보들이 있는데, 이런 정보들이 각 속성이 어떻게 작동할지를 정의한다. 이것을 속성 설명자라고 한다.

 

2. 특징

- writable은 객체의 프로퍼티가 쓰기 가능한 지의 여부이며, false일 경우, 값 쓰기가 안 된다.

- enumerable은 객체의 프로퍼티가 열거 가능한 지의 여부이며, false일 경우, Object.keys에서 해당 프로퍼티를 볼 수 없다.

- configurable은 객체의 프로퍼티가 defineProperty를 통해 설정 될 수 있는 지의 여부이며, false일 경우, Object.defineProperty로 해당 프로퍼티를 수정할 수 없다.

 

3. 구문

Object.getOwnPropertyDescriptor(obj, prop)

 

인자

1. obj : 속성을 찾을 대상 객체

2. prop : 설명이 검색될 속성명

 

---

 

■ Decorator(장식자)

 

1. 정의

[1] ES6부터 자바스크립트에 데코레이터 문법이 추가되었다. 데코레이터 함수는 그 이름처럼, 다른 객체를 꾸며주는 역할을 하는 함수로, 클래스 프로퍼티(혹은 메서드)를 인자로 받아 이를 수정/확장하는 함수이다.

 

[2] 함수가 실행 되기 전에 반복적으로 선행되어야 할 명령을 별도의 함수로 구현한 뒤 이를 한줄의 명령어로 쉽게 호출하는 방법이다.
일반적으로 @Decorator와 같이 앞에 @을 붙여서 호출하며, 클래스, 함수, 변수, 심지어 함수의 파라미터에도 적용할 수 있으나 각각의 적용하는 파라미터가 다르므로 유의하여야 한다.

 

※ 자바스크립트의 데코레이터는 ES6에 새롭게 추가된 문법으로 아직 자바스크립트에서 정식 지원하고 있지는 않다. 따라서, 데코레이터를 사용하기 위해서는 babel을 설치하여 트랜스파일링을 거친 코드를 실행해야 한다.

 

2. 특징

1. 새 함수를 반환하여 전달 된 함수 또는 메서드의 동작을 수정하는 함수이다.

2. 함수를 일급 시민(객체)으로서의 기능을 지원하는 모든 언어는 데코레이터를 구현할 수 있다(예를 들어, 자바스크립트는 함수를 변수에 할당하거나 다른 함수에 인자로 전달할 수 있다). 이런 언어 중 일부에는 데코레이터를 정의하고 사용하기 위한 특수한 구문(Syntactic sugar)이 있다.

3. 문법은 @decoratorFunction과 같으며 클래스의 프로퍼티, 메소드, 클래스 자신의 바로 윗줄에 추가해준다.

4. 장식자는 장식자가 적용된 메소드가 호출되거나, 클래스 인스턴스가 만들어지는 등 런타임에 실행된다.

 

https://velog.io/@koo8624/Javascript-Decorator

https://wonism.github.io/what-is-decorator/

https://ui.toast.com/weekly-pick/ko_20200102

 

3. 작성 방법

JS 데코레이터 함수에는 세 가지 인자가 전달된다.

 

- target은 현재 인스턴스 객체의 클래스이다.
- key는 데코레이터를 적용할 속성 이름이다(문자열).
- descriptor는 해당 속성의 설명자 객체이다.

 

function readOnly(target, key, descriptor) {
  return {
    ...descriptor,
    writable: false,
  };
}

class Oatmeal extends Porridge {
  @readOnly viscosity = 20;
  // (@readOnly를 속성 바로 윗 줄에 적어도 된다.)

  constructor(flavor) {
    super();
    this.flavor = flavor;
  }
}

 

4. @Decorator 종류

1. Class Decorator

2. Method Decorator

3. Parameter Decorator

4. Variable Decorator

 

https://ksrae.github.io/javascript/decorator/