커스텀 Turbo Stream 액션 생성
페이지 제목 카운터를 구현하기 위해 Rails의 내장 Turbo Stream 액션(append, prepend, replace, remove)으로는 불가능한 set_title_counter라는 커스텀 액션이 필요합니다. 이 액션은 다음과 같은 단계를 거쳐 구현됩니다.
-
헬퍼 메서드 정의:
app/helpers/turbo_stream_actions_helper.rb파일에set_title_counter헬퍼 메서드를 정의합니다. 이 메서드는turbo_stream_action_tag를 호출하여action,count,divider속성을 가진<turbo-stream>HTML 태그를 생성합니다.Turbo::Streams::TagBuilder.prepend(TurboStreamActionsHelper)를 통해 이 헬퍼는 뷰의turbo_stream객체에서 사용 가능해집니다. -
Turbo Stream 태그 구조:
turbo_stream.set_title_counter @count호출 시<turbo-stream action="set_title_counter" count="5"><template></template></turbo-stream>와 같은 HTML 태그가 생성됩니다.action속성은 Turbo가 호출할 JavaScript 함수를 지정하며,count는 JavaScript 액션이 읽을 사용자 정의 데이터입니다. 비어있는<template>태그는 Turbo Stream 형식의 필수 요소입니다.
JavaScript 액션 구현 및 등록
생성된 <turbo-stream> 태그를 처리할 JavaScript 함수를 작성하고 Turbo에 등록합니다.
-
JavaScript 함수 작성:
app/javascript/turbo_stream_actions/set_title_counter.js파일에 JavaScript 함수를 정의합니다. 이 함수는this.getAttribute("count")와this.getAttribute("divider")를 통해 Turbo Stream 태그의 속성값을 읽습니다. 현재 페이지 제목에서 기존 카운터를 제거하고, 새 카운터와 구분자를 포함하여document.title을 업데이트합니다. 이 로직은 카운터가 중복되어 쌓이는 것을 방지합니다. -
Turbo에 등록:
app/javascript/turbo_stream_actions/index.js에서 작성된 JavaScript 함수를 임포트하고Turbo.StreamActions.set_title_counter = set_title_counter를 통해 Turbo에 등록합니다. 마지막으로app/javascript/application.js에서turbo_stream_actions를 임포트하고,importmap설정을 업데이트하여 새로운 디렉토리를 인식시킵니다.
Turbo Stream 브로드캐스트 연동
사용자 간의 실시간 업데이트를 위해 Turbo Stream 브로드캐스트와 연동합니다.
-
모델 콜백:
Message모델에after_commit :set_title_counter콜백을 추가합니다. 이 콜백은 메시지가 생성되거나 삭제될 때마다 실행됩니다. -
브로드캐스트 액션:
set_title_counter프라이빗 메서드 내에서broadcast_action_to :messages, action: :set_title_counter, attributes: { count: Message.count }를 호출하여 커스텀 제목 카운터 업데이트를messages채널로 브로드캐스트합니다.attributes해시는 JavaScript 액션이 읽을 HTML 태그의 속성으로 변환됩니다. -
뷰 구독: 뷰 파일에
<%= turbo_stream_from :messages %>를 추가하여messages채널의 브로드캐스트를 구독합니다. 이로써 모든 연결된 클라이언트는 다른 사용자에 의해 메시지가 생성되거나 삭제될 때 페이지 제목 카운터가 실시간으로 업데이트되는 것을 경험하게 됩니다.