Herb 파서와 툴링 에코시스템
-
Herb 파서: C로 작성된 HTML-aware ERB 파서로, Prism을 사용하여 Ruby 코드를 파싱합니다. 이는 HTML과 임베디드 Ruby의 상호 구문 트리를 생성하여 문서의 구조적 인식을 제공하며, Action View 태그 헬퍼를 지원합니다.
-
툴링: Herb는 단순한 파서를 넘어 다음과 같은 에코시스템을 구축했습니다.
- 포매터(Formatter): ERB/HTML 문서를 자동 포매팅하며, VS Code 확장 및 언어 서버와 통합되어 저장 시 즉시 적용됩니다.
- 린터(Linter): 일반적인 실수나 모범 사례 위반을 감지하여 에디터 내에서 피드백을 제공합니다. 최근에는 제어 흐름 분석을 통해 중복 ID와 같은 문제를 식별하는 린트 규칙이 추가되었으며, 총 32개의 규칙(9개는 접근성 관련)을 포함합니다.
- Seamless Lint: Stimulus 컨트롤러를 파싱하고 Herb를 활용하여 ERB 측 진단을 통합하는 CLI 도구입니다.
- Tailwind CSS 클래스 정렬: Herb 포매터의 플러그인으로, Tailwind 클래스를 자동으로 정렬하여 일관성을 유지합니다.
Reaction View: HTML 인식 ERB 렌더링 엔진
-
비전: Action View를 ‘문자열 템플릿 엔진’에서 ‘유효하지 않은 HTML을 생성할 수 없는 HTML 템플릿 엔진’으로 전환하는 것입니다. 이는 Rails 0.5부터 사용되어 온 E Ruby 엔진의 한계를 극복하고자 합니다.
-
작동 방식: 기존 E Ruby 엔진이 문자열 버퍼에 정적/동적 부분을 추가하는 방식과 달리, Herb 엔진은 템플릿을 구문 트리(AST)로 파싱합니다. 이 AST를 순회하며 각 노드(HTML 요소, 텍스트, ERB 내용)를 처리하여 컴파일된 Ruby 코드를 생성합니다. 이를 통해 유효한 HTML 생성을 보장하며, E Ruby 엔진과 API 호환성을 유지합니다.
-
Rails 통합: Action View 템플릿 핸들러를 통해 쉽게 통합되며, 기본 ERB 엔진을 Herb로 변경할 수 있습니다.
개발자 경험 개선을 위한 기능
-
향상된 오류 메시지: 구문 오류 발생 시, 기존의 모호한 스택 트레이스 대신 문제의 정확한 위치를 시각적으로 표시하는 상세한 오류 화면을 제공합니다.
-
추가 유효성 검사: 중첩된 태그 오류나 안전하지 않은 ERB 삽입에 대한 경고를 제공합니다.
-
시각적 디버깅: 개발 모드에서 다음과 같은 기능을 제공합니다.
- 뷰 아웃라인: 뷰, 부분(partial), 컴포넌트의 경계를 시각적으로 표시하고, 마우스 오버 시 경로를 보여주며, 클릭 시 에디터에서 해당 파일을 엽니다.
- ERB 출력 태그 디버깅: 브라우저에서 렌더링된 ERB 출력의 원본 ERB 코드를 마우스 오버 시 표시하고, 클릭 시 해당 코드 위치로 이동합니다.
미래 비전 및 확장성
-
Action View 최적화: 템플릿 내부 정보를 활용하여 부분(partial) 호출 인라인, 태그 헬퍼 인라인, 불필요한 공백 제거 등을 추진합니다.
-
반응형 ERB 뷰: Stimulus Reflex나 Phoenix LiveView와 유사하게, 상태 변화 시 최소한의 업데이트(diff)만 전송하여 반응형 UI를 구현합니다.
-
클라이언트 측 템플릿: ERB를 웹 컴포넌트나 React 컴포넌트로 컴파일하여 클라이언트 측 렌더링, 낙관적 UI 업데이트, 오프라인 기능 등을 지원합니다.
-
외부 컴포넌트 통합: Shadcn과 같은 라이브러리의 컴포넌트를 Rails 뷰 파일에서 HTML처럼 직접 사용할 수 있도록 지원하며, 엔진이 자동으로 주석 처리, 하이드레이션, 마운트를 처리합니다.
-
인라인 Stimulus/스코프 CSS: Svelte나 Vue.js처럼 템플릿 내에서 Stimulus 로직이나 스코프 CSS를 정의하여 모듈성을 높이는 방안을 모색합니다.
-
선택적 렌더링: Turbo Frames와 같이 문서의 특정 부분만 렌더링하여 효율성을 높이는 기능을 고려합니다.