1. Hotwire의 철학: HTML over the Wire
Hotwire는 ‘HTML over the Wire’의 약자로, JSON 데이터를 주고받아 클라이언트에서 렌더링하는 현대적인 트렌드와 달리 서버에서 완성된 HTML 조각을 전송하는 방식입니다. 이는 과거의 방식과 유사해 보이지만, Turbo와 Stimulus라는 정교한 도구를 통해 Single Page Application(SPA) 수준의 매끄러운 상호작용을 제공합니다. 특히 HTTP 상태 코드를 엄격히 준수함으로써 브라우저의 기본 동작을 존중하고, 복잡한 JavaScript 상태 관리 로직을 제거하는 데 중점을 둡니다.
2. Turbo Frames: 독립적인 페이지 영역 관리
Turbo Frames는 페이지의 특정 부분을 독립적인 탐색 영역으로 캡슐화하는 기술입니다.
- 작동 원리: <turbo-frame> 태그로 감싸진 영역 내부의 링크 클릭이나 폼 제출은 해당 프레임 내에서만 처리됩니다.
- 장점: 페이지 전체를 다시 로드하지 않고도 탭 전환, 인라인 편집, 모달 콘텐츠 로드 등을 구현할 수 있어 사용자 체감 속도가 향상됩니다.
- 구현 핵심: 서버 응답 역시 요청한 프레임과 동일한 ID를 가진 Turbo Frame으로 감싸져 있어야 하며, 이를 통해 Turbo가 교체할 대상을 정확히 식별합니다.
3. 실시간 업데이트를 위한 Turbo Streams 및 Morphing
Action Cable을 기반으로 하는 Turbo Streams는 서버가 클라이언트에 실시간으로 DOM 변경 사항을 푸시할 수 있게 합니다.
- Broadcasting: 모델 수준에서 broadcast_refresh를 설정하면, 데이터 변경 시 연결된 모든 브라우저에 새로고침 신호를 보냅니다.
- Morphing: Rails 8에서 강조되는 Morphing 기술은 페이지 전체를 교체하는 대신 현재 DOM과 서버에서 온 DOM의 차이점을 계산하여 변경된 부분만 정교하게 ‘변형’시킵니다. 이를 통해 입력 필드의 포커스나 스크롤 위치를 완벽하게 유지하면서도 데이터를 최신 상태로 동기화할 수 있습니다.
4. Stimulus: 선언적 상호작용 구현
HTML만으로 처리할 수 없는 미세한 상호작용은 Stimulus를 사용합니다. Stimulus는 HTML의 데이터 속성(data-controller, data-action)을 사용하여 JavaScript 동작을 연결합니다.
- 실제 사례: 검색 폼에서 사용자가 타이핑할 때마다 자동으로 폼을 제출하는 기능을 단 몇 줄의 코드로 구현할 수 있습니다.
- 효율성: 과도한 네트워크 요청을 방지하기 위해 debounce 기법을 Stimulus와 결합하여 성능을 최적화할 수 있으며, 이는 매우 직관적인 코드 구조를 유지하게 해줍니다.
5. 최신 브라우저 API와의 결합
발표자는 외부 JavaScript 라이브러리에 의존하기보다 브라우저의 최신 네이티브 API를 적극적으로 사용할 것을 권장합니다.
- Popover API & Anchor Positioning: 별도의 JS 라이브러리 없이 HTML 속성만으로 툴팁이나 팝오버의 위치를 계산하고 표시할 수 있어 번들 크기를 줄입니다.
- Native Dialog: 모달 창 구현 시 <dialog> 요소를 사용하면 접근성과 키보드 인터랙션(ESC 키 처리 등)을 브라우저 수준에서 자동으로 지원받을 수 있습니다.