htmx 4.0 출시, 3.0 건너뛰고 fetch 기반 재작성

ai.euno.news 자동 뉴스 요약

htmx 팀이 개발 8개월 만에 htmx 4.0.0을 출시했다. 2024년 2.0 이후 첫 메이저 업데이트인데, 원래 예고됐던 3.0은 아예 건너뛰었다. htmx를 만든 카슨 그로스(Carson Gross)는 “htmx 3는 절대 없을 것”이라고 공언해왔던 인물이라, InfoWorld에 이번 버전 넘버링에 대해 “Oops”라는 한 단어로 소감을 밝혔다.¹

htmx는 HTML 속성만으로 AJAX, CSS 트랜지션, 웹소켓, 서버 전송 이벤트를 붙여 자바스크립트 사용을 최소화하는 하이퍼미디어 라이브러리로, Django·Go·Rails처럼 서버 렌더링 중심 백엔드에서 널리 쓰인다. 4.0의 핵심 변화는 통신 계층을 오래 써온 XMLHttpRequest에서 fetch() API로 완전히 바꾼 것이다. 이 재작성 덕에 네이티브 스트리밍이 가능해졌고, 스크립트 용량은 약 14KB 선을 유지했다. hx-get, hx-post 같은 기존 속성은 대부분 그대로 동작하지만, 이 교체 작업이 있었기에 팀이 가장 강조하는 두 기능이 나올 수 있었다. 하나는 idiomorph 기반의 내장 모핑 스왑으로, 화면을 갱신할 때 입력창 포커스 같은 DOM 상태를 그대로 보존한다. 다른 하나는 새로 추가된 hx-partial 태그로, 응답 하나로 여러 타깃을 한꺼번에 정리해서 갱신할 수 있게 했다. 기존의 out-of-band 스왑보다 다루기 깔끔해졌다는 평가다.

주의가 필요한 변경도 있다. 속성 상속이 이제 명시적으로 바뀌어, 부모 요소의 속성이 자식에게 전달되려면 :inherited 접미사를 붙여야 한다.

<div hx-confirm:inherited="Are you sure?">
  <button hx-delete="/item/1">Delete</button>
</div>

DEV Community의 상세 리뷰는 이 부분을 업그레이드 시 가장 조심해야 할 함정으로 꼽았다. 예를 들어 CSRF 토큰을 자식 요소로 넘기던 hx-headers 속성이 :inherited 없이는 조용히 작동을 멈추고, 서버가 요청을 403으로 거부하는데도 겉으로는 아무 문제가 없어 보인다는 것이다.¹ 이벤트 이름 체계도 htmx:afterRequest가 htmx:after:request로 바뀌는 식으로 htmx:단계:동작 패턴으로 통일됐고, 히스토리 기능은 더 이상 DOM을 localStorage에 스냅샷으로 저장하지 않고 페이지를 다시 불러오는 방식으로 바뀌어 서드파티 스크립트와의 충돌 문제를 해결했다. 이 밖에 요청 타임아웃이 60초로 새로 생겼고, hx-disable이 hx-ignore로 바뀌는 등 속성 이름 변경도 여럿 있다.

호환성 관리는 신중하게 이뤄졌다. htmx 4.0은 npm에서 latest가 아닌 next 태그로 배포되어, 버전을 명시하지 않은 CDN 링크를 쓰는 사용자가 강제로 업그레이드되지 않도록 했고 2.x 계열도 계속 지원한다. 팀은 상속 문제나 이름이 바뀐 속성·이벤트를 찾아주는 커맨드라인 검사 도구도 제공한다.

npx [email protected] upgrade-check -- ./templates

반응은 갈린다. Hacker News 게시글은 700점을 넘겼고, Go·SQLite·htmx 조합과 AI 코딩 도구와의 궁합을 칭찬하는 댓글이 이어졌다. 한 개발자는 “Claude가 htmx를 잘 이해하고 잘 다룬다”고 적었고, r/htmx의 출시 공지 게시물도 300개 넘는 추천을 받았다. 반면 .NET·Angular 개발자 일부는 htmx가 프레젠테이션 로직과 비즈니스 로직을 뒤섞게 만든다고 비판했고, 이에 동의하며 팀이 다시 React로 돌아가고 있다고 밝힌 개발자도 있었다.¹

읽기 목록은 이 브라우저에 저장됩니다.