데브허브 | DEVHUB | HTMX 4.0 sneak peek - hx-partial tag and overview!HTMX 4.0 sneak peek - hx-partial tag and overview!
- HTMX 4.0은 기존 XML HTTP Request 대신 최신 Fetch API를 사용하여 Ajax 요청을 처리하도록 내부 구조가 변경되었습니다. 🚀
- HTMX 4.0은 현재 알파 버전이므로 프로덕션 환경에서의 사용은 권장되지 않습니다. 🚧
- HTMX 4.0부터는 속성 상속(예:
hx-target)이 기본적으로 명시적으로 이루어져야 하며, inherited 수정자가 필요합니다. 🧬
- DOM 스냅샷 기반의 로컬 캐시 기록 지원이 사라지고, 대신 복원된 콘텐츠를 위해 네트워크 요청을 발행하여 코드베이스를 단순화합니다. 💾
- HTMX 2의 대부분의 핵심 기능은 4에서도 작동하며, HTMX 2는 영구적으로 지원되므로 강제적인 마이그레이션은 없습니다. 🔄
- Fetch API의 스트림 지원 덕분에 Server-Sent Events (SSE)가 HTMX 4 코어 패키지에 다시 포함되어, 단일 응답 대신 스트림 콘텐츠를 DOM에 스왑할 수 있습니다. 🌊
- Carson Gross가 개발한 개선된 DOM 모핑 알고리즘인 Edomomorph가 HTMX 4 코어에 포함되어 DOM 변경 병합 시 더 스마트한 결정을 내립니다. 🧠
- 여러 대상 콘텐츠 조각을 단일 서버 응답으로 처리하는 더 명확하고 명시적인 방법인 새로운
hx-partial 태그가 도입되어 기존 out-of-band 스왑의 복잡성을 줄여줍니다. 🧩
hx-partial 태그는 hx-target 및 hx-swap과 같은 일반 HTMX 속성을 사용하여 부분 태그가 DOM에 어떻게 스왑될지 정의할 수 있습니다. 🎯
hx-partial은 기존 out-of-band 스왑이 복잡해지던 '정교한 스왑' 사용 사례를 대체하여 UI 업데이트를 더 쉽게 추론하고 명시적으로 만듭니다. ✨
- 향상된 뷰 전환 지원, 안정화된 이벤트 순서, 확장 기능 및
hx-on 지원 개선 등이 포함됩니다. 🛠️