⚡
Turbo & Hotwire
JavaScript 없이 SPA 같은 UX 구현
Hotwire는 Rails 7의 기본 프론트엔드 프레임워크로, 3가지 구성요소가 있습니다.
1. Turbo Drive: 모든 링크 클릭과 폼 제출을 가로채어, 전체 페이지 새로고침 대신 <body>만 교체합니다. 별도 설정 없이 자동 동작.
2. Turbo Frames: 페이지의 특정 영역만 독립적으로 업데이트합니다.
turbo_frame_tag "post_123" do ... end 형태로 프레임을 정의하면, 프레임 안의 링크 클릭 시 프레임 내에서만 내용이 교체됩니다.
3. Turbo Streams: 서버에서 8가지 DOM 조작을 지시합니다.
turbo_stream.append, prepend, replace, update, remove, before, after, morph 등의 액션으로 특정 DOM 요소를 서버에서 직접 조작합니다.
Action Cable과 결합하면 실시간 업데이트도 가능합니다.
구조 다이어그램
🚗
Turbo Drive
모든 링크/폼을 자동 AJAX화
<body>만 교체
설정 불필요!
🖼️
Turbo Frames
특정 영역만 독립 업데이트
turbo_frame_tag
인라인 편집
🌊
Turbo Streams
서버→클라이언트 DOM 조작
append, remove ...
실시간 업데이트
Turbo Stream 8가지 액션:
append
prepend
replace
update
remove
before
after
morph
기존 (React/Vue)
Server → JSON → Client 렌더링
Hotwire
Server → HTML → Client에 삽입
핵심: <strong>HTML Over The Wire</strong> — 서버가 HTML을 보내고, Turbo가 페이지를 부분 업데이트
핵심 포인트
1
Turbo Drive: 링크/폼을 자동으로 AJAX화 (설정 불필요)
2
turbo_frame_tag로 독립 업데이트 영역 정의
3
프레임 안의 링크는 프레임 내에서만 응답 교체
4
Turbo Stream으로 서버에서 DOM 조작 지시 (append, remove 등)
5
respond_to { |format| format.turbo_stream { ... } } 로 응답
6
Action Cable + Turbo Stream = 실시간 업데이트
장점
- ✓ JavaScript 최소화 — 서버 렌더링 유지
- ✓ SPA급 UX (깜빡임 없는 페이지 전환)
- ✓ Rails 7 기본 탑재 — 추가 설치 불필요
- ✓ SEO 친화적 (서버 렌더링)
단점
- ✗ 기존 JavaScript 라이브러리와 충돌 가능
- ✗ Turbo Drive가 예상치 못한 동작 유발
- ✗ 디버깅 시 네트워크 탭 확인 필요
- ✗ React/Vue 대비 커뮤니티 규모 작음
사용 사례
댓글 실시간 추가 (turbo_stream.append)
인라인 편집 (turbo_frame)
무한 스크롤
플래시 메시지 자동 추가/삭제
실시간 알림