JavaScript Proxy를 활용한 상태 추적 도구 개발기

문제 상황

• 전자계약서에서 거대한 단일 객체로 계약 데이터를 관리해 연쇄적인 상태 변경과 예측 어려움 발생
• 상태 변화의 원인과 영향 범위가 코드와 문서에 드러나지 않아 console.log 기반 추적이 반복됨
• 버그 핫픽스 반복, 디버깅 시간 증가, 개발자 생산성 저하로 이어짐

원인 분석

• Redux, Zustand 같은 상태 관리 라이브러리 미도입 구조
• 관련 코드 전반을 마이그레이션할 리소스와 시간이 부족한 상황
• 중첩된 상태 변화 흐름을 한눈에 볼 수 없는 레거시 객체 구조

해결 방법

• JavaScript Proxy로 상태 객체를 감싸 get/set 변화를 가로채는 추적 도구 구현
• cloneDeep, isEqual로 실제 변경 여부를 비교하고 변경 경로, 이전값, 새값, 시각을 로그 전송
• Chrome DevTools 패널에서 로그를 받아 시간순으로 시각화

적용해볼 점

• 상태 관리 라이브러리 도입이 어려운 레거시 코드에서 부분적 추적 도구로 디버깅 보강
• 최소한의 코드 변경으로 상태 변경 원인과 영향 범위 파악
• 팀원 누구나 개발 서버 없이 로그를 확인하는 공통 디버깅 환경 구축