Turbo Streams로 애플리케이션에 생동감을 불어넣으세요

Turbo Handbook

작성자
Ruby Weekly
발행일
2025년 09월 26일
원문 보기
turbo.hotwired.dev

핵심 요약

  • 1 Turbo Streams는 <turbo-stream> 요소를 통해 HTML 조각을 전송하여 DOM을 효율적으로 업데이트하는 Hotwire의 핵심 기술입니다.
  • 2 서버 측 템플릿을 재활용하여 실시간 애플리케이션 기능을 구현하며, append, replace, remove 등 9가지 액션을 지원합니다.
  • 3 Rails와 같은 백엔드 프레임워크와의 긴밀한 통합을 통해 개발 과정을 간소화하고, 점진적 개선 원칙을 따릅니다.

도입

Turbo Streams는 Hotwire의 핵심 구성 요소 중 하나로, 웹 애플리케이션에 동적이고 반응적인 경험을 제공하는 기술입니다. 이는 페이지 변경 사항을 HTML 조각으로 전달하며, 이 조각들은 <turbo-stream> 요소 내에 캡슐화됩니다. 각 스트림 요소는 특정 DOM ID 또는 CSS 선택자를 대상으로 어떤 액션을 수행할지 지정하여, 페이지 전체를 새로고침하지 않고도 특정 부분을 실시간으로 업데이트할 수 있게 합니다. 이 기술은 사용자 상호작용 후 DOM을 정교하게 업데이트하거나, 다른 사용자의 활동에 따른 실시간 업데이트를 구현하는 데 필수적입니다.

Turbo Streams의 작동 방식과 액션

  • <turbo-stream> 요소는 HTML 조각을 감싸 페이지 변경 사항을 전달하며, 모든 포함된 HTML은 반드시 <template> 요소 내에 위치해야 합니다.
  • action 속성을 사용하여 append, prepend, replace, update, remove, before, after, morph, refresh의 9가지 기본 동작 중 하나를 지정합니다.
  • target 속성으로 단일 DOM ID를, targets 속성으로 CSS 선택자를 사용하여 여러 대상을 지정할 수 있습니다.

서버 측 템플릿 재활용

  • Turbo Streams의 가장 큰 장점은 기존 서버 측 템플릿을 재활용하여 실시간 부분 페이지 변경을 수행하는 능력입니다.
  • 새로운 콘텐츠를 JSON으로 직렬화하고 클라이언트 측에서 템플릿을 렌더링하는 복잡한 과정 없이, 표준 서버 측 템플릿이 그대로 사용되어 개발 효율성을 극대화합니다.

HTTP 응답 및 비동기 전송

  • <form> 제출 시 text/vnd.turbo-stream.html MIME 타입을 통해 Turbo Streams 응답을 자동으로 처리합니다.
  • WebSocket, SSE(Server-Sent Events) 등 비동기 전송 방식을 통해서도 스트림 요소를 전달하여 다른 사용자나 프로세스에 의한 업데이트를 실시간으로 반영합니다.
  • 링크나 GET 방식의 폼 제출 시 data-turbo-stream 속성을 추가하여 Turbo Streams 응답을 요청할 수 있습니다.

백엔드 프레임워크 통합 (Rails 예시)

  • turbo-rails gem은 Rails의 Action Cable 및 Active Job 프레임워크를 활용하여 Turbo Streams를 긴밀하게 통합합니다.
  • Active Record의 Broadcastable concern을 통해 도메인 모델에서 직접 WebSocket 업데이트를 트리거할 수 있습니다.
  • Turbo::Streams::TagBuilder를 사용하여 컨트롤러 응답이나 전용 템플릿에서 <turbo-stream> 요소를 간단한 DSL(Domain Specific Language)로 렌더링할 수 있습니다.
  • <turbo-stream-source> 사용자 정의 요소는 src 속성을 통해 WebSocket 또는 EventSource와 같은 스트림 소스에 연결됩니다. 이 요소는 <body> 하위에 마운트되어야 합니다.

사용자 정의 액션 및 JavaScript 제한

  • Turbo Streams는 HTML 전달에 중점을 두며, 추가적인 JavaScript 로직은 Stimulus 컨트롤러에 위임하는 것을 권장합니다.
  • turbo:before-stream-render 이벤트 리스너를 통해 alert, log 등 사용자 정의 액션을 구현하거나, StreamActions 객체에 직접 속성을 추가하여 사용자 정의 액션을 정의할 수 있습니다.

결론

Turbo Streams는 HTML-over-the-wire 접근 방식을 통해 웹 애플리케이션 개발의 패러다임을 변화시킵니다. 서버 측 템플릿 재활용 능력은 개발 노력을 크게 줄이면서도 현대적이고 빠른 애플리케이션을 구축할 수 있게 합니다. 또한, Turbo Streams는 점진적 개선 원칙을 강조하여, 핵심 기능은 스트림 없이도 동작하도록 설계하고 필요한 경우에만 스트림을 추가하여 애플리케이션의 견고성을 높일 것을 권장합니다. JavaScript 실행을 Stimulus 컨트롤러에 위임함으로써, Turbo Streams는 HTML 전달이라는 본연의 역할에 집중하며, 재사용 가능하고 유지보수가 용이한 코드베이스를 유지하는 데 기여합니다. 이는 백엔드 프레임워크와의 긴밀한 통합을 통해 더욱 강력한 시너지를 발휘하며, 특히 Ruby on Rails 개발자들에게 큰 이점을 제공합니다.

관련 글들

Turbo Stream: 폼 제출 및 응답 처리 방식 상세 분석

Turbo는 폼 제출을 가로채 `Accept: text/vnd.turbo-stream.html` 헤더를 추가하여 서버에 Turbo Stream 응답을 요청합니다.

10/07 읽어보기 →

Turbo Stream 'refresh' 액션과 DOM 상태 관리: 서버사이드 렌더링을 통한 개선

Hotwire (Turbo, Stimulus)는 Rails에서 서버사이드 렌더링을 통해 프론트엔드를 간소화하며, Action Cable과 연동하여 Turbo Stream을 브로드캐스트하여 비동기적인 페이지 업데이트를 가능하게 합니다.

10/17 읽어보기 →

Superglue 2.0 Alpha 및 Super Turbo Streams: React와 Rails를 위한 Turbo Streams 포트

Superglue 2.0 Alpha가 Super Turbo Streams와 함께 발표되어 React/Rails 애플리케이션에 Turbo Streams의 기능을 도입합니다.

09/19 읽어보기 →

Rails와 JavaScript 조정을 위한 커스텀 Turbo Stream 액션 활용

Rails 컨트롤러와 프론트엔드 JavaScript 간의 깔끔한 조정을 위해 커스텀 Turbo Stream 액션을 활용할 수 있습니다.

08/06 읽어보기 →

댓글 0

댓글 작성

0/1000
정중하고 건설적인 댓글을 작성해 주세요.

아직 댓글이 없습니다

첫 번째 댓글을 작성해보세요!