Turbo의 핵심 구성 요소 및 작동 원리
Hotwire의 핵심인 Turbo는 크게 세 가지 기술적 기둥으로 지탱됩니다.
-
Turbo Drive: 웹 애플리케이션의 네비게이션을 최적화합니다. 사용자가 링크를 클릭하거나 폼을 제출할 때, 이를 가로채서
fetch요청으로 변환합니다. 서버 응답에서<body>콘텐츠만 교체하고 브라우저 히스토리를 업데이트하여 전체 페이지 리로드 없이 즉각적인 화면 전환을 제공합니다. -
Turbo Frames: 페이지의 특정 부분을 독립적인 컨텍스트로 캡슐화합니다. 프레임 내의 모든 동작은 해당 범위 내에서만 발생하며, 서버는 필요한 HTML 조각만 반환하여 해당 영역만 동적으로 업데이트합니다. 이는 복잡한 상태 관리 없이도 효율적인 부분 렌더링을 가능케 합니다.
-
Turbo Streams: 서버에서 클라이언트로 실시간 변경 사항을 전달하는 강력한 수단입니다. WebSocket이나 HTTP 응답을 통해 서버가 HTML 스니펫을 푸시하면, 클라이언트는 이를 받아 특정 DOM 요소를 추가, 삭제 또는 수정합니다.
기술적 이점
-
JavaScript 최소화: 대부분의 상호작용이 서버 사이드에서 처리되므로 클라이언트 측에서 작성해야 할 JavaScript 코드 양이 획기적으로 줄어듭니다.
-
빠른 초기 로딩: 거대한 JS 번들을 다운로드하고 실행할 필요가 없어 사용자는 즉각적으로 렌더링된 콘텐츠를 볼 수 있으며 모바일 환경에서도 효율적입니다.
-
유지보수의 용이성: 서버와 클라이언트 간의 API 설계 및 데이터 동기화 문제를 최소화하여 단일화된 코드베이스 관리가 가능해집니다.