Proxy 패턴

JavaScript의 Proxy 패턴은 객체를 감싸는 래퍼(wrapper)로서 동작하며, 객체에 대한 간접적인 접근과 제어를 제공합니다. Proxy는 객체의 동작을 가로채고, 해당 동작을 변경하거나 확장할 수 있는 기능을 제공합니다. 이를 통해 객체의 프로퍼티에 접근, 할당, 삭제 등의 동작을 제어할 수 있습니다.

Proxy 패턴을 사용하여 다양한 작업을 수행할 수 있으며, 주요 기능은 다음과 같습니다:

1. 프로퍼티 접근 제어: Proxy를 사용하여 객체의 프로퍼티 접근을 제어할 수 있습니다. 프로퍼티에 접근할 때 특정 동작을 추가하거나 가로챌 수 있습니다. 예를 들어, 특정 프로퍼티에 접근할 때 로깅을 추가하거나, 읽기 전용 프로퍼티로 설정할 수 있습니다.
2. 프로퍼티 할당 및 삭제 제어: Proxy를 사용하여 객체의 프로퍼티 할당 및 삭제 동작을 제어할 수 있습니다. 특정 프로퍼티에 대한 할당을 제한하거나 삭제를 방지하는 등의 동작을 추가할 수 있습니다.
3. 함수 호출 제어: Proxy를 사용하여 객체의 메소드 호출을 가로챌 수 있습니다. 함수 호출 전후에 특정 동작을 수행하거나, 함수 인자를 조작하거나, 함수 반환값을 변환하는 등의 동작을 추가할 수 있습니다.

Proxy 패턴은 다음과 같이 사용할 수 있습니다:

const target = {
  name: 'Alice',
  age: 30
};

const handler = {
  get: function(target, prop) {
    console.log(`Accessing property: ${prop}`);
    return target[prop];
  },
  set: function(target, prop, value) {
    console.log(`Setting property: ${prop} = ${value}`);
    target[prop] = value;
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // Accessing property: name, Alice
proxy.age = 31; // Setting property: age = 31
console.log(proxy.age); // Accessing property: age, 31

위 예제에서 target 객체를 proxy로 감싸는 Proxy를 생성하고, handler 객체에 감시할 동작을 정의합니다. get 메소드는 프로퍼티에 접근할 때의 동작을 정의하고, set 메소드는 프로퍼티에 값을 할당할 때의 동작을 정의합니다. 이후 proxy 객체를 통해 프로퍼티에 접근하고 값을 할당할 때 정의한 동작이 수행됩니다.

function fetchDataFromServer() {
  // 실제로 서버에서 데이터를 가져오는 비용이 큰 작업
  console.log('Fetching data from server...');
  // 예시로 정적 데이터를 반환합니다.
  return { data: 'Server data' };
}

const createDataProxy = () => {
  let cachedData = null;

  return new Proxy({}, {
    get: function(target, prop) {
      if (prop === 'data') {
        if (!cachedData) {
          cachedData = fetchDataFromServer();
        }
        console.log('Retrieving data from cache...');
        return cachedData.data;
      }
    },
    set: function(target, prop, value) {
      if (prop === 'data') {
        console.log('Updating cache with new data...');
        cachedData = { data: value };
      }
    }
  });
};

const dataProxy = createDataProxy();

console.log(dataProxy.data); // Fetching data from server...
// 서버에서 데이터를 가져와서 캐시에 저장하고 반환합니다.
console.log(dataProxy.data); // Retrieving data from cache... Server data

// 데이터 변경 시 캐시를 업데이트합니다.
dataProxy.data = 'Updated data';
console.log(dataProxy.data); // Retrieving data from cache... Updated data

위의 예제에서 createDataProxy 함수는 Proxy를 생성하고 반환합니다. 이 Proxy는 데이터를 가져오는 작업을 캐싱하여 동일한 요청에 대해 서버에 접근하는 횟수를 줄입니다.

get 핸들러에서 data 프로퍼티에 접근하면, 캐시된 데이터를 반환하고 캐시가 없을 경우 서버에서 데이터를 가져와서 캐시에 저장합니다.

set 핸들러에서 data 프로퍼티에 값을 할당하면, 캐시를 업데이트합니다.

이를 통해 첫 번째 데이터 접근에서는 서버에서 데이터를 가져오지만, 이후에는 캐시된 데이터를 사용하여 서버에 접근하지 않고 데이터를 반환합니다. 데이터가 변경되면 캐시도 업데이트되어 다음 접근에 반영됩니다.

실제로는 데이터를 서버에서 가져오는 대신 비동기 작업이나 복잡한 로직을 수행할 때 Proxy를 사용하여 캐싱, 유효성 검사, 로깅 등 다양한 동작을 추가할 수 있습니다.