[번역] Htmx: 웹 앱을 만드는 가장 새로운 오래된 방법

출처: https://blog.logrocket.com/htmx-the-newest-old-way-to-make-web-apps/

소개

Htmx는 HTML 요소에서 직접 AJAX 요청을 수행하고, CSS 전환을 트리거하고, WebSocket 및 서버 전송 이벤트를 호출하기 위한 자바스크립트 라이브러리입니다. Htmx를 사용하면 간단한 마크업으로 현대적이고 강력한 사용자 인터페이스를 구축할 수 있습니다.

이 라이브러리의 무게는 약 10KB(min.gzip 시)이며, 종속성이 없고(즉, 실행하는 데 다른 자바스크립트 패키지가 필요하지 않음), IE11과도 호환됩니다.

이 튜토리얼에서는 다음 항목들을 다루면서 htmx의 강력한 기능을 살펴보겠습니다.

• htmx 설치하기
• htmx로 AJAX 요청 보내기
• 사용자 정의 htmx 입력 유효성 검사
• htmx로 CSS 애니메이션 만들기

htmx 설치하기

아래와 같이 htmx 소스 파일을 다운로드하거나 마크업에 직접 CDN을 포함시켜 htmx를 시작할 수 있습니다.

<script src="https://unpkg.com/htmx.org@1.3.3"></script>

위의 스크립트는 이 글을 쓰는 시점의 현재 안정적인 버전인 v1.3.3의 htmx를 웹페이지에 로드합니다. 이 작업이 완료되면 웹페이지에서 htmx 기능을 구현할 수 있습니다.

htmx로 AJAX 요청 보내기

Htmx는 HTML 요소에서 직접 AJAX 요청을 보낼 수 있는 속성들을 제공합니다. 사용 가능한 속성은 다음과 같습니다.

• hx-get - 제공된 URL로 GET 요청을 보냅니다.
• hx-post - 제공된 URL로 POST 요청을 보냅니다.
• hx-put - 제공된 URL로 PUT 요청을 보냅니다.
• hx-patch - 제공된 URL로 PATCH 요청을 보냅니다.
• hx-delete - 제공된 URL로 DELETE 요청을 보냅니다.

코드 예시

<button hx-get="http://localhost/todos">Load Todos</button>

위 코드는 사용자가 버튼을 클릭하면 제공된 URL(이 경우 http://localhost/todos)로 GET 요청(hx-get)을 보내도록 브라우저에 지시합니다.

기본적으로 모든 htmx 요청에서 반환된 응답은 요청을 전송한 요소에 로드됩니다. AJAX 요청에 대한 요소 타겟팅 섹션에서는 다른 HTML 요소에 응답을 로드하는 방법을 살펴보겠습니다.

요청 트리거하기

htmx에서 AJAX 요청은 요소의 네이티브 이벤트에 의해 트리거된다는 점에 유의해야 합니다. 예를 들어 input, select 및 textarea는 onchange 이벤트에 의해 트리거되고 form은 onsubmit 이벤트에 의해 트리거되며 그 외 모든 것은 onclick 이벤트에 의해 트리거됩니다.

요청을 트리거하는 이벤트를 수정하고 싶은 경우, htmx는 이를 위한 특수 hx-trigger 속성을 제공합니다.

<div hx-get="http://localhost/todos" hx-trigger="mouseenter">
  Mouse over me!
</div>

위 예시에서는 사용자의 마우스가 div 위에 있는 경우에 GET 요청이 제공된 URL로 전송됩니다.

트리거 수정자

이전 섹션에서 언급한 hx-trigger 속성은 트리거의 동작을 변경하기 위한 추가 수정자를 허용합니다. 사용 가능한 트리거 수정자는 다음과 같습니다.

• once - 요청이 한 번만 발생하도록 합니다.
• changed - HTML 요소의 값이 변경된 경우 요청을 보냅니다.
• delay:<time interval> - 요청을 보내기 전에 지정된 시간 동안 기다립니다(예: dalay:1s). 이벤트가 트리거되면 카운트다운이 재설정됩니다.
• throttle:<time interval> - 요청을 보내기 전에 지정된 시간 동안 기다립니다(예: throttle:1s). 그러나 지연과 달리 시간 제한에 도달하기 전에 새 이벤트가 발생하면 이벤트가 대기열에 추가되어 이전 이벤트가 끝날 때 트리거됩니다.
• from:<CSS Selector> - 다른 요소에서 이벤트를 기다립니다.

코드 예시

<input
  type="text"
  hx-get="http://localhost/search"
  hx-trigger="keyup changed delay:500ms"
/>

이 코드는 사용자가 입력 요소에 keyup 이벤트를 수행하고(즉, 사용자가 인풋에 텍스트를 입력하는 경우) 이전 값이 변경되면 브라우저는 500ms 후에 자동으로 http://localhost/search 로 GET 요청을 보냅니다.

htmx-trigger 속성을 사용한 폴링

htmx-trigger 속성에서는 요청을 트리거하는 이벤트를 기다리지 않고 n초마다 트리거하도록 지정할 수도 있습니다. 이 옵션을 사용하면 n 초마다 특정 URL에 요청을 보낼 수 있습니다.

<div hx-get="/history" hx-trigger="every 2s"></div>

위의 코드 샘플은 브라우저에 2초마다 /history 엔드포인트에 GET 요청을 보내고 응답을 div에 로드하도록 지시합니다.

AJAX 요청에 대한 요소 타겟팅

이전 섹션에서 htmx에서 AJAX 요청의 응답은 요청을 수행하는 요소에 로드된다고 언급했습니다. 응답을 다른 요소에 로드해야 하는 경우 hx-target 속성을 사용하여 이를 수행할 수 있습니다. 이 속성은 CSS 선택자를 사용할 수 있고 지정된 선택자가 있는 HTML 요소에 AJAX 응답을 자동으로 삽입합니다.

이를 사용하여 to-do 샘플을 이렇게 수정할 수 있습니다.

<button hx-get="http://localhost/todos" hx-target="#result">Load Todos</button>
<div id="result"></div>

이전 예제와 달리 이 코드 샘플은 http://localhost/todos 으로 요청을 전송하고 id=result값을 갖는 div에 응답을 로드합니다.

DOM에 반환된 HTML 바꾸기

hx-target과 비슷하게 hx-swap 속성은 반환된 AJAX 응답이 DOM에 로드되는 방식을 정의하는 데 사용됩니다. 지원되는 값은 다음과 같습니다.

• innerHTML - 기본값으로, 이 옵션은 요청을 전송하는 현재 요소 내부에 AJAX 응답을 로드합니다.
• outerHTML - 이 옵션은 요청을 전송하는 전체 요소를 반환된 응답으로 대체합니다.
• afterbegin - 요청을 보내는 요소의 첫 번째 자식에 응답을 로드합니다.
• beforebegin - 요청을 보내는 요소의 부모 요소로 응답을 로드합니다.
• beforeend - 요청을 보내는 요소의 마지막 자식 다음에 AJAX 응답을 로드하고 추가합니다.
• afterend - 이전과 달리 요청을 보내는 요소 다음에 AJAX 응답을 추가합니다.
• none - 이 옵션은 AJAX 요청의 응답을 추가하지 않습니다.

요청 표시기

AJAX 요청을 전송할 때 사용자에게 백그라운드에서 어떤 일이 일어나고 있음을 알리는 것이 좋습니다. 브라우저는 이 작업을 자동으로 수행하지 않습니다. htmx에서 htmx-indicator 클래스를 사용하면 쉽게 이 작업을 수행할 수 있습니다.

예시를 함께 살펴볼까요.

<div hx-get="http://path/to/api">
  <button>Click Me!</button>
  <img class="htmx-indicator" src="path/to/spinner.gif" />
</div>

htmx-indicator 클래스로 정의된 HTML 요소의 opacity는 기본적으로 0으로 설정되어 있으므로 요소는 보이지 않지만 DOM에는 존재합니다.

그리고 AJAX 요청을 실행하면 htmx는 요청을 보내는 요소에 새 htmx-request 클래스를 자동으로 추가합니다. 이 새 htmx-request 클래스는 htmx-indicator 클래스가 있는 하위 요소의 opacity를 1로 전환하여 표시기를 표시합니다.

데이터 요청

폼이나 인풋 요소에 의해 AJAX 요청이 트리거된 경우 기본적으로 htmx는 요청에 모든 입력 필드의 값을 자동으로 포함합니다.

그러나 다른 요소의 값을 포함하려는 경우 hx-include 속성을 사용해 요청에 포함할 값을 가진 모든 요소의 CSS 선택자를 추가할 수 있습니다.

코드 샘플

<div>
  <button hx-post="http://path/to/api/register" hx-include="[name=username]">
    Register!
  </button>
  Enter Username: <input name="username" type="text" />
</div>

위의 코드 샘플에서와 같이 /register 엔드포인트로 요청을 보내면 AJAX 요청 본문에 이메일 필드가 자동으로 포함됩니다.

매개변수 필터링

Htmx는 또한 AJAX 요청이 전송될 때 제출될 매개변수만 필터링할 수 있는 또 다른 htmx-params 속성을 제공합니다.

<div hx-get="http://path/to/api/example" hx-params="*">Send Request</div>

위의 코드 샘플에는 페이지의 모든 입력 요소가 요청 매개변수로 포함됩니다.

가능한 모든 값은 다음과 같습니다.

• * - 웹 페이지에 있는 모든 매개변수를 포함하여 AJAX 요청에 함께 전송합니다.
• none - 요청에 매개변수를 포함하지 않습니다.
• not <param-list> - 다른 모든 매개변수를 포함하며 쉼표로 구분된 매개변수 이름 목록은 제외합니다.
• <param-list> - 쉼표로 구분된 모든 매개변수 이름만 목록에 포함합니다.

####
파일 업로드

htmx를 사용하면, 요청을 보내는 실제 요소의 부모 요소에 multipart/form-data 값을 갖는 hx-encoding 속성을 추가하여 이미지, 동영상, PDF 등의 파일을 백엔드에 쉽게 전송할 수 있습니다.

<form hx-encoding="multipart/form-data">
  Select File:
  <input type="file" name="myFile" />
  <button hx-post="http://path/to/api/register" hx-include="[name='myFile']">
    Upload File!
  </button>
</form>

사용자 지정 htmx 입력 유효성 검사

Htmx는 기본적으로 HTML5 유효성 검사 API와 통합되어 있으며 입력이 유효하지 않은 경우 요청을 보내지 않습니다. 이 기능은 AJAX 요청과 웹소켓 이벤트 모두에서 작동합니다.

이 외에도 htmx는 유효성 검사 관련 이벤트를 발생시키므로 사용자 정의 입력 유효성 검사 및 에러 처리에 매우 유용할 수 있습니다.

사용 가능한 유효성 검사 이벤트는 다음과 같습니다.

• htmx:validation:validate - 이 이벤트는 요소의 유효성을 검사하기 전에 호출되므로 사용자 지정 로그인 유효성 검사를 추가하는 데 유용합니다.
• htmx:validation:failed - 이 이벤트는 요소 유효성 검사가 false를 반환할 때(즉, 잘못된 입력을 나타낼 때) 발생합니다.
• htmx:validation:halted - 입력 유효성 검사 에러로 인해 요소가 요청을 보낼 수 없을 때 이 이벤트가 호출됩니다.

htmx로 CSS 애니메이션 만들기

Htmx는 AJAX 이벤트는 물론 일반적으로 웹페이지에 부드러운 CSS 전환을 쉽게 더할 수 있는 방법을 제공합니다.

class-tool 사용

htmx class-tool은 자바스크립트 코드를 작성하지 않고도 HTML 요소에서 특정 클래스 이름을 토글, 추가 또는 제거하는 데 쉽게 사용할 수 있는 확장 기능입니다.

요소에 classes 속성을 추가한 다음 작업을 지정한 다음, 추가하거나 제거할 클래스 이름을 지정하면 이 확장 기능을 사용할 수 있습니다.

<div classes="add sample-class:1s"></div>

위의 코드 샘플에서와 같이 브라우저 콘텐츠가 로드되면 htmx는 1초 후에 자동으로 div에 새 클래스(sample-class)를 추가합니다.

또한 각 액션을 쉼표(,)로 구분하여 액션 대기열을 만들거나 앤드(&)로 구분하여 여러 액션을 동시에 실행하도록 할 수도 있습니다.

<!-- class tool 큐 -->

<div
  classes="add sample-class:1s, remove another-class:2s, toggle 3rd-class:1s"
></div>

<!-- 여러 액션 동시 실행 -->

<div
  classes="add sample-class:1s & remove another-class:2s & toggle 3rd-class:1s"
></div>

아래는 요소의 가시성을 토글하는 예제입니다.

<style>
  .demo.faded {
    opacity: 0.3;
  }
  .demo {
    opacity: 1;
    transition: opacity ease-in 900ms;
  }
</style>
<div class="demo" classes="toggle faded:1s">I'm Fading! ⚡</div>

요약

이 글에서는 htmx 설치 방법, AJAX 요청을 보내는 방법, 폼 유효성 검사, 자바스크립트 코드를 작성하지 않고도 CSS 애니메이션을 만드는 방법에 대해 살펴보았습니다.

Htmx는 아직 개발 중이므로 이 글에서 다루지 않은 WebSocket 및 서버 전송 이벤트에 대한 실험적 지원을 제공합니다. WebSocket 및 SSE 지원에 대한 자세한 내용은 htmx 문서에서 확인할 수 있습니다.

GitHub에서 htmx에 기여하세요.