JavaScript Proxy API: 객체 동작 수정에 대한 심층 분석

현대 JavaScript의 진화하는 환경에서 개발자는 데이터를 관리하고 상호 작용할 수 있는 더 강력하고 우아한 방법을 끊임없이 모색하고 있습니다. 클래스, 모듈 및 async/await와 같은 기능이 코드 작성 방식을 혁신했지만, ECMAScript 2015(ES6)에 도입된 강력한 메타프로그래밍 기능인 Proxy API는 종종 제대로 활용되지 않고 있습니다.

메타프로그래밍은 다소 위협적으로 들릴 수 있지만, 단순히 다른 코드에서 작동하는 코드를 작성하는 개념입니다. Proxy API는 이를 위한 JavaScript의 기본 도구이며, 다른 객체에 대한 '프록시'를 생성하여 해당 객체에 대한 기본적인 작업을 가로채고 재정의할 수 있습니다. 객체 앞에 사용자 정의 가능한 게이트키퍼를 배치하여 객체에 액세스하고 수정하는 방법을 완벽하게 제어할 수 있는 것과 같습니다.

이 종합 가이드는 Proxy API의 신비를 벗겨낼 것입니다. 핵심 개념을 살펴보고, 실제 예제를 통해 다양한 기능을 분석하고, 고급 사용 사례 및 성능 고려 사항에 대해 논의합니다. 마지막에는 프록시가 현대 프레임워크의 초석인 이유와 프록시를 활용하여 더 깔끔하고 강력하며 유지 관리하기 쉬운 코드를 작성하는 방법을 이해하게 될 것입니다.

핵심 개념 이해: 타겟, 핸들러 및 트랩

Proxy API는 세 가지 기본 구성 요소를 기반으로 구축되었습니다. 이들의 역할을 이해하는 것이 프록시를 마스터하는 열쇠입니다.

• 타겟: 래핑하려는 원본 객체입니다. 배열, 함수 또는 다른 프록시를 포함하여 모든 종류의 객체가 될 수 있습니다. 프록시는 이 타겟을 가상화하고 모든 작업은 궁극적으로 (반드시 그런 것은 아니지만) 타겟으로 전달됩니다.
• 핸들러: 프록시에 대한 로직을 포함하는 객체입니다. 속성이 '트랩'으로 알려진 함수인 자리 표시자 객체입니다. 프록시에서 작업이 발생하면 핸들러에서 해당 트랩을 찾습니다.
• 트랩: 속성 액세스를 제공하는 핸들러의 메서드입니다. 각 트랩은 기본적인 객체 작업에 해당합니다. 예를 들어 get 트랩은 속성 읽기를 가로채고 set 트랩은 속성 쓰기를 가로챕니다. 핸들러에 트랩이 정의되어 있지 않으면 프록시가 없는 것처럼 작업이 타겟으로 전달됩니다.

프록시를 생성하는 구문은 간단합니다.

const proxy = new Proxy(target, handler);

아주 기본적인 예를 살펴보겠습니다. 빈 핸들러를 사용하여 모든 작업을 타겟 객체에 전달하는 프록시를 만듭니다.

// 원본 객체
const target = {
  message: "Hello, World!"
};

// 빈 핸들러. 모든 작업이 타겟으로 전달됩니다.
const handler = {};

// 프록시 객체
const proxy = new Proxy(target, handler);

// 프록시에서 속성에 액세스
console.log(proxy.message); // 출력: Hello, World!

// 작업이 타겟으로 전달됨
console.log(target.message); // 출력: Hello, World!

// 프록시를 통해 속성 수정
proxy.anotherMessage = "Hello, Proxy!";

console.log(proxy.anotherMessage); // 출력: Hello, Proxy!
console.log(target.anotherMessage); // 출력: Hello, Proxy!

이 예에서 프록시는 원본 객체와 정확히 동일하게 동작합니다. 핸들러에서 트랩을 정의하기 시작할 때 실제 힘이 발휘됩니다.

프록시의 구조: 일반적인 트랩 탐색

핸들러 객체는 최대 13개의 서로 다른 트랩을 포함할 수 있으며, 각 트랩은 JavaScript 객체의 기본적인 내부 메서드에 해당합니다. 가장 일반적이고 유용한 것들을 살펴보겠습니다.

속성 액세스 트랩

1. `get(target, property, receiver)`

이것은 아마도 가장 많이 사용되는 트랩일 것입니다. 프록시의 속성을 읽을 때 트리거됩니다.

• target: 원본 객체입니다.
• property: 액세스되는 속성의 이름입니다.
• receiver: 프록시 자체 또는 프록시에서 상속된 객체입니다.

예: 존재하지 않는 속성에 대한 기본값입니다.

const user = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30
};

const userHandler = {
  get(target, property) {
    // 속성이 타겟에 존재하면 반환합니다.
    // 그렇지 않으면 기본 메시지를 반환합니다.
    return property in target ? target[property] : `Property '${property}' does not exist.`;
  }
};

const userProxy = new Proxy(user, userHandler);

console.log(userProxy.firstName); // 출력: John
console.log(userProxy.age);       // 출력: 30
console.log(userProxy.country);   // 출력: Property 'country' does not exist.

2. `set(target, property, value, receiver)`

set 트랩은 프록시의 속성에 값이 할당될 때 호출됩니다. 유효성 검사, 로깅 또는 읽기 전용 객체를 만드는 데 적합합니다.

• value: 속성에 할당되는 새 값입니다.
• 트랩은 부울 값을 반환해야 합니다. 할당이 성공하면 true, 그렇지 않으면 false(엄격 모드에서는 TypeError가 발생함)입니다.

예: 데이터 유효성 검사입니다.

const person = {
  name: 'Jane Doe',
  age: 25
};

const validationHandler = {
  set(target, property, value) {
    if (property === 'age') {
      if (typeof value !== 'number' || !Number.isInteger(value)) {
        throw new TypeError('Age must be an integer.');
      }
      if (value <= 0) {
        throw new RangeError('Age must be a positive number.');
      }
    }

    // 유효성 검사를 통과하면 타겟 객체에 값을 설정합니다.
    target[property] = value;

    // 성공을 나타냅니다.
    return true;
  }
};

const personProxy = new Proxy(person, validationHandler);

personProxy.age = 30; // 유효합니다.
console.log(personProxy.age); // 출력: 30

try {
  personProxy.age = 'thirty'; // TypeError 발생
} catch (e) {
  console.error(e.message); // 출력: Age must be an integer.
}

try {
  personProxy.age = -5; // RangeError 발생
} catch (e) {
  console.error(e.message); // 출력: Age must be a positive number.
}

3. `has(target, property)`

이 트랩은 in 연산자를 가로챕니다. 객체에 존재하는 것으로 나타나는 속성을 제어할 수 있습니다.

예: 'private' 속성을 숨기는 것입니다.

JavaScript에서 일반적인 규칙은 비공개 속성에 밑줄(_)을 접두사로 붙이는 것입니다. has 트랩을 사용하여 in 연산자에서 이러한 속성을 숨길 수 있습니다.

const secretData = {
  _apiKey: 'xyz123abc',
  publicKey: 'pub456def',
  id: 1
};

const hidingHandler = {
  has(target, property) {
    if (property.startsWith('_')) {
      return false; // 존재하지 않는 것처럼 가장합니다.
    }
    return property in target;
  }
};

const dataProxy = new Proxy(secretData, hidingHandler);

console.log('publicKey' in dataProxy); // 출력: true
console.log('_apiKey' in dataProxy);   // 출력: false (타겟에 있음에도 불구하고)
console.log('id' in dataProxy);        // 출력: true

참고: 이는 in 연산자에만 영향을 미칩니다. dataProxy._apiKey와 같은 직접 액세스는 해당 get 트랩을 구현하지 않는 한 여전히 작동합니다.

4. `deleteProperty(target, property)`

이 트랩은 delete 연산자를 사용하여 속성이 삭제될 때 실행됩니다. 중요한 속성의 삭제를 방지하는 데 유용합니다.

트랩은 삭제가 성공하면 true를 반환하고 실패하면 false를 반환해야 합니다.

예: 속성 삭제 방지입니다.

const immutableConfig = {
  databaseUrl: 'prod.db.server',
  port: 8080
};

const deletionGuardHandler = {
  deleteProperty(target, property) {
    if (property in target) {
      console.warn(`Attempted to delete protected property: '${property}'. Operation denied.`);
      return false;
    }
    return true; // 속성이 어쨌든 존재하지 않았습니다.
  }
};

const configProxy = new Proxy(immutableConfig, deletionGuardHandler);

delete configProxy.port;
// 콘솔 출력: Attempted to delete protected property: 'port'. Operation denied.

console.log(configProxy.port); // 출력: 8080 (삭제되지 않았습니다.)

객체 열거 및 설명 트랩

5. `ownKeys(target)`

이 트랩은 Object.keys(), Object.getOwnPropertyNames(), Object.getOwnPropertySymbols() 및 Reflect.ownKeys()와 같이 객체의 자체 속성 목록을 가져오는 작업에 의해 트리거됩니다.

예: 키 필터링입니다.

이것을 이전의 'private' 속성 예제와 결합하여 완전히 숨겨 보겠습니다.

const secretData = {
  _apiKey: 'xyz123abc',
  publicKey: 'pub456def',
  id: 1
};

const keyHidingHandler = {
  has(target, property) {
    return !property.startsWith('_') && property in target;
  },
  ownKeys(target) {
    return Reflect.ownKeys(target).filter(key => !key.startsWith('_'));
  },
  get(target, property, receiver) {
    // 직접 액세스도 방지
    if (property.startsWith('_')) {
      return undefined;
    }
    return Reflect.get(target, property, receiver);
  }
};

const fullProxy = new Proxy(secretData, keyHidingHandler);

console.log(Object.keys(fullProxy)); // 출력: ['publicKey', 'id']
console.log('publicKey' in fullProxy); // 출력: true
console.log('_apiKey' in fullProxy);   // 출력: false
console.log(fullProxy._apiKey);      // 출력: undefined

여기서 Reflect를 사용하고 있습니다. Reflect 객체는 가로챌 수 있는 JavaScript 작업에 대한 메서드를 제공하며, 해당 메서드는 프록시 트랩과 동일한 이름과 서명을 갖습니다. 원래 작업을 타겟으로 전달하여 기본 동작이 올바르게 유지되도록 하는 것이 가장 좋습니다.

함수 및 생성자 트랩

프록시는 일반 객체로 제한되지 않습니다. 타겟이 함수인 경우 호출 및 구성을 가로챌 수 있습니다.

6. `apply(target, thisArg, argumentsList)`

이 트랩은 함수의 프록시가 실행될 때 호출됩니다. 함수 호출을 가로챕니다.

• target: 원본 함수입니다.
• thisArg: 호출에 대한 this 컨텍스트입니다.
• argumentsList: 함수에 전달되는 인수 목록입니다.

예: 함수 호출 및 해당 인수 로깅입니다.

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

const loggingHandler = {
  apply(target, thisArg, argumentsList) {
    console.log(`Calling function '${target.name}' with arguments: ${argumentsList}`);
    // 올바른 컨텍스트와 인수로 원래 함수를 실행합니다.
    const result = Reflect.apply(target, thisArg, argumentsList);
    console.log(`Function '${target.name}' returned: ${result}`);
    return result;
  }
};

const proxiedSum = new Proxy(sum, loggingHandler);

proxiedSum(5, 10);
// 콘솔 출력:
// Calling function 'sum' with arguments: 5,10
// Function 'sum' returned: 15

7. `construct(target, argumentsList, newTarget)`

이 트랩은 클래스 또는 함수의 프록시에 대해 new 연산자를 사용하는 것을 가로챕니다.

예: 싱글톤 패턴 구현입니다.

class MyDatabaseConnection {
  constructor(url) {
    this.url = url;
    console.log(`Connecting to ${this.url}...`);
  }
}

let instance;

const singletonHandler = {
  construct(target, argumentsList) {
    if (!instance) {
      console.log('Creating new instance.');
      instance = Reflect.construct(target, argumentsList);
    }
    console.log('Returning existing instance.');
    return instance;
  }
};

const ProxiedConnection = new Proxy(MyDatabaseConnection, singletonHandler);

const conn1 = new ProxiedConnection('db://primary');
// 콘솔 출력:
// Creating new instance.
// Connecting to db://primary...
// Returning existing instance.

const conn2 = new ProxiedConnection('db://secondary'); // URL은 무시됩니다.
// 콘솔 출력:
// Returning existing instance.

console.log(conn1 === conn2); // 출력: true
console.log(conn1.url); // 출력: db://primary
console.log(conn2.url); // 출력: db://primary

실용적인 사용 사례 및 고급 패턴

이제 개별 트랩을 다루었으므로 실제 문제를 해결하기 위해 트랩을 결합하는 방법을 살펴보겠습니다.

1. API 추상화 및 데이터 변환

API는 종종 애플리케이션의 규칙(예: snake_case vs. camelCase)과 일치하지 않는 형식으로 데이터를 반환합니다. 프록시는 이 변환을 투명하게 처리할 수 있습니다.

function snakeToCamel(s) {
  return s.replace(/(_\w)/g, (m) => m[1].toUpperCase());
}

// 이것이 API에서 가져온 원시 데이터라고 상상해 보세요.
const apiResponse = {
  user_id: 123,
  first_name: 'Alice',
  last_name: 'Wonderland',
  account_status: 'active'
};

const camelCaseHandler = {
  get(target, property) {
    const camelCaseProperty = snakeToCamel(property);
    // camelCase 버전이 직접 존재하는지 확인합니다.
    if (camelCaseProperty in target) {
      return target[camelCaseProperty];
    }
    // 원래 속성 이름으로 폴백합니다.
    if (property in target) {
      return target[property];
    }
    return undefined;
  }
};

const userModel = new Proxy(apiResponse, camelCaseHandler);

// 이제 snake_case로 저장되어 있더라도 camelCase를 사용하여 속성에 액세스할 수 있습니다.
console.log(userModel.userId);        // 출력: 123
console.log(userModel.firstName);     // 출력: Alice
console.log(userModel.accountStatus); // 출력: active

2. 관찰 가능 항목 및 데이터 바인딩(현대 프레임워크의 핵심)

프록시는 Vue 3와 같은 최신 프레임워크의 반응성 시스템의 엔진입니다. 프록시된 상태 객체의 속성을 변경하면 set 트랩을 사용하여 UI 또는 애플리케이션의 다른 부분에서 업데이트를 트리거할 수 있습니다.

다음은 매우 단순화된 예입니다.

function createObservable(target, callback) {
  const handler = {
    set(obj, prop, value) {
      const result = Reflect.set(obj, prop, value);
      callback(prop, value); // 변경 시 콜백 트리거
      return result;
    }
  };
  return new Proxy(target, handler);
}

const state = {
  count: 0,
  message: 'Hello'
};

function render(prop, value) {
  console.log(`CHANGE DETECTED: The property '${prop}' was set to '${value}'. Re-rendering UI...`);
}

const observableState = createObservable(state, render);

observableState.count = 1;
// 콘솔 출력: CHANGE DETECTED: The property 'count' was set to '1'. Re-rendering UI...

observableState.message = 'Goodbye';
// 콘솔 출력: CHANGE DETECTED: The property 'message' was set to 'Goodbye'. Re-rendering UI...

3. 음수 배열 인덱스

고전적이고 재미있는 예는 Python과 같은 언어와 유사하게 -1이 마지막 요소를 참조하는 음수 인덱스를 지원하도록 기본 배열 동작을 확장하는 것입니다.

function createNegativeArrayProxy(arr) {
  const handler = {
    get(target, property) {
      const index = Number(property);
      if (!Number.isNaN(index) && index < 0) {
        // 음수 인덱스를 끝에서부터 양수로 변환합니다.
        property = String(target.length + index);
      }
      return Reflect.get(target, property);
    }
  };
  return new Proxy(arr, handler);
}

const originalArray = ['a', 'b', 'c', 'd', 'e'];
const proxiedArray = createNegativeArrayProxy(originalArray);

console.log(proxiedArray[0]);  // 출력: a
console.log(proxiedArray[-1]); // 출력: e
console.log(proxiedArray[-2]); // 출력: d
console.log(proxiedArray.length); // 출력: 5

성능 고려 사항 및 모범 사례

프록시는 매우 강력하지만 마법의 탄환은 아닙니다. 의미를 이해하는 것이 중요합니다.

성능 오버헤드

프록시는 간접 계층을 도입합니다. 프록시된 객체에 대한 모든 작업은 핸들러를 통과해야 하며, 이는 일반 객체에 대한 직접 작업에 비해 약간의 오버헤드를 추가합니다. 데이터 유효성 검사 또는 프레임워크 수준 반응성과 같은 대부분의 애플리케이션에서 이 오버헤드는 무시할 수 있습니다. 그러나 수백만 개의 항목을 처리하는 엄격한 루프와 같은 성능에 중요한 코드에서는 병목 현상이 될 수 있습니다. 성능이 주요 관심사인 경우 항상 벤치마크를 수행하세요.

프록시 불변성

트랩은 타겟 객체의 특성에 대해 완전히 거짓말을 할 수 없습니다. JavaScript는 프록시 트랩이 준수해야 하는 '불변성'이라는 규칙 집합을 적용합니다. 불변성을 위반하면 TypeError가 발생합니다.

예를 들어 deleteProperty 트랩에 대한 불변성은 타겟 객체의 해당 속성이 구성 불가능한 경우 true(성공을 나타냄)를 반환할 수 없다는 것입니다. 이렇게 하면 프록시가 삭제할 수 없는 속성을 삭제했다고 주장하는 것을 방지할 수 있습니다.

const target = {};
Object.defineProperty(target, 'unbreakable', { value: 10, configurable: false });

const handler = {
  deleteProperty(target, prop) {
    // 이렇게 하면 불변성을 위반합니다.
    return true;
  }
};

const proxy = new Proxy(target, handler);

try {
  delete proxy.unbreakable; // 이렇게 하면 오류가 발생합니다.
} catch (e) {
  console.error(e.message);
  // 출력: 'deleteProperty' on proxy: returned true for non-configurable property 'unbreakable'
}

프록시를 사용하는 경우(및 사용하지 않는 경우)

• 적합한 경우: 프레임워크 및 라이브러리 구축(예: 상태 관리, ORM), 디버깅 및 로깅, 강력한 유효성 검사 시스템 구현, 기본 데이터 구조를 추상화하는 강력한 API 생성.
• 대안을 고려해야 하는 경우: 성능에 중요한 알고리즘, 클래스 또는 팩토리 함수로 충분한 간단한 객체 확장 또는 ES6를 지원하지 않는 매우 오래된 브라우저를 지원해야 하는 경우.

해지 가능한 프록시

프록시를 '해제'해야 할 수 있는 시나리오(예: 보안상의 이유 또는 메모리 관리)의 경우 JavaScript는 Proxy.revocable()을 제공합니다. 프록시와 revoke 함수를 모두 포함하는 객체를 반환합니다.

const target = { data: 'sensitive' };
const handler = {};

const { proxy, revoke } = Proxy.revocable(target, handler);

console.log(proxy.data); // 출력: sensitive

// 이제 프록시의 액세스를 해지합니다.
revoke();

try {
  console.log(proxy.data); // 이렇게 하면 오류가 발생합니다.
} catch (e) {
  console.error(e.message);
  // 출력: Cannot perform 'get' on a proxy that has been revoked
}

프록시 vs. 기타 메타프로그래밍 기술

프록시 이전에는 개발자가 유사한 목표를 달성하기 위해 다른 방법을 사용했습니다. 프록시가 어떻게 비교되는지 이해하는 것이 유용합니다.

`Object.defineProperty()`

Object.defineProperty()는 특정 속성에 대한 getter와 setter를 정의하여 객체를 직접 수정합니다. 반면에 프록시는 원래 객체를 전혀 수정하지 않고 래핑합니다.

• 범위: defineProperty는 속성별로 작동합니다. 감시하려는 모든 속성에 대해 getter/setter를 정의해야 합니다. 프록시의 get 및 set 트랩은 전역적이며 나중에 추가된 새로운 속성을 포함하여 모든 속성에 대한 작업을 캡처합니다.
• 기능: 프록시는 deleteProperty, in 연산자 및 함수 호출과 같이 defineProperty가 수행할 수 없는 더 넓은 범위의 작업을 가로챌 수 있습니다.

결론: 가상화의 힘

JavaScript Proxy API는 단순한 영리한 기능 그 이상입니다. 객체를 설계하고 상호 작용하는 방식을 근본적으로 변화시키는 것입니다. 기본적인 작업을 가로채고 사용자 정의할 수 있도록 함으로써 프록시는 원활한 데이터 유효성 검사 및 변환에서 현대 사용자 인터페이스를 강화하는 반응형 시스템에 이르기까지 강력한 패턴의 세계로 가는 문을 엽니다.

약간의 성능 비용과 따라야 할 규칙 집합이 있지만 깔끔하고 분리된 강력한 추상화를 생성하는 기능은 타의 추종을 불허합니다. 객체를 가상화함으로써 더 강력하고 유지 관리하기 쉬우며 표현력이 풍부한 시스템을 구축할 수 있습니다. 데이터 관리, 유효성 검사 또는 관찰 가능성과 관련된 복잡한 문제에 직면할 때마다 프록시가 작업에 적합한 도구인지 고려하십시오. 도구 키트에서 가장 우아한 솔루션일 수 있습니다.