자바스크립트 프록시 패턴: 객체 동작 변경 마스터하기

자바스크립트 프록시(Proxy) 객체는 객체에 대한 기본 작업을 가로채고 사용자 정의할 수 있는 강력한 메커니즘을 제공합니다. 이 기능은 객체 동작을 제어하기 위한 광범위한 디자인 패턴과 고급 기술의 문을 열어줍니다. 이 종합 가이드에서는 다양한 프록시 패턴을 살펴보고 실제 코드 예제를 통해 그 사용법을 설명합니다.

자바스크립트 프록시란 무엇인가?

프록시 객체는 다른 객체(대상)를 감싸고 그 연산을 가로챕니다. 트랩(trap)이라고 알려진 이러한 연산에는 속성 조회, 할당, 열거, 함수 호출 등이 포함됩니다. 프록시를 사용하면 이러한 작업 전, 후 또는 대신에 실행될 사용자 정의 로직을 정의할 수 있습니다. 프록시의 핵심 개념은 자바스크립트 언어 자체의 동작을 조작할 수 있게 해주는 "메타프로그래밍"을 포함합니다.

프록시를 생성하는 기본 구문은 다음과 같습니다:

const proxy = new Proxy(target, handler);

• target: 프록시할 원본 객체입니다.
• handler: 프록시가 대상에 대한 작업을 가로채는 방법을 정의하는 메서드(트랩)를 포함하는 객체입니다.

일반적인 프록시 트랩

핸들러 객체는 여러 트랩을 정의할 수 있습니다. 다음은 가장 일반적으로 사용되는 몇 가지 트랩입니다:

• get(target, property, receiver): 속성 접근을 가로챕니다 (예: obj.property).
• set(target, property, value, receiver): 속성 할당을 가로챕니다 (예: obj.property = value).
• has(target, property): in 연산자를 가로챕니다 (예: 'property' in obj).
• deleteProperty(target, property): delete 연산자를 가로챕니다 (예: delete obj.property).
• apply(target, thisArg, argumentsList): 함수 호출을 가로챕니다 (대상이 함수일 경우).
• construct(target, argumentsList, newTarget): new 연산자를 가로챕니다 (대상이 생성자 함수일 경우).
• getPrototypeOf(target): Object.getPrototypeOf() 호출을 가로챕니다.
• setPrototypeOf(target, prototype): Object.setPrototypeOf() 호출을 가로챕니다.
• isExtensible(target): Object.isExtensible() 호출을 가로챕니다.
• preventExtensions(target): Object.preventExtensions() 호출을 가로챕니다.
• getOwnPropertyDescriptor(target, property): Object.getOwnPropertyDescriptor() 호출을 가로챕니다.
• defineProperty(target, property, descriptor): Object.defineProperty() 호출을 가로챕니다.
• ownKeys(target): Object.getOwnPropertyNames() 및 Object.getOwnPropertySymbols() 호출을 가로챕니다.

프록시 패턴 및 사용 사례

몇 가지 일반적인 프록시 패턴과 실제 시나리오에서 어떻게 적용될 수 있는지 살펴보겠습니다:

1. 유효성 검사

유효성 검사 패턴은 프록시를 사용하여 속성 할당에 대한 제약 조건을 강제합니다. 이는 데이터 무결성을 보장하는 데 유용합니다.

const validator = {
  set: function(obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('Age is not an integer');
      }
      if (value < 0) {
        throw new RangeError('Age must be a non-negative integer');
      }
    }

    // The default behavior to store the value
    obj[prop] = value;

    // Indicate success
    return true;
  }
};

let person = {};
let proxy = new Proxy(person, validator);

proxy.age = 25; // Valid
console.log(proxy.age); // Output: 25

try {
  proxy.age = 'young'; // Throws TypeError
} catch (e) {
  console.log(e); // Output: TypeError: Age is not an integer
}

try {
  proxy.age = -10; // Throws RangeError
} catch (e) {
  console.log(e); // Output: RangeError: Age must be a non-negative integer
}

예시: 사용자 데이터 유효성 검사가 필요한 전자 상거래 플랫폼을 생각해 보세요. 프록시는 나이, 이메일 형식, 비밀번호 강도 및 기타 필드에 대한 규칙을 강제하여 유효하지 않은 데이터가 저장되는 것을 방지할 수 있습니다.

2. 가상화 (지연 로딩)

지연 로딩(lazy loading)이라고도 알려진 가상화는 비용이 많이 드는 리소스의 로딩을 실제로 필요할 때까지 지연시킵니다. 프록시는 실제 객체에 대한 플레이스홀더 역할을 하여 속성에 접근할 때만 로딩할 수 있습니다.

const expensiveData = {
  load: function() {
    console.log('Loading expensive data...');
    // Simulate a time-consuming operation (e.g., fetching from a database)
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({
          data: 'This is the expensive data'
        });
      }, 2000);
    });
  }
};

const lazyLoadHandler = {
  get: function(target, prop) {
    if (prop === 'data') {
      console.log('Accessing data, loading it if necessary...');
      return target.load().then(result => {
        target.data = result.data; // Store the loaded data
        return result.data;
      });
    } else {
      return target[prop];
    }
  }
};

const lazyData = new Proxy(expensiveData, lazyLoadHandler);

console.log('Initial access...');
lazyData.data.then(data => {
  console.log('Data:', data); // Output: Data: This is the expensive data
});

console.log('Subsequent access...');
lazyData.data.then(data => {
  console.log('Data:', data); // Output: Data: This is the expensive data (loaded from cache)
});

예시: 수많은 세부 정보와 관련 미디어를 포함하는 사용자 프로필이 있는 대규모 소셜 미디어 플랫폼을 상상해 보세요. 모든 프로필 데이터를 즉시 로딩하는 것은 비효율적일 수 있습니다. 프록시를 사용한 가상화를 통해 기본 프로필 정보를 먼저 로딩하고, 사용자가 해당 섹션으로 이동할 때만 추가 세부 정보나 미디어 콘텐츠를 로딩할 수 있습니다.

3. 로깅 및 추적

프록시는 속성 접근 및 수정을 추적하는 데 사용될 수 있습니다. 이는 디버깅, 감사 및 성능 모니터링에 유용합니다.

const logHandler = {
  get: function(target, prop, receiver) {
    console.log(`GET ${prop}`);
    return Reflect.get(target, prop, receiver);
  },
  set: function(target, prop, value) {
    console.log(`SET ${prop} to ${value}`);
    target[prop] = value;
    return true;
  }
};

let obj = { name: 'Alice' };
let proxy = new Proxy(obj, logHandler);

console.log(proxy.name); // Output: GET name, Alice
proxy.age = 30; // Output: SET age to 30

예시: 공동 문서 편집 애플리케이션에서 프록시는 문서 내용에 대한 모든 변경 사항을 추적할 수 있습니다. 이를 통해 감사 추적을 생성하고, 실행 취소/다시 실행 기능을 활성화하며, 사용자 기여도에 대한 통찰력을 제공할 수 있습니다.

4. 읽기 전용 뷰

프록시는 객체의 읽기 전용 뷰를 생성하여 우발적인 수정을 방지할 수 있습니다. 이는 민감한 데이터를 보호하는 데 유용합니다.

const readOnlyHandler = {
  set: function(target, prop, value) {
    console.error(`Cannot set property ${prop}: object is read-only`);
    return false; // Indicate that the set operation failed
  },
  deleteProperty: function(target, prop) {
    console.error(`Cannot delete property ${prop}: object is read-only`);
    return false; // Indicate that the delete operation failed
  }
};

let data = { name: 'Bob', age: 40 };
let readOnlyData = new Proxy(data, readOnlyHandler);

try {
  readOnlyData.age = 41; // Throws an error
} catch (e) {
  console.log(e); // No error thrown because the 'set' trap returns false.
}

try {
    delete readOnlyData.name; // Throws an error
} catch (e) {
    console.log(e); // No error thrown because the 'deleteProperty' trap returns false.
}

console.log(data.age); // Output: 40 (unchanged)

예시: 일부 사용자가 계좌 정보에 대한 읽기 전용 접근 권한을 갖는 금융 시스템을 생각해 보세요. 프록시를 사용하여 이러한 사용자가 계좌 잔액이나 기타 중요한 데이터를 수정하는 것을 방지할 수 있습니다.

5. 기본값

프록시는 누락된 속성에 대해 기본값을 제공할 수 있습니다. 이는 코드를 단순화하고 null/undefined 검사를 피하게 해줍니다.

const defaultValuesHandler = {
  get: function(target, prop, receiver) {
    if (!(prop in target)) {
      console.log(`Property ${prop} not found, returning default value.`);
      return 'Default Value'; // Or any other appropriate default
    }
    return Reflect.get(target, prop, receiver);
  }
};

let config = { apiUrl: 'https://api.example.com' };
let configWithDefaults = new Proxy(config, defaultValuesHandler);

console.log(configWithDefaults.apiUrl); // Output: https://api.example.com
console.log(configWithDefaults.timeout); // Output: Property timeout not found, returning default value. Default Value

예시: 구성 관리 시스템에서 프록시는 누락된 설정에 대한 기본값을 제공할 수 있습니다. 예를 들어, 구성 파일에 데이터베이스 연결 시간 초과가 지정되지 않은 경우 프록시는 미리 정의된 기본값을 반환할 수 있습니다.

6. 메타데이터 및 어노테이션

프록시는 원본 객체를 수정하지 않고도 추가 정보를 제공하는 메타데이터나 어노테이션을 객체에 첨부할 수 있습니다.

const metadataHandler = {
  get: function(target, prop, receiver) {
    if (prop === '__metadata__') {
      return { description: 'This is metadata for the object' };
    }
    return Reflect.get(target, prop, receiver);
  }
};

let article = { title: 'Introduction to Proxies', content: '...' };
let articleWithMetadata = new Proxy(article, metadataHandler);

console.log(articleWithMetadata.title); // Output: Introduction to Proxies
console.log(articleWithMetadata.__metadata__.description); // Output: This is metadata for the object

예시: 콘텐츠 관리 시스템에서 프록시는 기사에 작성자 정보, 발행일, 키워드와 같은 메타데이터를 첨부할 수 있습니다. 이 메타데이터는 콘텐츠 검색, 필터링 및 분류에 사용될 수 있습니다.

7. 함수 가로채기

프록시는 함수 호출을 가로챌 수 있어 로깅, 유효성 검사 또는 기타 전처리/후처리 로직을 추가할 수 있습니다.

const functionInterceptor = {
  apply: function(target, thisArg, argumentsList) {
    console.log('Calling function with arguments:', argumentsList);
    const result = target.apply(thisArg, argumentsList);
    console.log('Function returned:', result);
    return result;
  }
};

function add(a, b) {
  return a + b;
}

let proxiedAdd = new Proxy(add, functionInterceptor);

let sum = proxiedAdd(5, 3); // Output: Calling function with arguments: [5, 3], Function returned: 8
console.log(sum); // Output: 8

예시: 은행 애플리케이션에서 프록시는 거래 함수 호출을 가로채 각 거래를 기록하고 거래를 실행하기 전에 사기 탐지 검사를 수행할 수 있습니다.

8. 생성자 가로채기

프록시는 생성자 호출을 가로챌 수 있어 객체 생성을 사용자 정의할 수 있습니다.

const constructorInterceptor = {
  construct: function(target, argumentsList, newTarget) {
    console.log('Creating a new instance of', target.name, 'with arguments:', argumentsList);
    const obj = new target(...argumentsList);
    console.log('New instance created:', obj);
    return obj;
  }
};

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

let ProxiedPerson = new Proxy(Person, constructorInterceptor);

let person = new ProxiedPerson('Alice', 28); // Output: Creating a new instance of Person with arguments: ['Alice', 28], New instance created: Person { name: 'Alice', age: 28 }
console.log(person);

예시: 게임 개발 프레임워크에서 프록시는 게임 객체 생성을 가로채 고유 ID를 자동으로 할당하고, 기본 구성 요소를 추가하며, 게임 엔진에 등록할 수 있습니다.

고급 고려 사항

• 성능: 프록시는 유연성을 제공하지만 성능 오버헤드를 유발할 수 있습니다. 특히 성능이 중요한 애플리케이션에서는 프록시 사용의 이점이 성능 비용을 상회하는지 확인하기 위해 코드를 벤치마킹하고 프로파일링하는 것이 중요합니다.
• 호환성: 프록시는 자바스크립트에 비교적 최근에 추가되었으므로 이전 버전의 브라우저에서는 지원하지 않을 수 있습니다. 이전 환경과의 호환성을 보장하기 위해 기능 감지 또는 폴리필을 사용하세요.
• 취소 가능한 프록시: Proxy.revocable() 메서드는 취소할 수 있는 프록시를 생성합니다. 프록시를 취소하면 더 이상 작업이 가로채지지 않습니다. 이는 보안 또는 리소스 관리 목적에 유용할 수 있습니다.
• Reflect API: Reflect API는 프록시 트랩의 기본 동작을 수행하는 메서드를 제공합니다. Reflect를 사용하면 프록시 코드가 언어 사양과 일관되게 동작하도록 보장할 수 있습니다.

결론

자바스크립트 프록시는 객체 동작을 사용자 정의하기 위한 강력하고 다재다능한 메커니즘을 제공합니다. 다양한 프록시 패턴을 마스터함으로써 더 견고하고 유지보수하기 쉬우며 효율적인 코드를 작성할 수 있습니다. 유효성 검사, 가상화, 추적 또는 기타 고급 기술을 구현하든, 프록시는 객체 접근 및 조작 방법을 제어하기 위한 유연한 솔루션을 제공합니다. 항상 성능 영향을 고려하고 대상 환경과의 호환성을 확인하세요. 프록시는 현대 자바스크립트 개발자의 무기고에서 강력한 메타프로그래밍 기술을 가능하게 하는 핵심 도구입니다.

더 알아보기

• Mozilla Developer Network (MDN): 자바스크립트 프록시
• Exploring JavaScript Proxies: Smashing Magazine 기사