hotwire이란?(rails7 hotwire이란?)
BaseCamp에서 발표한 모던Web개발을 위한 어프로치이다.(모바일 개발에 대한 어프로치도 있는데 아직 미공개)
DHH의 새로운 프로젝트로 javascript사용을 극도로 제한해서 모던한 프론트 구현을 하는것이 특징
Hotwire자체는「HTML-over-the-wire」이라는 포괄적인 컨셉일뿐 모던 웹개발을 위한 기능들은 필요에 따라 Hotwire내에 있는 turbo,stimulus등을 조합해서 개발
기존의 방법과 뭐가 좋은가?
js코드량이 줄어 빠르게 모던웹 개발이 가능
기존의 방법과 뭐가 틀린가?
기존의 웹개발은 SPA에서 API를 호출해서 받아온 정보를 통해 랜더링을 한다 거기에 반해 hotwire에서는 HTML을 직접 전송해서 iframe같은 영역을 바꿔치기 하는 방식에 가까움
빠른 페이지로딩, 서버 렌더링, SPA의 속도와 반응성을 희생하지 않으면서 서버쪽에서 다양한 언어 사용 가능
언제 쓰면 좋은가?
Progressive Enhancement한 개발을 하고 싶을때 빠르게 초기개발해서 유저반응을 보고 서비스를 발전/폐기 시킬때 유용 초기 스타트업에 유용 혼자 개발할때 유용(사이드 프로젝트 개발)
처음부터 react,vue쓰면 되잖아?
vue,react를 사용하면 어떤 사양이라도 모던한 웹 개발이 가능하다는 장점이 있는 반면, 적어야 하는 코드량, 환경구축(webpack, api서버,인증 등)의 코스트가 발생함.
필자의 경험상 js로 인한 운영코스트(버그수정, 테스트코드 작성)가 어마어마함
특히 비지니스적으로 가능성이 있는지 검증되지 않는 상태에서 이 코스트를 안고 가는건 리스크
이때, hotwire을 이용하면 js코드량이 줄어들고,환경구축 비용이 들지 않기 때문에 로우 리스크로 웹 개발을 진행할 수 있음.
특히 빠르게 초기 릴리스해서 비지니스적 수요를 확인할때 유용함.
비지니스적 요건이 있는걸 확인후 클라이언트 단에서 복잡한 상태처리/유저경험을 필요로 한다면 SPA를 도입하면됨.
hotwire안에 속한개념/기능
turbo,stimulus라는게 있고 turbo안에 아래 4가지 기능이 있음
1. Turbo Drive
2. Turbo Frames
3. Turbo Streams
4. Turbo Native
기능에 대한 설명은 다른 포스트에서 하겠지만 위 기능등을 조합해서 모던웹 개발이 가능
비슷한 컨셉
Phoenix LiveView(Elixir) Laravel Livewire(PHP) StimulusReflex React Server Components
아래와 같은 서버사이드 언에서도 사용가능
정적 사이트에서도 Turbo Drive, Turbo Frames는 바로 사용가능
hotwire도입시 주의해야할점??
turbo_frame내에서 link_to,form사용시 통상적인 동작과 다른경우가 많음
예를들어 method,confirm사용하면 동작안하고 data-turbo-confirm, data-turbo-method 이런식으로 써줘야 한다던가
link_to로 다른 페이지로 이동시 data-turbo-frame="\_top" or target=”\_blank” 같이 써줘야 한다던가
이 부분은 여러검증&조사를 통해 체크해야할 부분
영어 자료도 꽤 부족하고 최신기술이기 떄문에 chatGPT를 너무 신용하지 말것
memo
1. link_to DELETE사용시 주의
<%= link_to t("sign_out"), sign_out_path, method: :delete %>
동작안함
<%= link_to t("sign_out"), sign_out_path, data: { turbo_method: :delete } %>
으로 적어줘야 동작함