HTML ERB 툴링의 필요성
Rails 7부터 Hotwire, Stimulus, Turbo가 프런트엔드의 기본 프레임워크로 자리 잡으면서, HTML ERB 툴링의 중요성이 더욱 부각되고 있습니다. 작년 Rails 개발자 설문조사에서 Stimulus가 31%의 점유율로 1위를 차지했으며, JavaScript 생태계에서도 Alpine.js나 HTMX 같은 유사 기술들이 인기를 얻는 추세는 이러한 변화를 뒷받침합니다. 이러한 배경 속에서, ERB 템플릿을 정확히 이해하고 분석하는 고급 툴링의 필요성이 절실해졌습니다.
기존 파서의 한계와 Herp의 탄생
ERB는 HTML뿐만 아니라 이메일, YAML, 텍스트 등 다양한 용도로 사용될 수 있는 다재다능한 언어입니다. 그러나 HTML과 ERB를 동시에 처리하는 툴링은 전무했습니다. 기존에는 Nokogiri(HTML)와 Prism(Ruby)을 분리하여 파싱하는 방식이 고려되었으나, 이 방법은 ERB 보간의 컨텍스트를 상실하고 Nokogiri의 출력에 위치 정보가 없어 두 결과를 하나의 구문 트리로 통합하기 어렵다는 문제가 있었습니다. 특히 속성 내 보간은 크로스 사이트 스크립팅(XSS) 공격과 같은 보안 문제와 직결되므로, 정확한 컨텍스트 파악이 필수적이었습니다.
이러한 한계를 극복하기 위해 마르코는 자신만의 HTML 인식 ERB 파서를 개발하기로 결정했습니다. 기존의 HTML 인식 파서들은 있었지만, 그가 목표하는 고급 툴링을 구축하기에는 역부족이었습니다. Stimulus 및 Turbo LSP가 TypeScript로, Ruby LSP가 Ruby로 작성되었음에도 불구하고, Prism의 선례를 따라 언어 간의 의존성을 최소화하고 휴대성을 극대화하기 위해 C99 언어로 파서를 구현하는 과감한 선택을 했습니다.
Herp 파서의 특징 및 동작 방식
Herp(HTML and ERB)는 HTML ERB 파일 작업을 더욱 생산적으로 만들기 위해 설계된 도구 세트입니다. 현재는 파서, 포매터, 린터로 구성되어 있으며, 핵심인 파서는 다음과 같은 특징을 가집니다.
* HTML 인식 ERB 파서: 순수 C99로 작성되었으며, Ruby 코드 조각 파싱을 위한 Prism 외에는 추가 의존성이 없습니다.
* Prism의 설계 목표 계승: 휴대성, 오류 허용, 유지 보수 용이성을 중시하며, 특히 JavaScript 및 Ruby 바인딩을 통해 다양한 환경에서 활용될 수 있도록 설계되었습니다.
* 커스텀 HTML 렉서/파서: 브라우저처럼 누락된 태그를 자동으로 수정하거나 노드를 재배치하는 대신, 파일에 있는 내용을 정확히 구문 분석 결과로 반영하여 툴링에 최적화된 구문 트리를 제공합니다.
* 바인딩 제공: Ruby용 herb Gem, Node.js 및 브라우저용 npm 패키지(Emscripten 및 WebAssembly 기반)를 통해 다양한 환경에서 lex, parse, extract Ruby/HTML API를 사용할 수 있습니다.
Herp는 빈 문서, 텍스트 콘텐츠, 부분적으로 열린 HTML 태그(오류 정보 포함), 완전한 HTML 요소, 중첩된 HTML 요소, ERB 출력 태그(<%= %>) 등을 모두 정확하게 구문 분석합니다. 특히 if 문과 같은 ERB 제어 흐름 구조는 초기 파싱 후 Prism을 이용한 2차 처리 과정을 거쳐 하나의 erb_if_node와 같은 객체로 통합하여 중첩된 HTML 요소까지 포함하는 계층적 구조를 이해할 수 있게 합니다. 이는 문서의 정확한 분석, 변환, 재작성을 위한 기반을 마련합니다.
Herp의 미래 비전
Herp는 파서 외에도 다음과 같은 기능을 통해 Ruby 뷰 레이어 툴링을 혁신할 계획입니다.
* 포매터 (Formatter): Prettier나 RuboCop처럼 HTML ERB 코드를 자동으로 포매팅하여 일관된 코드 스타일을 유지합니다. Ruby 설치에 의존하지 않고 LSP 내에서 바로 작동하도록 설계됩니다.
* 린터 (Linter): HTML5 유효성 검사, 잘못된 태그 중첩, 누락된 alt 속성, 안전하지 않은 보간 등을 진단하며 RuboCop과 통합될 수 있습니다.
* 스마트 ERB 렌더링 엔진 (코드명 Reaction View): RailsConf에서 발표될 예정인 이 비전은 액션 뷰(Action View) 애드온으로, ERB 뷰의 구조를 분석하여 상태 변화 시 템플릿의 특정 부분만 스마트하게 업데이트하고 재렌더링하는 것을 목표로 합니다. Phoenix LiveView에서 영감을 받았습니다.
* HTML 템플릿 구문 트리: Herp의 파싱 결과를 HAML, Slim과 같은 다른 템플릿 엔진에도 적용할 수 있는 공통 구문 트리로 확장하여, 모든 HTML 템플릿 언어에 대한 툴링 개선 노력을 통합할 계획입니다.
* 기존 툴링 통합: Stimulus LSP, Ruby LSP, Turbo LSP와 같은 기존 도구에 Herp 파서를 통합하여 진단, 코드 액션, 리팩토링 도구 등을 강화하고, 액션 뷰 헬퍼(link_to, content_tag) 사용 시에도 일관된 HTML 표현으로 변환하여 툴링을 제공할 예정입니다. 또한, 여러 파일에 걸친 분석을 통해 사용되지 않는 뷰 파일이나 부분 템플릿을 식별하는 기능도 포함됩니다.