전체 페이지 새로고침의 문제점
-
비효율성: 매번 전체 HTML 다운로드, DOM 재구성, JS/CSS 재실행.
-
사용자 경험 저하: 스크롤 위치 소실, 입력 중인 폼 데이터 초기화, 전반적인 속도 저하.
Turbo Streams의 등장과 한계
Turbo Streams는 페이지의 특정 부분을 정교하게 업데이트할 수 있도록 append, prepend, update, remove, replace와 같은 액션을 제공합니다. 이는 필요한 요소만 부분적으로 수정하여 전체 페이지 새로고침의 단점을 극복합니다.
-
장점: 정밀한 제어, 빠른 부분 업데이트.
-
단점: 요소별
.turbo_stream.erb템플릿과 컨트롤러 로직을 각각 생성해야 하므로 상용구(boilerplate) 코드가 증가합니다. 이는 앱이 커질수록 관리하기 어려워지는 복잡성을 초래할 수 있습니다.
Turbo Morphing의 도입
Turbo Morphing은 이러한 Turbo Streams의 단점을 보완하며 더 가벼운 방식의 UI 업데이트를 제공합니다. 개발자는 업데이트할 섹션의 새로운 HTML을 보내기만 하면, Turbo가 Idiomorph 라이브러리를 사용하여 기존 DOM과 새 HTML을 비교하고 변경된 부분만 최소한으로 패치합니다.
-
구현: 애플리케이션 레이아웃에
<%= turbo_refreshes_with method: :morph, scroll: :preserve %>한 줄 추가로 활성화. -
장점:
- 코드 간소화: 추가 템플릿이나 컨트롤러 액션 불필요.
- 사용자 상태 보존: 텍스트 선택, 커서 위치, 입력 중인 폼 데이터 등이 유지됩니다.
- 애니메이션 유지: 요소가 완전히 교체되지 않으므로 애니메이션이 끊기지 않습니다.
- 작은 페이로드: 가상 DOM 없이 지능적인 diff 기능만 제공.
Idiomorph의 역할
Idiomorph는 지능적이고 최소한의 DOM 업데이트를 위한 JavaScript 라이브러리입니다. 전체 요소를 교체하는 대신, 현재 DOM과 새로운 버전을 비교하여 변경된 노드만 업데이트하고 나머지는 보존합니다.
Turbo Morphing과 Turbo Streams의 선택
-
Turbo Streams: 요소별
append,prepend등 정밀한 액션, 여러 개의 분리된 타겟을 한 번에 처리할 때 유용합니다. -
Turbo Morphing: 최소한의 코드/템플릿으로 넓은 범위의 간단한 업데이트, 사용자 입력/스크롤 위치 보존에 유리합니다.
Turbo Morphing은 Turbo Broadcasts와도 원활하게 작동하여, 브로드캐스트된 부분 템플릿을 통해 모든 구독 클라이언트가 즉시 패치될 수 있도록 합니다. 이는 실시간 기능 구현을 더욱 간소화합니다.