HTMX — JavaScript 없이 동적 웹 만들기

HTMX란

HTMX는 HTML 속성만으로 AJAX 요청, WebSocket, SSE를 처리합니다. JavaScript를 거의 작성하지 않아도 됩니다.

기본 예제

<!-- 클릭 시 서버에서 HTML 조각을 가져와 교체 -->
<button hx-get="/api/data"
        hx-target="#result"
        hx-swap="innerHTML"
        hx-indicator="#spinner">
  데이터 로드
</button>

<div id="result"></div>
<span id="spinner" class="htmx-indicator">로딩중...</span>

무한 스크롤

<div hx-get="/items?page=2"
     hx-trigger="revealed"
     hx-swap="afterend">
  로딩중...
</div>