이전 블로그에서 객체 생성 메커니즘을 다루는 다양한 창의적 디자인 패턴을 살펴봤습니다. 이제 객체와 클래스를 구성하여 유연성과 효율성을 유지하면서 더 큰 구조를 형성하는 방법에 초점을 맞춘 구조적 디자인 패턴을 살펴보겠습니다. 프록시 디자인 패턴부터 시작해 보겠습니다.

JavaScript의 프록시 디자인 패턴

프록시 디자인 패턴은 다른 객체를 나타내는 객체를 제공하는 구조적 디자인 패턴입니다. 원본 객체의 코드를 변경하지 않고 지연 초기화, 로깅, 액세스 제어 또는 캐싱과 같은 추가 동작을 추가하여 실제 객체에 대한 액세스를 제어하는 ​​중개자 역할을 합니다.

자바스크립트에서 프록시는 프록시 객체가 제공하는 내장 기능으로, 이를 통해 속성 액세스, 할당, 함수 호출 등과 같은 기본 작업에 대한 사용자 정의 동작을 정의할 수 있습니다.

언제 프록시 패턴이 필요합니까?

프록시 패턴은 다음과 같은 경우에 특히 유용합니다.

• 지연 초기화: 필요할 때까지 리소스가 많은 객체 생성을 지연하려고 합니다.
• 액세스 제어: 예를 들어 무단 액세스를 제한하거나 조건에 따라 작업을 제한하기 위해 객체에 대한 액세스를 제어해야 합니다.
• 로깅: 개체에 대한 작업(예: 속성 액세스 또는 메서드 호출)을 기록하려고 합니다.
• 캐싱: 중복 계산을 피하기 위해 비용이 많이 드는 작업의 결과를 캐시하려고 합니다.

프록시 패턴의 구성요소

1. 제목: 실제 객체와 프록시 모두에 대한 공통 작업을 정의하는 인터페이스입니다.
2. RealSubject: 실제 작업을 수행하는 실제 객체입니다.
3. 프록시: RealSubject에 대한 액세스를 제어하는 ​​중개자입니다.

유추:

손님에게 보여주고 싶은 큰 그림이 있는데 창고에서 꺼내는 데 시간이 많이 걸린다고 상상해 보세요. (무거워서 옮기는 데 시간이 걸리기 때문입니다.) 매번 기다리는 대신 그림의 작은 엽서 이미지를 사용하여 실제 그림을 가져오기를 기다리는 동안 신속하게 보여 주기로 결정했습니다.

이 비유에서:

• 큰 그림이 실물입니다. (이미지 로딩 시간이 오래 걸리는 것 같습니다.)
• 엽서는 프록시(실제 물체가 준비될 때까지 대기하는 경량 대체품)입니다.
• 실제 그림이 준비되면 손님에게 실제 그림을 보여줍니다.

실제 비유:

부동산 중개인을 대리인으로 생각해 보세요. 집을 사고 싶을 때 즉시 모든 집을 방문하지 않습니다(실물 로딩). 대신 부동산 중개업자(대리인)가 먼저 사진과 설명을 보여줍니다. 구매할 준비가 되었을 때만(즉, display()를 호출할 때) 에이전트가 집 방문을 주선합니다(실제 물건 로드).

실제 사례: 이미지 로딩(가상 프록시)

사용자가 요청할 때까지 이미지 로드를 지연하려는(지연 로드) 웹 애플리케이션의 이미지 로드 예를 사용해 보겠습니다. 프록시는 실제 이미지가 로드될 때까지 자리 표시자 역할을 할 수 있습니다.

JavaScript에서 프록시 디자인 패턴을 구현하는 방법은 다음과 같습니다.

예: 이미지 로딩을 위한 프록시

// Step 1: The real object
class RealImage {
  constructor(filename) {
    this.filename = filename;
    this.loadImageFromDisk();
  }

  loadImageFromDisk() {
    console.log(`Loading ${this.filename} from disk...`);
  }

  display() {
    console.log(`Displaying ${this.filename}`);
  }
}

// Step 2: The proxy object
class ProxyImage {
  constructor(filename) {
    this.realImage = null; // no real image yet
    this.filename = filename;
  }

  display() {
    if (this.realImage === null) {
      // load the real image only when needed
      this.realImage = new RealImage(this.filename);
    }
    this.realImage.display(); // display the real image
  }
}

// Step 3: Using the proxy to display the image
const image = new ProxyImage("photo.jpg");
image.display(); // Loads and displays the image
image.display(); // Just displays the image (already loaded)

설명:

1). 실제 이미지:

• RealImage 클래스는 실제 이미지를 나타냅니다.
• 파일 이름을 입력으로 사용하고 디스크에서 이미지를 로드하는 데 시간이 많이 걸리는 프로세스를 시뮬레이션합니다(loadImageFromDisk메소드에서 표시).
• 로드되면 표시 방법을 사용하여 이미지를 표시합니다.

2). 프록시 이미지:

• ProxyImage 클래스는 RealImage의 대체 역할을 합니다. 실제 이미지가 바로 로딩되지는 않습니다.
• 실제 이미지에 대한 참조를 보유합니다(그러나 실제 이미지가 아직 로드되지 않았기 때문에 처음에는 null입니다).
• 프록시에서 디스플레이 메소드를 호출하면 실제 이미지가 로드되었는지 확인합니다. 그렇지 않은 경우 먼저 로드한 다음 표시합니다.

3). 용법:

• ProxyImage 인스턴스를 생성할 때 실제 이미지는 아직 로드되지 않습니다(리소스를 많이 사용하기 때문).
• display가 처음 호출되면 프록시는 RealImage 클래스를 사용하여 이미지를 로드한 다음 표시합니다.
• 두 번째로 디스플레이를 호출하면 실제 이미지가 이미 로딩되어 있어서 다시 로딩하지 않고 이미지만 출력하게 됩니다.

내장 프록시 객체

ES6 프록시는 대상 및 핸들러를 인수로 받아들이는 프록시 생성자로 구성됩니다.

const proxy = new Proxy(target, handler)

여기서 target은 프록시가 적용되는 개체를 나타내고, handler는 프록시의 동작을 정의하는 특수 개체를 나타냅니다.

핸들러 개체에는 프록시 인스턴스에서 해당 작업이 수행될 때 자동으로 호출되는 트랩 메서드(예: Apply, get, set 및 has)라는 이름이 미리 정의된 일련의 선택적 메서드가 포함되어 있습니다.

내장된 프록시를 사용하여 계산기를 구현하여 이해해 보겠습니다.

// Step 1: Define the Calculator class with prototype methods
class Calculator {
  constructor() {
    this.result = 0;
  }

  // Prototype method to add numbers
  add(a, b) {
    this.result = a   b;
    return this.result;
  }

  // Prototype method to subtract numbers
  subtract(a, b) {
    this.result = a - b;
    return this.result;
  }

  // Prototype method to multiply numbers
  multiply(a, b) {
    this.result = a * b;
    return this.result;
  }

  // Prototype method to divide numbers
  divide(a, b) {
    if (b === 0) throw new Error("Division by zero is not allowed.");
    this.result = a / b;
    return this.result;
  }
}

// Step 2: Create a proxy handler to intercept operations
const handler = {
  // Intercept 'get' operations to ensure access to prototype methods
  get(target, prop, receiver) {
    if (prop in target) {
      console.log(`Accessing property: ${prop}`);
      return Reflect.get(target, prop, receiver); // Access property safely
    } else {
      throw new Error(`Property "${prop}" does not exist.`);
    }
  },

  // Intercept 'set' operations to prevent mutation
  set(target, prop, value) {
    throw new Error(`Cannot modify property "${prop}". The calculator is immutable.`);
  }
};

// Step 3: Create a proxy instance that inherits the Calculator prototype
const calculator = new Calculator(); // Original calculator object
const proxiedCalculator = new Proxy(calculator, handler); // Proxy wrapping the calculator

// Step 4: Use the proxy instance
try {
  console.log(proxiedCalculator.add(5, 3)); // Output: 8
  console.log(proxiedCalculator.multiply(4, 2)); // Output: 8
  console.log(proxiedCalculator.divide(10, 2)); // Output: 5

  // Attempt to access prototype directly through proxy
  console.log(proxiedCalculator.__proto__ === Calculator.prototype); // Output: true

  // Attempt to modify a property (should throw an error)
  proxiedCalculator.result = 100; // Error: Cannot modify property "result".
} catch (error) {
  console.error(error.message); // Output: Cannot modify property "result". The calculator is immutable.
}

이 방법으로 프록시를 사용하는 가장 좋은 부분은 다음과 같습니다.

• 프록시 객체는 원래 Calculator 클래스의 프로토타입을 상속합니다.
• 프록시의 설정된 트랩을 통해 돌연변이를 방지합니다.

코드 설명

1). 프로토타입 상속:

• 프록시는 **계산기 **클래스의 원래 프로토타입을 방해하지 않습니다.
• 이는 proxiedCalculator.proto === Calculator.prototype인지 확인하여 확인됩니다. 결과는 true입니다.

2). getOperations 처리:

• get 트랩은 프록시 객체의 속성 액세스를 가로챕니다.
• Reflect.get을 사용하여 원본 객체의 속성과 메서드에 안전하게 액세스합니다.

3). 변이 방지:

설정 트랩은 대상 객체의 속성을 수정하려고 할 때마다 오류를 발생시킵니다. 이는 불변성을 보장합니다.

4). 프록시를 통해 프로토타입 방법 사용:

프록시를 사용하면 원본 개체의 프로토타입에 정의된 더하기, 빼기, 곱하기, 나누기와 같은 메서드에 액세스할 수 있습니다.

여기서 관찰해야 할 핵심 사항은 다음과 같습니다.

• 프로토타입 상속 유지: 프록시는 모든 프로토타입 메소드에 대한 액세스를 유지하므로 원래 계산기처럼 작동합니다.
• 변이 방지: 설정된 트랩은 계산기 개체의 내부 상태가 예기치 않게 변경될 수 없도록 보장합니다.
• 속성 및 메서드에 대한 안전한 액세스: get 트랩은 유효한 속성에만 액세스하도록 보장하여 견고성을 향상시킵니다.

여기까지 오셨다면 좋아요를 누르시고 질문이나 생각이 있으시면 아래에 댓글을 남겨주세요. 귀하의 피드백은 저에게 큰 의미가 있으며 귀하의 의견을 듣고 싶습니다!