htmx

1. 개요[편집]

---

htmx는 2022년 intercooler.js 로부터 프로젝트 명칭을 바꿔 정식 출시한 오픈 소스 프론트엔드 웹 프레임워크이다.

2. 특징[편집]

---

• 종속성이 없는 Node.js 프론트엔드 프로젝트이다.
• 기존 AJAX 기법을 HTML 마크업 만으로 서버로부터 데이터를 불러와 부분을 바꿀 수 있다.
• CSS Transition 을 지원하여 애니메이션 대응이 가능하다.
• 기존 Ajax를 비롯하여 Server Sent Events, Websocket 통신을 지원한다.
• IE 11을 지원한다.
• 같은 프로젝트 기준, React 대비 약 60%의 코드 양으로 구현 가능하다.

2.1. 장점[편집]

---

HTML, CSS 정도까지만으로도 서버 통신을 통한 풍부하고 동적인 웹 문서 프로젝트를 만들 수 있다.
따라서, 자신이 Javascript를 모르거나, 혹은 사용의 부담이 클 때, 이 프로젝트를 사용하여 해결할 수 있다.
왠만한 컨트롤은 HTML 내 특성(Attribute) 로 컨트롤하여 해결할 수 있고, 주로 서버와 통신을 통한 컨텐츠가 주류일 경우에 추천하는 프로젝트.
GitHub 엑셀러레이터에 들 정도로 오픈소스 진영에서 많은 주목을 받고 있을 정도로 자바스크립트에 질린 개발자들에게 좋은 선택을 받고 있다.

2.2. 단점[편집]

---

자바스크립트가 필요로 하는 기능에 대해서는 당연하겠지만 충분한 자바스크립트 지식이 필요하다.
예를 들면, 캐러셀, 데이터그리드, 차트 등의 고급 컴포넌트를 구현해야 할 경우 등이 있다.
이런 컨텐츠들은 서버단 만으로는 한계가 있기 때문에 리액트 등의 고급 프론트엔드 기술로 눈을 돌리기도 한다.
또한, 신생 프로젝트까지는 아니지만, 주목받은 시기가 시기인만큼, 아직 생태계는 많이 부족하다.

3. 예시[편집]

---

<script src="https://unpkg.com/[email protected]"></script>
<!-- 아래 버튼을 누르면, /clicked 경로를 HTML POST 방식으로 받은 응답으로 아래 내용이 교체된다. -->
<button hx-post="/clicked" hx-swap="outerHTML">
  여기를 클릭하세요!
</button>

주의사항: 서버의 응답 형식은 JSON 같은 데이터 교환 방식이 아니라, 브라우저의 내용을 표시할 수 있는 HTML이어야 한다.
예) PHP 응답 예시

<?php
// clicked.php
echo "<strong>여기를 클릭했습니다!</strong>";
?>

4. 인기[편집]

---

자바스크립트를 거의 쓰지 않고도 서버로부터 데이터를 가져와 부분 렌더링을 실현하는 방식이기 때문에, 백엔드에 역량을 집중할 수 있는 장점으로 백엔드 위주의 프레임워크나 라이브러리, 혹은 프로젝트에서 htmx 를 프론트엔드로 많은 주목을 받고 있다.
이에 반해 한국에서는 풀스택의 부담을 덜 수 있는 이 획기적인 라이브러리의 존재를 모르거나, 존재를 알고 있다고 해도 이 라이브러리의 의의를 모르는 사람이 많은 것이 현실이다.

5. 여담[편집]

---

제작사는 HTML 을 개발 언어로 만드는 비범함까지 선보이고 있다. https://html-lang.org/

6. 시조[편집]

---

javascript fatigue:

longing for a hypertext

already in hand

피곤한 자바스크립트

하이퍼텍스트의 갈망

이미 내 손안에

7. 관련 문서[편집]

---

• 웹 프레임워크
• 라이브러리
• React
• JavaScript