피드로 돌아가기
Dev.toFrontend
원문 읽기
Turbo 8 Morphing을 통한 Turbo Stream 의존성 제거 및 선언적 UI 업데이트 구현
How Turbo 8 Morphing Makes Rails Frontend Development Feel Like Magic
AI 요약
Context
Turbo 7의 Turbo Stream 방식은 DOM 업데이트를 위해 세밀한 HTML 조각과 명시적 지시서를 작성해야 하는 오버헤드 발생. 업데이트 지점이 많아질수록 컨트롤러와 뷰의 복잡도가 증가하며 JavaScript 기반 상태 관리와 유사한 유지보수 비용이 발생하는 한계 존재.
Technical Solution
- idiomorph 라이브러리를 활용한 서버 사이드 HTML diffing 기반의 Page Morphing 아키텍처 도입
- Full Page Reload 대신 신규 HTML과 기존 DOM의 차이점만 추출하여 픽셀 단위로 업데이트하는 구조 설계
- 컨트롤러 내 respond_to 및 .turbo_stream.erb 파일 제거를 통한 단순 redirect_to 기반의 고전적 Rails 패턴 복구
- broadcasts_refreshes 선언을 통한 WebSocket 신호 기반의 백그라운드 HTML 페칭 및 자동 Morphing 메커니즘 구축
- meta 태그 설정을 통한 Scroll Position 보존 및 Input 포커스 유지로 Seamless한 사용자 경험 확보
실천 포인트
1. 복잡한 DOM 업데이트 로직이 반복되는 구간에 turbo_refreshes_with 설정 검토
2. 기존 .turbo_stream.erb 파일을 제거하고 컨트롤러 로직을 redirect_to로 단순화하여 코드 베이스 축소
3. 실시간 업데이트가 필요한 Model에 broadcasts_refreshes를 적용하여 WebSocket 기반 자동 갱신 구현