피드로 돌아가기
Dev.toFrontend
원문 읽기
Import Tree 분석 기반의 HTML/JSX/Vue 시맨틱 Linter 구축
I've worked on this side project for over a year now: ZemDomu, a semantic linter for HTML/JSX/TSX and Vue
AI 요약
Context
WCAG 표준 준수를 통한 UX 개선 필요성 증대에도 불구하고, 배포 전 단계에서 시맨틱 구조를 실시간 검증할 도구 부재. Lighthouse와 같은 분석 도구는 사후 확인 방식에 그쳐 개발 단계의 즉각적인 수정이 어려운 한계 존재.
Technical Solution
- HTML/JSX/TSX 및 Vue 프레임워크를 지원하는 Semantic Linter 설계
- 단일 파일 분석을 넘어 전체 Import Tree를 추적하는 정적 분석 로직 구현
- 컴포넌트 간 계층 구조를 분석하여 h1 하위에 h3가 바로 오는 등의 시맨틱 위반 사례 탐지
- 구조, 링크, 폼, 미디어, 문서 무결성 등 총 22가지의 검증 규칙 정의
- IDE 통합을 통한 개발 실시간 피드백 루프 구축
실천 포인트
- 컴포넌트 기반 개발 환경에서 개별 파일 단위가 아닌 전체 렌더링 트리를 고려한 정적 분석 도입 검토 - accessibility 가이드라인을 CI/CD 파이프라인 이전의 Linter 단계로 전진 배치하여 수정 비용 절감 - 시맨틱 태그의 계층적 무결성 검증 규칙을 프로젝트 코딩 컨벤션에 반영