투케이2K

517. (javaScript) 자바스크립트 Deep Proxy (재귀 Proxy) 사용해 JSON 객체 데이터 전체 변경 상태 이벤트 감지 - 깊은 객체 변경 감지 본문

JavaScript

517. (javaScript) 자바스크립트 Deep Proxy (재귀 Proxy) 사용해 JSON 객체 데이터 전체 변경 상태 이벤트 감지 - 깊은 객체 변경 감지

투케이2K 2026. 3. 26. 19:56
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / Proxy / event


- 사전) 👉 new Proxy 간략 설명 : 

  >> new Proxy 는 자바스크립트에서 객체의 동작을 가로채고 제어할 수 있는 강력한 메커니즘입니다.

  >> new Proxy 는 객체에 접근하거나 값을 바꾸는 행동을 “가로채서” 원하는 로직을 덧붙일 수 있습니다.

  >> new Proxy 기본 구조 : 

    const proxy = new Proxy(target, handler);

  >> 사전) 재귀 함수 없이 new Proxy 단독 사용 시 주의점 : 

    - 상위 레벨만 감지
    - 중첩 객체 변경 → 감지 안 됨
    - 배열 내부 변경 → 감지 안 됨

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">


    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;
            background-color: #666;
        }

    </style>





    <!-- [CDN 주소 설정] -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">
        
      window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {

          // --------------------------------------------
          // ✅ [자바스크립트 Deep Proxy (재귀 Proxy) 사용해 중첩 객체 및 배열 데이터 전체 감시 수행]
          // --------------------------------------------
          // ✔️ 깊은 객체 변경 감지
          // ✔️ 배열 push/pop/shift 등 모두 감지
          // ✔️ 속성 삭제 감지
          // --------------------------------------------
          let deepProxy = function(target, callback, path = "") {
            
            if (typeof target !== "object" || target === null) return target;

            return new Proxy(target, {
              get(obj, prop) { // get 트랩 (속성 읽기 감지 및 재귀 Proxy 생성)
                const value = obj[prop];
                const newPath = path
                  ? (Array.isArray(obj) ? `${path}[${prop}]` : `${path}.${prop}`)
                  : prop.toString();
                return deepProxy(value, callback, newPath);
              },
              set(obj, prop, value) { // set 트랩 (값 변경 감지)
                const fullPath = path
                  ? (Array.isArray(obj) ? `${path}[${prop}]` : `${path}.${prop}`)
                  : prop.toString();

                callback(fullPath, value); // 값 반환
                obj[prop] = value;
                return true;
              },
              deleteProperty(obj, prop) { // deleteProperty 트랩 (속성 삭제 감지)
                const fullPath = path
                  ? (Array.isArray(obj) ? `${path}[${prop}]` : `${path}.${prop}`)
                  : prop.toString();

                callback(fullPath, undefined); // 값 반환
                delete obj[prop];
                return true;
              }
            });

          };


          // --------------------------------------------
          // [자바스크립트 JSON 객체 생성]
          // --------------------------------------------
          const json = { };


          // --------------------------------------------
          // ✅ [자바스크립트 JSON 데이터 변경 상태 감지 observed 등록]
          // --------------------------------------------          
          const observed = deepProxy(json, (prop, value) => {
            console.log(`observed : 변경 됨 : ${prop} : `, value);

            if (prop == 'name' && value == '2k'){ // ✔️ 중간 가로 채기 > 값 재변경 수행
              observed.name = '투케이';
            }

          });


          // --------------------------------------------
          // [json 데이터 특정 값 추가]
          // -------------------------------------------- 
          observed.name = 'twok';
          observed.job = {main: 'IT'};
          observed.addr = ['1', '2'];

          console.log('json print_1 : ', JSON.stringify(observed)); // or JSON.stringify(json) 가능


          // --------------------------------------------
          // [json 데이터 특정 값 변경]
          // -------------------------------------------- 
          observed.name = '2k';
          observed.job.main = 'Programer'
          observed.addr[0] = '0';

          console.log('json print_2 : ', JSON.stringify(observed)); // or JSON.stringify(json) 가능


          // --------------------------------------------
          // [json 데이터 특정 값 삭제]
          // -------------------------------------------- 
          delete observed.name;

          console.log('json print_3 : ', JSON.stringify(observed)); // or JSON.stringify(json) 가능


          // --------------------------------------------
          // ✅ [전체 로그 출력 동작]
          // -------------------------------------------- 
          /*
          observed : 변경 됨 : name :  twok
          observed : 변경 됨 : job :  {main: 'IT'}
          observed : 변경 됨 : addr :  (2) ['1', '2']
          json print_1 :  {"name":"twok","job":{"main":"IT"},"addr":["1","2"]}

          observed : 변경 됨 : name :  2k
          observed : 변경 됨 : name :  투케이
          observed : 변경 됨 : job.main :  Programer
          observed : 변경 됨 : addr[0] :  0
          json print_2 :  {"name":"2k","job":{"main":"Programer"},"addr":["0","2"]}

          observed : 변경 됨 : name :  undefined
          json print_3 :  {"job":{"main":"Programer"},"addr":["0","2"]}
          */
          // -------------------------------------------- 

        }
        catch (exception) {
          console.error("[window onload] : [Exception] : 예외 상황 발생 : ", exception);

        }

      };

    </script>


</head>


<body>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[자바스크립트 new Proxy 사용해 객체 변경 상태 이벤트 감지 , json 특정 key 데이터 변경 및 key 삭제 이벤트 감지]

https://kkh0977.tistory.com/8722

https://blog.naver.com/kkh0977/224229403729


[간단 소스] 자바스크립트 커스텀 json key 정렬 함수 생성 및 string , number , date 타입 asc , desc 정렬 수행

https://kkh0977.tistory.com/8695

https://blog.naver.com/kkh0977/224215514697


[간단 소스] 자바스크립트 Object.entries 사용해 json 에 저장 된 key , value 값 동시 출력 수행

https://kkh0977.tistory.com/8699

https://blog.naver.com/kkh0977/224218640323


[간단 소스] 자바스크립트 Object.fromEntries 사용해 json 객체 특정 value 값 기준 필터링 및 value 값 기준 정렬 수행

https://kkh0977.tistory.com/8703

https://blog.naver.com/kkh0977/224219981284

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

518. (javaScript) 자바스크립트 globalThis.appState 공통 접근 전역 공유 상태 value 값 , function 함수 정의 및 동적 스크립트 코드 호출  (0) 2026.03.27
516. (javaScript) 자바스크립트 new Proxy 사용해 객체 변경 상태 이벤트 감지 , json 특정 key 데이터 변경 및 key 삭제 이벤트 감지  (0) 2026.03.25
515. (javaScript) 자바스크립트 globalThis.appState 공통으로 접근 가능한 전역 공유 상태 설명 정리  (0) 2026.03.20
514. (javaScript) [간단 소스] 자바스크립트 string 문자열 형식 동적 자바 스크립트 코드 작성 및 import 모듈 로딩 , 소스 코드 실행  (0) 2026.03.19
513. (javaScript) [간단 소스] 자바스크립트 new Map 맵 객체 생성 및 기본 사용 방법 정리 - set , get , delete , has , clear  (0) 2026.03.18
'JavaScript' Related Articles more
Comments