[Day56] ⚡ JavaScript ⚡ JavaScript Proxy로 반응형 객체 구현

[github-actions]

⚡ JavaScript Proxy로 반응형 객체 구현

카테고리: ⚡ JavaScript
난이도: 🟡 Medium
제한 시간: 15분

---

문제

쇼핑몰 관리자 페이지에서 상품 정보를 반응형으로 관리하는 객체를 구현하세요. Proxy를 사용하여 객체의 속성이 변경될 때마다 콘솔에 변경된 속성과 값을 출력하도록 하세요.

코드

const product = {
  name: 'Smartphone',
  price: 999,
  stock: 50
};

// TODO: 여기에 구현하세요
function createReactiveProduct(product) {
}

const reactiveProduct = createReactiveProduct(product);
reactiveProduct.price = 899; // 콘솔에 'price가 899로 변경되었습니다.' 출력
reactiveProduct.stock = 45; // 콘솔에 'stock가 45로 변경되었습니다.' 출력

요구사항

1. Proxy를 사용하여 객체의 속성이 변경될 때마다 콘솔에 변경된 속성과 값을 출력해야 합니다.
2. createReactiveProduct 함수는 주어진 객체를 Proxy로 감싸서 반환해야 합니다.
3. 객체의 속성이 변경될 때마다 콘솔에 '속성명이 값으로 변경되었습니다.' 형식으로 출력해야 합니다.
4. 기존 객체의 속성 외에 새로운 속성을 추가할 때도 콘솔에 출력되어야 합니다.

힌트

💡 힌트 보기

Proxy의 set 트랩을 사용하여 객체의 속성 변경을 감지할 수 있습니다.

---

🤖 이 문제는 AI에 의해 자동 생성되었고, 생성 후 검수 단계를 거쳤습니다.
풀이는 PR로 제출해주세요! 정답은 다음 날 자정에 댓글로 공개됩니다.

[github-actions]

📝 레퍼런스 정답

function createReactiveProduct(product) {
  return new Proxy(product, {
    set(target, property, value) {
      console.log(`${property}가 ${value}로 변경되었습니다.`);
      target[property] = value;
      return true;
    }
  });
}

const product = {
  name: 'Smartphone',
  price: 999,
  stock: 50
};

const reactiveProduct = createReactiveProduct(product);
reactiveProduct.price = 899; // 콘솔에 'price가 899로 변경되었습니다.' 출력
reactiveProduct.stock = 45; // 콘솔에 'stock가 45로 변경되었습니다.' 출력

자신의 풀이와 비교해보세요! 다른 접근 방식도 정답일 수 있습니다.