이 프로젝트의 핵심은 ERB 템플릿을 단일 진실 공급원으로 삼고, 이를 JavaScript 함수로 자동 변환하는 것입니다. 이는 기존의 병렬 템플릿 구현 방식이 겪던 문제들을 해결합니다.
병렬 템플릿 문제점
-
로직 불일치: ERB 헬퍼 메서드와 JavaScript 문자열 보간 방식의 차이.
-
유지보수 부담: 템플릿 변경 시 두 곳 모두 업데이트 필요.
-
테스트 복잡성: 동작 일치를 검증하기 위한 병렬 테스트 스위트 필요.
-
미묘한 버그: 재구현 과정에서 엣지 케이스 누락 용이.
ERB-to-JS 변환 아키텍처
Ruby 3.3에 도입된 Prism 파서를 활용하여 ERB 템플릿 내 Ruby 코드를 AST(추상 구문 트리)로 분석하고, 이를 JavaScript 코드로 변환합니다. 주요 변환 전략은 다음과 같습니다.
-
정적 HTML: JavaScript 문자열 리터럴로 변환.
-
Ruby 출력 (
<%= %>): JavaScript 표현식으로 변환. -
Ruby 코드 (
<% %>): JavaScript 함수(예:.forEachfor.each) 및 조건문으로 변환. -
인스턴스 변수:
data객체 속성으로 매핑 (예:@subjects→data.subjects). -
헬퍼 메서드: JavaScript에서도 동일한 이름으로 호출되도록 통과 (별도 정의 필요).
구현 구성 요소 (총 1,370 라인)
-
ERB to JS Converter (232 라인): ERB 파싱 및 JavaScript 변환 핵심 로직.
-
Templates Controller (73 라인): 변환된 템플릿을 ES 모듈로 제공.
-
Heat Hydrator (395 라인): 정규화된 데이터를 중첩 객체로 변환하는 공유 로직.
-
Stimulus Controller (229 라인): 템플릿 로딩, 렌더링, 내비게이션 조정.
-
Node Hydration Script (58 라인): 브라우저 외부에서 테스트 및 디버깅 지원.
특히, render_erb_and_js.rb 스크립트는 ERB와 JavaScript 버전의 렌더링 결과를 비교하고 중간 아티팩트를 저장하여 디버깅 시간을 크게 단축시키는 데 기여했습니다. 이 스크립트는 실제 데이터를 사용하여 종단 간 렌더링 일치를 검증합니다.
결과 및 비교
-
코드 크기: 기존 웹 컴포넌트 방식(4,025 라인) 대비 66% 감소한 1,370 라인으로 구현.
-
대역폭: 두 방식 모두 동일한 벌크 다운로드 전략으로 효율적인 대역폭 사용 (~214KB).
-
테스팅: 42개의 단위 테스트와
render_erb_and_js.rb스크립트를 통한 실제 데이터 기반의 렌더링 일치 검증으로 높은 신뢰성 확보.