Hotwire 실전 사용 후기: 장점과 숨겨진 함정, 그리고 극복 방안

핵심 기술: Hotwire (Turbo 및 Stimulus)는 JavaScript 프레임워크 없이도 빠르고 실시간적인 업데이트를 제공하지만, 실제 프로덕션 환경에서는 예상치 못한 성능 저하와 복잡성을 야기할 수 있습니다. 이 글은 Hotwire의 실질적인 문제점과 이를 해결하기 위한 실용적인 팁을 공유합니다.

기술적 세부사항:

• DOM 노드 메모리 관리 문제:
  • Turbo Stream 업데이트 시 기존 DOM 노드가 메모리에서 제거되지 않아 장기 실행 페이지(예: 대시보드)에서 DOM 요소가 10,000개 이상으로 bloat될 수 있습니다.
  • 증상: 버튼 클릭 시 5초 지연, 저사양 기기에서 Chrome 충돌.
  • 해결책: data-turbo-permanent 속성을 사용하지 않는 오래된 DOM 노드를 제거하는 스크립트 실행 (예: .notification:not([data-turbo-permanent]) 선택자 사용).
• WebSocket 연결 부하 문제:
  • 10,000명의 동시 사용자 시 10,000개의 지속적인 WebSocket 연결이 발생하며, Redis + Action Cable은 이러한 부하를 견디기 어렵습니다.
  • 증상: 비정상적인 연결 끊김, 연결 오버헤드로 인한 CPU 사용량 30% 증가.
  • 해결책: 프로덕션 환경에서 Redis 대신 NATS와 같은 확장 가능한 어댑터 사용.
• Turbo Frame의 상태 지속성 문제:
  • 다단계 폼에서 사용자가 다른 페이지로 이동하면 폼 상태가 사라집니다.
  • 해결책: turbo:before-cache 이벤트 리스너를 사용하여 localStorage에 상태를 수동으로 저장하고 복원.
• 오류 발생 시 UI 피드백 부재:
  • Turbo Stream 업데이트 실패 시 사용자에게 아무런 피드백 없이 페이지 변경이 일어나지 않습니다.
  • 해결책: turbo:before-fetch-response 이벤트 리스너에서 실패 시 사용자에게 알림 표시 (예: alert("Update failed. Please refresh.");).

피해야 할 시나리오:

• 고상호작용 애플리케이션 (예: Figma 스타일 도구)
• 트래픽이 많은 공개 페이지 (WebSocket 비용 증가)
• 오프라인 지원이 필요한 애플리케이션 (Turbo 캐싱이 제한적)

Golden Rule:

• Hotwire는 Enhancements (기능 개선) 용도로 사용하고, Total SPA Replacement (완전한 SPA 대체) 용도로는 지양해야 합니다.

Basecamp의 Hotwire 활용 및 교훈:

• Basecamp는 전담 인프라 팀을 통해 Hotwire를 대규모로 사용합니다.
• 교훈: 1. 작게 시작하고 (하나의 Turbo Stream부터), 2. WebSocket 메모리 사용량을 면밀히 모니터링하며, 3. 복잡한 UI에는 SPA가 더 적합함을 인지하고 전환할 때를 알아야 합니다.

개발 임팩트: Hotwire를 효과적으로 사용하면 서버 렌더링의 장점과 SPA 같은 사용자 경험을 결합할 수 있지만, 실시간 업데이트, 복잡한 상태 관리, 대규모 동시 접속 환경에서는 신중한 접근과 추가적인 최적화가 필요합니다. 위에서 제시된 문제점들을 이해하고 적절한 해결책을 적용하면 Hotwire의 이점을 극대화할 수 있습니다.