기존 _todo.html.erb 파일의 div 기반 구조는 li 요소로 대체되어 목록의 의미론적 정확성을 높였습니다. 각 li 요소에는 id="<%= dom_id(todo) %>" 속성이 추가되어 Turbo Streams가 특정 항목을 효율적으로 타겟팅하고 업데이트할 수 있도록 기반을 마련했습니다. 할 일 항목의 상태 표시는 [x] (완료) 또는 [ ] (미완료) 형태로 시각화되어 사용자가 한눈에 상태를 파악할 수 있게 개선되었습니다. 제목(todo.title)에는 span class="todo-title"이 적용되었으며, 할 일이 완료된 경우 completed 클래스가 동적으로 추가되어 취소선 스타일을 통해 시각적인 피드백을 제공합니다. 가장 중요한 변화는 div class="todo-actions" 내에 기능 버튼이 추가된 것입니다. 이 버튼들은 할 일의 상태를 ‘완료’ 또는 ‘미완료’로 전환하는 기능과 할 일을 삭제하는 기능을 제공합니다. 삭제 버튼에는 사용자 확인을 위한 confirm 프롬프트가 포함되어 오작동을 방지합니다. 모든 버튼에는 data: { turbo: false } 속성이 명시적으로 추가되었습니다. 이 속성은 Turbo Streams가 해당 폼 제출을 가로채는 것을 방지하여, 전통적인 HTTP 요청 및 페이지 새로고침 동작을 유도합니다. 이는 특정 상호작용에서 Turbo의 기본 동작을 오버라이드해야 할 때 유용하게 활용될 수 있습니다.
Rails 8 및 Turbo Streams를 이용한 실시간 할 일 목록 기능 개선
Build a Real-Time Todo List with Rails 8 and Turbo Streams | by J3 | Medium
작성자
jeff
발행일
2025년 03월 19일
핵심 요약
- 1 본 문서는 Rails 애플리케이션에서 할 일 목록 항목의 `_todo.html.erb` 뷰 파일을 개선하는 방법을 설명합니다.
- 2 기존의 단순한 `div` 구조를 기능적 `li` 요소로 변경하고, 상태 표시 및 동적 스타일링을 추가하여 사용자 경험을 향상시킵니다.
- 3 완료/미완료 토글 및 삭제 버튼을 구현하며, Turbo Streams의 기본 동작을 제어하는 `data: { turbo: false }` 속성 사용법을 다룹니다.
도입
이 문서는 Ruby on Rails 8 및 Turbo Streams를 활용하여 실시간 할 일 목록 애플리케이션의 사용자 인터페이스와 상호작용을 개선하는 구체적인 방법을 제시합니다. 특히 `_todo.html.erb` 부분 템플릿의 변환 과정을 통해, 기존의 정적인 할 일 항목을 더욱 동적이고 기능적인 형태로 발전시키는 데 중점을 둡니다. 이는 애플리케이션의 시각적 매력을 높이고 사용자에게 더욱 직관적인 상호작용을 제공하는 것을 목표로 합니다.
결론
결론적으로, 이 `_todo.html.erb` 파일의 변환은 Rails 애플리케이션 내에서 할 일 항목의 기능성과 시각적 매력을 크게 향상시킵니다. 구조적 개선, 명확한 상태 표시, 동적 스타일링, 그리고 직관적인 액션 버튼의 추가는 사용자 경험을 풍부하게 만듭니다. 특히 Turbo Streams와의 통합을 고려한 `dom_id` 사용과 `data: { turbo: false }`를 통한 세밀한 제어는 현대적인 웹 애플리케이션 개발에서 중요한 고려사항임을 보여줍니다. 이러한 변경사항은 사용자가 할 일 목록과 더욱 효율적이고 즐겁게 상호작용할 수 있도록 돕습니다.