Hotwire와 Ruby on Rails 7을 활용한 스타트업 프론트엔드 개발 경험

Being happy with frontend development again with Turbo (Hotwire) and StimulusJS - Jerome Paul

작성자
Ruby Australia
발행일
2025년 01월 25일
원문 보기
www.youtube.com

핵심 요약

  • 1 Hotwire를 통해 Ruby on Rails 7 기반 애플리케이션의 프론트엔드 개발 효율성을 극대화한 경험을 공유합니다.
  • 2 대용량 파일 처리 및 실시간 UI 업데이트를 위해 Hotwire의 Turbo Streams 및 Action Cable 브로드캐스팅 기능을 효과적으로 활용했습니다.
  • 3 권한 관리, 컨트롤러/템플릿 복잡성, Action Cable 메시지 크기 제한 등 Hotwire 사용 시 직면할 수 있는 주요 난관과 실질적인 해결 방안을 제시합니다.

도입

본 발표는 20년 이상의 소프트웨어 개발 경력을 가진 Jerome이 스타트업 환경에서 Ruby on Rails 7과 Hotwire를 활용하여 프론트엔드 개발을 수행한 경험을 다룹니다. 특히, Rails 7의 '1인 개발자 프레임워크' 비전에 공감하며, 프론트엔드 개발의 복잡성을 줄이고 신속하게 제품을 시장에 출시해야 하는 스타트업의 요구사항을 충족시키기 위해 Hotwire를 선택한 배경과 그 과정에서 얻은 통찰을 공유합니다. 발표자는 Hotwire가 과거 프론트엔드 개발에서 겪었던 어려움을 해소하는 데 크게 기여했다고 강조합니다.

Hotwire와 Ruby on Rails 7의 결합은 초기 단계 스타트업에서 신속한 제품 개발을 위한 핵심 전략으로 활용되었습니다. 발표자는 Rails 7이 지향하는 ‘1인 개발자 프레임워크’ 비전에 공감하며, 프론트엔드 개발에 소요되는 시간과 노력을 최소화하고자 Hotwire를 선택했습니다.

기술 스택 및 애플리케이션 개요

  • 기본 스택: Ruby on Rails (Vanilla), PostgreSQL 데이터베이스, AWS 클라우드 환경.
  • 프론트엔드: Tailwind CSS를 통한 스타일링, Hotwire (Turbo, Stimulus)를 통한 동적 UI 구현. Turbo Native는 사용되지 않았습니다.
  • 핵심 기능: 전력 시스템 엔지니어링 애플리케이션으로, 수천 개의 시뮬레이션 데이터를 담은 대용량 CSV 파일(최대 1GB)을 업로드 및 처리합니다. 백엔드에서 파일 처리 완료 시, Hotwire의 Turbo Streams 및 Action Cable을 통해 프론트엔드에 실시간으로 업데이트를 브로드캐스팅하여 사용자에게 진행 상황 및 결과를 즉시 보여줍니다. 이는 기존의 수동적인 PDF/Dropbox 기반 프로세스를 자동화하여 전력 플랜트 설계 기간을 단축하는 데 기여합니다.

Hotwire의 장점

  • JavaScript 코드 감소: Hotwire는 서버 사이드 렌더링을 기반으로 하므로, 복잡한 클라이언트 사이드 JavaScript 작성 부담을 크게 줄여줍니다. 발표자는 Angular.js 사용 경험과 비교하며 Hotwire의 효율성을 높이 평가했습니다.
  • 신속한 개발: Turbo Frames를 활용하여 페이지의 특정 영역만 업데이트하고, Turbo Streams를 통해 백엔드 이벤트를 실시간으로 프론트엔드에 반영함으로써 개발 속도를 향상시킵니다.

주요 난관 및 해결 방안

Hotwire 사용 과정에서 몇 가지 난관에 직면했으며, 이에 대한 해결책을 공유했습니다.

  1. 권한 관리 (CanCanCan과 브로드캐스팅)
    • 문제: CanCanCan과 같은 롤 기반 접근 제어(RBAC) 라이브러리는 current_user 객체에 의존하지만, 백엔드에서 브로드캐스팅 시에는 특정 current_user 컨텍스트가 부재합니다. 이로 인해 사용자별 권한에 따른 콘텐츠 필터링이 어렵습니다.
    • 해결: 브로드캐스팅 대상을 특정 사용자에게 허용된 콘텐츠로 제한하거나, 사용자 ID를 포함한 매우 구체적인 채널에 구독하도록 하여 프론트엔드에서만 관련 콘텐츠를 수신하게 합니다. 임시 방편으로 페이지 전체 새로고침(page refresh)을 사용한 적도 있으나, 권장하지 않습니다.
  2. 컨트롤러 액션 및 템플릿의 증가
    • 문제: Hotwire는 서버 사이드 상호작용을 장려하므로, 컨트롤러 액션과 템플릿/부분 템플릿(partials)의 수가 크게 증가할 수 있습니다. 이는 코드 관리의 복잡성을 초래합니다.
    • 해결: 아직 명확한 해결책을 찾지는 못했으나, 부분 템플릿을 작게 유지하여 브로드캐스팅 효율성을 높이는 방향으로 관리하고 있습니다.
  3. Action Cable 메시지 크기 제한 (PostgreSQL 어댑터)
    • 문제: PostgreSQL 어댑터 사용 시 Action Cable의 메시지 크기가 약 8KB로 제한됩니다. AWS S3에서 서명된 URL(Signed URL)을 브로드캐스팅할 때, AWS가 생성하는 JWT(JSON Web Token)의 길이가 길어 이 제한을 초과하는 문제가 발생했습니다.
    • 해결: 서명된 URL을 직접 브로드캐스팅하는 대신, 해당 URL로 리다이렉트하는 일반 링크를 브로드캐스팅하여 문제를 회피했습니다. Rails 8의 Solid Cable이 이 문제를 완화할 수 있을 것으로 언급되었습니다.
  4. 시스템 테스트의 취약성
    • 문제: Hotwire 기반 애플리케이션의 브라우저 기반 시스템 테스트는 DOM 업데이트 대기 시간 등으로 인해 취약할 수 있습니다.
    • 해결: 명확한 해결책은 없지만, 테스트 환경에서 숨겨진 필드에 콘텐츠를 삽입하여 DOM 업데이트를 명시적으로 확인할 수 있는 방법을 제안했습니다.

추가 고려사항

  • Stimulus 컴포넌트: DOM에 상태를 유지하여 디버깅에 용이하며, 다른 컴포넌트와의 상호작용 방식은 개발자의 사용 방식에 따라 달라질 수 있습니다.
  • Turbo Drive: 링크 호버 시 콘텐츠를 미리 가져오는(prefetch) 기능 등 과거 웹 기술의 장점을 현대적으로 재해석하여 사용자 경험을 개선합니다.

결론

Hotwire는 Ruby on Rails 7 환경에서 프론트엔드 개발을 혁신적으로 간소화하는 강력한 도구임을 입증했습니다. 특히 스타트업과 같이 신속한 개발이 필요한 환경에서 JavaScript 작성 부담을 줄이고, 백엔드 중심의 상호작용 모델을 통해 효율성을 극대화할 수 있습니다. 권한 관리, 컨트롤러/템플릿의 복잡성, Action Cable 메시지 크기 제한과 같은 난관이 존재하지만, 적절한 설계와 해결 방안을 통해 충분히 극복 가능합니다. 발표자는 Hotwire가 개발자에게 과거의 프론트엔드 개발 고통 없이 새로운 디자인을 구현할 수 있는 자신감을 부여했다고 강조하며, Rails 6 기반 프로젝트에서도 Hotwire 도입을 적극 권장했습니다.

관련 글들

Turbo를 활용한 폼 관리 및 프런트엔드 문제 해결 전략

Turbo Frames를 핵심으로 사용하여 페이지의 특정 영역만 업데이트함으로써, 전체 페이지 리로드 없이 일관된 사용자 경험을 제공합니다.

06/06 읽어보기 →

Rails 8과 최신 Ruby 개발 환경 탐험: AI와 함께하는 실전 경험

Rails 8은 배포 간소화 및 기본 기능 강화로 개발 경험을 크게 개선했으나, SQLite 백업, Action Text의 파일 처리, Solid Cable 인증 문제 등 여전히 고려할 점이 존재합니다.

05/28 읽어보기 →

Rails 프론트엔드: 십계명과 일곱 가지 대죄

Rails 7/8 환경에서 프론트엔드 개발의 모범 사례와 피해야 할 함정들을 '십계명과 일곱 가지 대죄'에 비유하여 설명하며, 효율적인 개발 전략을 제시합니다.

07/01 읽어보기 →

루비 온 레일즈 프론트엔드 개발: 레일즈 7의 르네상스

레일즈 7은 Input Maps, ESBuild, Turbo, Stimulus JS 등 현대적인 도구를 통해 레일즈 프론트엔드 개발의 르네상스를 가져왔습니다.

01/13 읽어보기 →

댓글 0

댓글 작성

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

아직 댓글이 없습니다

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