πŸ’πŸ»β€β™€οΈ μ†Œκ°œ

JavaScriptμ—μ„œ Proxy κ°μ²΄λŠ” κΈ°λ³Έ λ™μž‘μ„ μ‚¬μš©μž μ •μ˜λ‘œ λ³€κ²½ν•  수 μžˆλ„λ‘ ν•΄μ€λ‹ˆλ‹€.
이λ₯Ό 톡해 객체에 λŒ€ν•œ ν”„λ‘μ‹œλ₯Ό μƒμ„±ν•˜κ³ , 객체에 μ ‘κ·Όν•˜κ±°λ‚˜ 값을 μ„€μ •ν•  λ•Œ μ‚¬μš©μž μ •μ˜ λ‘œμ§μ„ μ μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
이 ν¬μŠ€νŠΈμ—μ„œλŠ” 객체에 λŒ€ν•œ Proxy 생성 방법과 이λ₯Ό ν†΅ν•œ 객체 μ œμ–΄μ˜ μž₯점을 μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

❢ Proxy μƒμ„±ν•˜κΈ°

Proxy 객체λ₯Ό μƒμ„±ν•˜κΈ° μœ„ν•΄μ„œλŠ” new Proxy(target, handler) λ₯Ό μ‚¬μš©ν•˜μ—¬ λŒ€μƒ 객체와 ν•Έλ“€λŸ¬ 객체λ₯Ό 인자둜 μ „λ‹¬ν•©λ‹ˆλ‹€.
ν•Έλ“€λŸ¬ κ°μ²΄λŠ” λ‹€μ–‘ν•œ 트랩(trap) λ©”μ„œλ“œλ₯Ό μ •μ˜ν•˜μ—¬ λŒ€μƒ 객체에 λŒ€ν•œ λ™μž‘μ„ μ‚¬μš©μž μ •μ˜λ‘œ λ³€κ²½ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

λ‹€μŒ μ˜ˆμ‹œμ—μ„œλŠ” κ°„λ‹¨ν•œ ν”„λ‘μ‹œλ₯Ό μƒμ„±ν•˜μ—¬ 객체의 값을 κ°€μ Έμ˜€λŠ”(get) 및 μ„€μ •ν•˜λŠ”(set) λ™μž‘μ„ μ‚¬μš©μž μ •μ˜λ‘œ λ³€κ²½ν•΄ λ³΄κ² μŠ΅λ‹ˆλ‹€.

const target = {
  name: "John Doe"
};

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

const proxy = new Proxy(target, handler);

console.log(proxy.name); // 좜λ ₯: Getting property 'name'
                         // 좜λ ₯: John Doe
proxy.name = "Jane Doe"; // 좜λ ₯: Setting property 'name' with value 'Jane Doe'

❷ 객체의 get 및 set λ™μž‘ μ‚¬μš©μž μ •μ˜

μœ„ μ˜ˆμ‹œμ—μ„œλŠ” 객체의 값을 κ°€μ Έμ˜€λŠ”(get) 및 μ„€μ •ν•˜λŠ”(set) λ™μž‘μ„ μ‚¬μš©μž μ •μ˜ν•˜λŠ” 방법을 μ‚΄νŽ΄λ³΄μ•˜μŠ΅λ‹ˆλ‹€.
이λ₯Ό ν™œμš©ν•˜μ—¬ 객체의 λ™μž‘μ„ μ›ν•˜λŠ” λŒ€λ‘œ μˆ˜μ •ν•˜κ±°λ‚˜, 객체의 ν”„λ‘œνΌν‹°μ— λŒ€ν•œ μœ νš¨μ„± 검사λ₯Ό μˆ˜ν–‰ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

λ‹€μŒ μ˜ˆμ‹œμ—μ„œλŠ” 객체의 λ‚˜μ΄ ν”„λ‘œνΌν‹° 값을 κ°€μ Έμ˜¬ λ•Œ μžλ™μœΌλ‘œ "μ‚΄"μ΄λΌλŠ” λ¬Έμžμ—΄μ„ μΆ”κ°€ν•˜μ—¬ λ°˜ν™˜ν•˜λ„λ‘ μˆ˜μ •ν•΄ λ³΄κ² μŠ΅λ‹ˆλ‹€.

const target = {
  name: "John Doe",
  age: 30
};

const handler = {
  get: function(obj, prop) {
    if (prop === "age") {
      return obj[prop] + "μ‚΄";
    } else {
      return obj[prop];
    }
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.age); // 좜λ ₯: 30μ‚΄

❸ μž₯점: ν”„λ‘œνΌν‹° κ°’ μœ νš¨μ„± 검사

Proxy 객체λ₯Ό μ‚¬μš©ν•˜λ©΄ 객체의 ν”„λ‘œνΌν‹° 값에 λŒ€ν•œ μœ νš¨μ„± 검사λ₯Ό μˆ˜ν–‰ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
이λ₯Ό 톡해 객체에 μ €μž₯λ˜λŠ” κ°’μ˜ 정합성을 보μž₯ν•˜κ³ , 버그 λ°œμƒ κ°€λŠ₯성을 쀄일 수 μžˆμŠ΅λ‹ˆλ‹€.

λ‹€μŒ μ˜ˆμ‹œμ—μ„œλŠ” 객체의 λ‚˜μ΄ ν”„λ‘œνΌν‹° 값이 0 이상인지 ν™•μΈν•˜λŠ” μœ νš¨μ„± 검사λ₯Ό μΆ”κ°€ν•΄ λ³΄κ² μŠ΅λ‹ˆλ‹€.

const target = {};

const handler = {
  set: function(obj, prop, value) {
    if (prop === "age" && value < 0) {
      console.error("Age cannot be negative");
    } else {
      obj[prop] = value;
    }
  }
};

const proxy = new Proxy(target, handler);

proxy.age = -1; // 좜λ ₯: Age cannot be negative
proxy.age = 30; // μ •μƒμ μœΌλ‘œ 섀정됨

πŸ“ 총정리

μ΄μƒμœΌλ‘œ 객체에 λŒ€ν•œ Proxy 생성 방법과 이λ₯Ό ν†΅ν•œ 객체 μ œμ–΄μ˜ μž₯점을 μ‚΄νŽ΄λ³΄μ•˜μŠ΅λ‹ˆλ‹€.
Proxy 객체λ₯Ό μ‚¬μš©ν•˜λ©΄ 객체의 λ™μž‘μ„ μ‚¬μš©μž μ •μ˜λ‘œ λ³€κ²½ν•  수 있으며, ν”„λ‘œνΌν‹° 값에 λŒ€ν•œ μœ νš¨μ„± 검사λ₯Ό 톡해 객체의 정합성을 보μž₯ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

profile
#UXUI #코린이

0개의 λŒ“κΈ€