노트

HTMX

htmx

프런트엔드#html · 연결된 개념 3개

쉽게 말하면

HTMX는 벽 전체를 다시 칠하지 않고 액자 속 그림만 갈아 끼우듯, 서버가 보낸 HTML 조각으로 화면 일부만 바꾸는 도구예요. 자바스크립트를 짜는 대신 HTML 속성 몇 개만 적으면 돼요.

비유가 깨지는 곳 그림은 서버가 다 그려서 보내요. 그래서 상태에서 UI를 다시 계산하는 선언형 프레임워크와 달리, 받은 조각을 hx-target 자리에 hx-swap 방식대로 끼워 넣을 뿐이에요.

HTML 속성만으로 서버에 요청을 보내고, 응답으로 받은 HTML 조각을 페이지 일부에 끼워 넣게 해 주는 작은 라이브러리. 클라이언트에서 JSON(JavaScript Object Notation)을 받아 상태와 화면을 그리는 SPA(Single Page Application)와 달리, 서버가 화면 조각을 만들어 보내는 방식(하이퍼미디어, Hypermedia)으로 돌아간다.

<button hx-get="/messages" hx-target="#list" hx-swap="innerHTML">
  불러오기
</button>
<ul id="list"></ul>
  • hx-get·hx-post·hx-put·hx-delete로 요청을 보낸다. 버튼이 아니어도 어떤 요소든 된다
  • 응답을 넣을 곳은 hx-target으로 고른다. 지정하지 않으면 요청을 보낸 요소 자신 안에 들어간다. 넣는 방식은 hx-swap(innerHTML, outerHTML, beforeend 등)
  • hx-trigger로 요청을 일으킬 이벤트를 고른다. 기본값은 요소마다 다르다(버튼은 click, 입력은 change)

트리거 수식어

<div hx-post="/seen" hx-trigger="mouseenter once">…</div>     <!-- 한 번만 -->
<input hx-get="/search" hx-trigger="keyup changed delay:300ms" /> <!-- 입력이 멈추면 -->
<div hx-get="/news" hx-trigger="click from:#refresh">…</div>   <!-- 다른 요소의 이벤트로 -->

delay로 디바운스(Debounce), once로 한 번, from:으로 다른 요소에서 온 이벤트를 듣는다. [조건] 형태의 필터로 이벤트를 걸러 낼 수도 있다.

서버 템플릿(Django, Spring의 Thymeleaf 등)과 잘 맞아서 JS(JavaScript) 빌드 없이 상호작용을 더하고 싶을 때 고려할 만하다. React의 서버 컴포넌트(React Server Components)도 "서버가 UI를 만들어 보낸다"는 점에서 비슷한 방향이지만, 컴포넌트 단위로 클라이언트 상태와 섞을 수 있다는 점이 다르다. 화면 조각을 바꿔 끼우는 방식이라 선언형 프레임워크처럼 상태에서 UI를 다시 계산하지는 않는다.

출처: htmx 공식 문서 — Triggers · htmx 공식 문서 — Trigger Modifiers · Udemy — The Complete HTMX Course

연결된 개념

이 노트를 가리키는 문서

아직 없습니다.

뜻이 가까운 노트

  • React 엘리먼트와 JSX

    React 엘리먼트(React Element)는 "화면에 무엇을 그릴지"를 설명하는 불변의 평범한 JavaScript 객체다. JSX(JavaScript XML)는 이 객체를 만드는 문법이고, 컴파일하면 createElement(새 JSX 변환에서는 jsx()) 호출이 된다.

  • XSS

    XSS(Cross-Site Scripting)는 공격자가 넣은 스크립트가 내 사이트의 출처(origin) 권한으로 사용자 브라우저에서 실행되는 공격이다. 같은 출처의 코드로 돌기 때문에 same-origin-policy가 막아 주지 못한다. 그 스크립트는 페이지를 바꾸고, 로그인한 사용자 행세를 하며 요청을 보내고, JS가 읽을 수 있는 데이터(localStorage의 토큰 등)를 빼 갈 수 있다.

  • 스트리밍 SSR

    스트리밍 SSR(Streaming Server-Side Rendering)은 서버가 페이지 전체를 다 만들 때까지 기다리지 않고, 준비된 부분의 HTML(HyperText Markup Language)부터 먼저 보내고 느린 부분은 준비되는 대로 같은 응답에 이어서 흘려보내는 렌더링 방식이다. suspense 경계가 나눔의 단위다.

  • 이벤트 버블링·캡처링과 위임

    DOM 이벤트는 대상 요소에서만 끝나지 않고 트리를 따라 전파된다. 루트에서 대상까지 내려가는 캡처링(Capturing Phase), 대상에서 처리되는 타깃 단계(Target Phase), 대상에서 루트로 올라가는 버블링(Bubbling Phase) 순서다.

  • 서버 함수와 서버 액션

    서버 함수(Server Function)는 'use server'로 표시해 서버에서만 실행되지만 클라이언트에서 네트워크 요청으로 호출할 수 있는 async 함수다. 그중 폼 제출이나 데이터 변경처럼 action 맥락(form action, transition)에서 쓰이는 것을 서버 액션(Server Action)이라 부른다. 서버 액션은 서버 함수의 부분집합이다.

보기 옵션