Herb 파서의 소개
Herb는 C로 작성된 HTML-aware ERB 파서로, Prism을 기반으로 Ruby 코드를 파싱합니다. 이 파서는 HTML과 임베디드 Ruby의 인터리브 구문 트리를 제공하여 파일의 구조적 인식을 가능하게 합니다. 기존 ERB 파서가 단순히 텍스트와 ERB 태그를 구분하는 것과 달리, Herb는 if...end와 같은 복합적인 Ruby 제어 흐름이 HTML 요소와 어떻게 결합되는지 정확히 파악합니다.
Herb 기반 도구 생태계
Herb의 파싱 능력은 다양한 강력한 도구로 확장됩니다. * 포매터: HTML ERB 코드를 일관된 스타일로 자동으로 포매팅하여 코드의 가독성을 높입니다. * 린터: 일반적인 코딩 실수를 감지하고 모범 사례를 강제합니다. 최근에는 접근성(Accessibility) 관련 규칙 9개와 Stimulus 전용 린트 규칙이 추가되어 총 32개의 규칙을 지원합니다. 이는 페이지 내 ID 중복과 같은 유효하지 않은 HTML 구조도 감지합니다. * Tailwind 플러그인: 향후 Tailwind CSS 클래스를 자동으로 정렬하는 기능을 통합하여 개발 편의성을 더욱 높일 예정입니다.
Reaction View 및 Herb ERB 엔진
Herb 0.7 버전에서 새롭게 선보인 Herb ERB 엔진은 Action View의 기본 엔진인 ERUBY를 대체할 수 있는 HTML-aware 렌더링 엔진입니다. * HTML 유효성 보장: 기존 ERUBY는 유효하지 않은 HTML(예: 닫는 태그 누락)도 렌더링하지만, Herb 엔진은 유효하지 않은 HTML을 컴파일하지 않도록 강제하여 템플릿의 견고성을 높입니다. * 향상된 개발자 경험: Herb 파서의 정확한 구문 분석 정보를 활용하여 개발자에게 훨씬 유용한 피드백을 제공합니다. * 정확한 오류 메시지: 구문 오류 발생 시 브라우저에서 문제의 정확한 위치를 시각적으로 표시하여 디버깅 시간을 단축합니다. * 시각적 디버깅: 개발 모드에서 뷰 파일(views, partials, components)의 경계를 시각적으로 구분하여 표시하며, 동적 ERB 출력 태그의 내용을 호버 시 보여주고, 클릭 시 해당 코드 위치로 에디터를 열어주는 기능을 제공합니다. 이는 복잡한 뷰 구조를 이해하고 디버깅하는 데 큰 도움이 됩니다.
미래 비전
Reaction View 이니셔티브는 Rails 뷰 레이어를 모던 웹 표준 및 프런트엔드 트렌드와 통합하는 장기적인 비전을 제시합니다. * Action View 최적화: 부분 렌더링 호출 및 Action View 헬퍼 인라인화와 같은 최적화 방안을 모색합니다. * 반응형 렌더링: Phoenix LiveView의 영감을 받아 템플릿의 상태 변화를 추적하고 필요한 부분만 렌더링하여 성능을 향상시킬 수 있습니다. * ERB 컴포넌트의 클라이언트 측 활용: ERB 컴포넌트를 웹 컴포넌트나 React 컴포넌트로 트랜스파일하여 클라이언트 측에서 활용하는 방안을 고려합니다. * 외부 컴포넌트 통합: React, Svelte, Vue와 같은 외부 프레임워크의 컴포넌트를 Rails 뷰에 원활하게 통합할 수 있는 방법을 모색합니다. * 개발 편의성 개선: 인라인 Stimulus, 뷰 파일별 스코프 CSS, 선택적 렌더링과 같은 기능으로 개발자 경험을 더욱 향상시킵니다.