얼마전에 개발 유튜브를 보다가 htmx란걸 알게되었다. 다들 어디서 이런 정보를 가져오는지 신기하다.🙄
여튼 동영상 보니까 진짜 신기하고 간편해서 좀 더 알아보려고 한다. (특히 HTMx 특수 속성...!!)

HTMx란?

HTMx는 자바스크립트 라이브러리인다. HTML의 확장으로, 웹 페이지를 더 빠르고 효율적으로 렌더링하고 사용자 상호 작용을 개선하는 데 도움이 되는 새로운 기능을 추가한다. HTMLx는 HTML5의 기존 요소와 속성을 기반으로, JavaScript를 사용하지 않고도 웹 페이지의 동작을 제어할 수 있다.
2019년 3월에 처음 발표 되었고 아직 초기 단계에 있지만 지속적으로 개발되고 있다.

HTMx의 주요기능

• 데이터 전송
  HTMx는 웹 페이지에서 다른 웹 페이지로 데이터를 전송할 수 있는 새로운 방법을 제공한다. 이를 통해 사용자는 웹 페이지를 다시 로드하지 않고도 페이지 내에서 데이터를 업데이트할 수 있다.

• 상태 관리
  HTMx는 웹 페이지의 상태를 추적하고 관리할 수 있는 새로운 방법을 제공한다. 이를 통해 사용자는 웹 페이지를 탐색하는 동안 자신의 진행 상황을 유지할 수 있다.

• 사용자 상호 작용
  HTMx는 웹 페이지의 사용자 상호작용을 개선하는 새로운 방법을 제공한다. 이를 통해 사용자는 웹 페이지와 더 자연스럽고 직관적인 방식으로 상호 작용할 수 있다.

예시

<div>
    <div id="response-div"></div>
    <button hx-post="/api/users" data-json="{ name: 'John Doe' }" hx-target="#response-div" hx-swap="beforeend">
        Register!
    </button>
</div>

위 예시는 /register 주소로 { name: 'John Doe' } 데이터를 보내고 응답결과를 #response-div 요소의 마지막 자식 요소 뒤에 삽입한다.

<div hx-get="/clicked" hx-trigger="click[ctrlKey]">Control Click Me</div>

위 예시는 컨트롤키누른 상태에서 클릭했을때 clicked API에 GET 요청을 한다.

이 외에도 다양한 속성들이 있고 이 속성들로 어떤 프로젝트를 할 수 있는지 고민해봐야겠다.
너무 간편해서 놀랐고 아직 제한적이긴 하지만 점차 여러 기능이 생기고 있는것 같다.
더 많은 정보는 공식문서에서 확인해 볼 수 있다.