문서 목록
⭐️는 필수 지식, 💡는 이해하면 좋은 지식이에요.

메타프로그래밍과 프록시

개념 설명

JavaScript의 Proxy와 Reflect API를 활용하여 객체의 기본 동작을 가로채고 수정하는 메타프로그래밍 기법으로, 반응형 시스템, 검증, 가상 속성 등을 구현 가능.

핵심 포인트

  • Proxy: 객체의 기본 동작(get, set, has 등)을 가로채는 트랩 제공
  • Reflect: 프록시 트랩과 1:1 대응하는 메서드로 기본 동작 수행
  • 주요 패턴: 반응형 시스템, 검증, 가상 속성, 메모이제이션, 불변성
  • Vue 3, MobX 등이 Proxy 기반 반응형 시스템 사용

예시 코드

// 반응형 시스템 (Vue 3 스타일)
function reactive(target) {
  return new Proxy(target, {
    get(target, prop) {
      track(target, prop); // 의존성 추적
      return target[prop];
    },
    set(target, prop, value) {
      target[prop] = value;
      trigger(target, prop); // 변경 알림
      return true;
    }
  });
}

더 많은 내용을 확인하세요! 📚

메타프로그래밍과 프록시의 전체 내용을 보시려면 프리미엄 플랜이 필요합니다.

✨ 모든 기술 문서 무제한 액세스

📝 실습 예제와 상세한 코드 설명

🎯 면접 예상 질문과 답변 가이드

플랜 비교하기