피드로 돌아가기
Dev.toFrontend
원문 읽기
Virtual Grid 기반 HTML Table Parsing으로 엣지 케이스 완벽 제어
Cómo Manejo Tablas Anidadas y Rowspans (Las Partes Difíciles del Parsing de Tablas HTML)
AI 요약
Context
DOM 구조에 의존한 단순 반복문 기반의 Table Parsing은 rowspan, colspan 및 중첩 테이블 구조에서 데이터 정렬 불일치 문제를 야기함. 특히 위키피디아와 같은 복잡한 실데이터 환경에서 UI용 행(Navigation Row)과 헤더 중복 발생으로 인한 데이터 오염이 빈번한 상황임.
Technical Solution
- Virtual Grid 도입을 통한 데이터 소스 단일화 및 DOM-Data 간의 디커플링 구현
- Rowspan/Colspan 값을 기반으로 Virtual Grid의 좌표를 미리 점유하는 사전 할당 로직 설계
- Ancestor Table 체크 로직을 통한 Nested Table 식별 및 최상위 테이블 위주의 재귀적 필터링 적용
- 정규 표현식 패턴 매칭을 통한 UI 전용 Navigation Row 식별 및 데이터셋 제외 처리
- 다단계 헤더 분석을 통한 Grouped Header 병합 및 수평 중복 데이터 정규화 프로세스 구축
- 실제 버그 리포트를 기반으로 한 24종의 Fixture Test Suite 구축을 통한 회귀 테스트 자동화
실천 포인트
1. DOM 순회 전 가상 그리드(Virtual Grid)를 생성하여 좌표 기반 데이터 매핑 검토
2. `textContent` 추출 전 불필요한 `style`, `script` 및 중첩 `table` 요소 제거 여부 확인
3. 데이터 정제 단계에서 정규 표현식을 활용한 UI 전용 행(Nav Row) 필터링 로직 추가
4. 복잡한 HTML 파싱 시 엣지 케이스별 HTML Fixture 기반의 단위 테스트 환경 구축