피드로 돌아가기
I Built a Browser-Only JSON Schema Validator — Draft-07, $ref, allOf/anyOf/oneOf, if/then/else, 173 Tests
Dev.toDev.to
Frontend

Zero-dependency로 구현한 Browser-only JSON Schema Draft-07 Validator

I Built a Browser-Only JSON Schema Validator — Draft-07, $ref, allOf/anyOf/oneOf, if/then/else, 173 Tests

Dev Nestio2026년 6월 28일8intermediate

Context

Ajv와 같은 무거운 라이브러리 의존성으로 인한 초기 설정 비용 및 Node.js 환경 강제라는 제약 발생. 단순 검증 및 디버깅 목적의 가벼운 Browser-only 환경에 최적화된 검증기 필요성 대두.

Technical Solution

  • Recursive Validator 구조 설계를 통한 validate(data, schema, path, rootSchema) 단일 함수 중심의 검증 로직 구현
  • $ref 해결을 위한 JSON Pointer 기반의 Root Schema 탐색 및 재귀적 호출 구조 설계
  • Type Mismatch 시 Early Return 전략을 적용하여 불필요한 세부 키워드 검증을 배제한 효율적 처리
  • Draft-04와 Draft-06/07 간의 exclusiveMinimum/Maximum 정의 차이를 모두 수용하는 하이브리드 검증 로직 적용
  • JSON Path, Human-readable message, Keyword badge를 포함한 구조화된 ValidationError 객체 반환 설계
  • Split Pane 레이아웃과 실시간 Parse Error 감지 로직을 통한 사용자 경험 최적화

- 복잡한 Spec 구현 시 Recursive function을 통한 구조적 단순화 검토 - 버전별 상이한 Spec(Draft-04 vs 07) 대응을 위한 조건부 로직 분기 처리 - 성능 최적화를 위한 Early Return 패턴의 적절한 배치 확인 - $ref와 같은 상호 참조 해결을 위한 Root Context 유지 전략 수립

원문 읽기