JavaScript Academy · 강의

Proxy 실전 활용 사례

유효성 검사, 로깅, 반응형 객체를 만듭니다.

Proxy 실전 활용 사례은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

실전에서 사용하는 프록시

이제 프록시와 Reflect를 결합해 실제 문제를 해결해 보겠습니다. 검증, 로깅, 기본값 등을 구현할 수 있습니다. 각 패턴은 일반 객체를 변경하지 않고 감쌉니다.

검증 래퍼

스키마를 적용해 rule을 충족하지 못하는 모든 쓰기를 거부합니다. 잘못된 데이터가 들어가지 않으므로 target은 깨끗하게 유지됩니다.

function validated(obj, rules) {
  return new Proxy(obj, {
    set(target, prop, value, receiver) {
      const rule = rules[prop];
      if (rule && !rule(value)) {
        throw new TypeError('invalid value for ' + prop);
      }
      return Reflect.set(target, prop, value, receiver);
    }
  });
}

const user = validated({}, { age: v => v >= 0 });
user.age = 25;
console.log(user.age);
try { user.age = -1; } catch (e) { console.log(e.message); }

로깅 래퍼

디버깅을 위해 모든 읽기와 쓰기를 추적하며, 로깅한 후 Reflect를 통해 전달합니다.

function logged(obj) {
  return new Proxy(obj, {
    get(t, p, r) { console.log('GET ' + p); return Reflect.get(t, p, r); },
    set(t, p, v, r) { console.log('SET ' + p + '=' + v); return Reflect.set(t, p, v, r); }
  });
}

const data = logged({ count: 0 });
data.count = 5;
console.log(data.count);

기본값

누락된 모든 속성에 fallback을 반환하므로 읽기 결과가 undefined가 되지 않습니다.

function withDefault(obj, fallback) {
  return new Proxy(obj, {
    get(t, p, r) {
      return p in t ? Reflect.get(t, p, r) : fallback;
    }
  });
}

const scores = withDefault({ ada: 90 }, 0);
console.log(scores.ada);
console.log(scores.unknown);

음수 배열 인덱싱

get 트랩에서 인덱스를 변환해 배열이 파이썬 스타일의 음수 인덱스를 지원하도록 만들 수 있습니다.

function negIndex(arr) {
  return new Proxy(arr, {
    get(t, p, r) {
      const i = Number(p);
      if (Number.isInteger(i) && i < 0) {
        return Reflect.get(t, t.length + i, r);
      }
      return Reflect.get(t, p, r);
    }
  });
}

const list = negIndex(['a', 'b', 'c']);
console.log(list[-1]);
console.log(list[0]);

읽기 전용 뷰

읽을 수는 있지만 절대 쓸 수 없는 객체를 노출합니다. 공유 config를 보호할 때 유용합니다.

function readonly(obj) {
  return new Proxy(obj, {
    set() { console.log('blocked write'); return false; },
    deleteProperty() { console.log('blocked delete'); return false; }
  });
}

const config = readonly({ apiUrl: '/api' });
config.apiUrl = '/hacked';
console.log(config.apiUrl);

접근 횟수 세기

target 외부에 횟수를 저장해 각 속성을 몇 번 읽었는지 추적합니다.

function counted(obj) {
  const counts = {};
  const proxy = new Proxy(obj, {
    get(t, p, r) {
      counts[p] = (counts[p] || 0) + 1;
      return Reflect.get(t, p, r);
    }
  });
  return { proxy, counts };
}

const { proxy, counts } = counted({ x: 1 });
proxy.x; proxy.x; proxy.x;
console.log(counts.x);

계산된 가상 속성

저장되지 않은 파생 값을 노출하고, 읽을 때마다 새로 계산합니다.

const rect = new Proxy({ width: 4, height: 3 }, {
  get(t, p, r) {
    if (p === 'area') return t.width * t.height;
    return Reflect.get(t, p, r);
  }
});

console.log(rect.area);
rect.width = 10;
console.log(rect.area);

알 수 없는 읽기에서 오류 발생시키기

존재하지 않는 속성을 코드가 읽을 때 오류를 발생시켜 오타를 조기에 발견합니다.

function strict(obj) {
  return new Proxy(obj, {
    get(t, p, r) {
      if (typeof p === 'string' && !(p in t)) {
        throw new ReferenceError('unknown property: ' + p);
      }
      return Reflect.get(t, p, r);
    }
  });
}

const o = strict({ name: 'Ada' });
console.log(o.name);
try { console.log(o.naem); } catch (e) { console.log(e.message); }

관심사 결합하기

실제 래퍼는 검증과 로깅을 하나의 처리기에 결합하는 경우가 많으며, 각 트랩은 Reflect로 전달됩니다.

const account = new Proxy({ balance: 0 }, {
  set(t, p, v, r) {
    if (p === 'balance' && v < 0) throw new RangeError('no overdraft');
    console.log(p + ' set to ' + v);
    return Reflect.set(t, p, v, r);
  }
});

account.balance = 100;
console.log(account.balance);
try { account.balance = -50; } catch (e) { console.log(e.message); }

이러한 패턴이 중요한 이유

프록시는 원래 객체나 호출자를 오염시키지 않고 여러 부분에 걸친 동작, 검증, 로깅, 기본값, 접근 제어를 추가합니다. 반응형 프레임워크가 상태 변화를 관찰하는 방식도 바로 이와 같습니다. 투명한 가로채기가 필요할 때 사용하십시오.

const observed = new Proxy({ n: 0 }, {
  set(t, p, v, r) {
    const ok = Reflect.set(t, p, v, r);
    console.log(p + ' is now ' + t[p]);
    return ok;
  }
});
observed.n = 1;
observed.n = 2;

빠른 확인

저장되기 전에 잘못된 값을 거부하려면 어떤 프록시 트랩을 사용해야 합니까?

복습: 실용적인 프록시 사용 사례

실제 문제에 프록시를 적용해 보았습니다.

set 트랩의 검증은 잘못된 데이터를 거부합니다.
로깅은 Reflect를 통해 읽기와 쓰기를 추적합니다.
기본값과 가상 속성은 get 트랩에서 처리합니다.
읽기 전용 뷰, 접근 횟수 세기, 엄격한 오타 검사는 모두 객체를 투명하게 감쌉니다.

자주 묻는 질문

“Proxy 실전 활용 사례” 강의는 무료인가요?

네 — “Proxy 실전 활용 사례” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Proxy 실전 활용 사례”에서 뭘 배우나요?

유효성 검사, 로깅, 반응형 객체를 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“Proxy 실전 활용 사례” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기