vanilla js 동적 form 구조 - example 1

 

 

https://gist.github.com/shimpark/783013cceb50bb4a378077a1d2a21f01

vanilla js 동적 form 구조 확장 (proxy, computed, Subscribe/Notify 패턴)

 

 

✅ 완성된 기능들

1. 리액티브 스토어 시스템
   • Proxy 기반 자동 반응성
   • Computed 속성 (의존성 추적)
   • Subscribe/Notify 패턴
2. 데이터 주도 렌더링
   • renderList() - 배열 데이터를 HTML로 자동 변환
   • 조건부 렌더링 (data-show-if)
   • 양방향/단방향 바인딩
3. 유효성 검사 시스템
   • 규칙 기반 검증
   • 실시간 필드 검증 (blur 이벤트)
   • 전체 폼 검증 (저장 시)
4. 포매터 시스템
   • 화폐 형식 (currency)
   • 배열 표시 (array)
   • 커스텀 포매터 확장 가능

 

🎯 테스트 시나리오

1. 저장하기 버튼 - 유효성 검사 후 API 전송
2. 프리셋 불러오기 - 서버 데이터 일괄 로드
3. 서버 데이터 시뮬레이션 - 동적 목록 업데이트
4. 현재 State 출력 - 디버깅용 상태 확인

💎 핵심 설계 원칙

• 선언적 프로그래밍: HTML 속성만으로 바인딩
• 단일 진실 공급원: State가 모든 UI의 출처
• 관심사 분리: 데이터/로직/뷰 완전 분리
• 확장성: 새로운 validator, formatter 쉽게 추가

 

 

 

현재 방식의 장단점

 

✅ 장점 (간단한 경우):

• 구현이 단순하고 이해하기 쉬움
• 100개 이하 항목에서는 체감 불가능
• 서버에서 완전히 새로운 데이터가 올 때 유리

❌ 단점 (복잡한 경우):

• 1000개+ 항목에서 느려짐
• 애니메이션 적용 어려움
• 스크롤 위치, 포커스 상태 등 소실

해결책: Virtual DOM 또는 Diffing 알고리즘