| <colbgcolor=#3d72d7><colcolor=#fff> htmx | |
| | |
| 제작사 | Big Sky Software |
| 분류 | 웹 프레임워크 |
| 출시 | 2022년 8월 21일 |
| 언어 | JavaScript |
| 버전 | 1.9.10 |
| 라이선스 | BSD-2 라이선스 |
| 링크 | |
[clearfix]
1. 개요
htmx는 2022년 intercooler.js 로부터 프로젝트 명칭을 바꿔 정식 출시한 오픈 소스 프론트엔드 웹 프레임워크이다.2. 특징
- 종속성이 없는 프론트엔드 프로젝트이다. 스크립트 첨부만 하면 바로 작동할 수 있다.[1]
- 기존 AJAX 기법을 HTML 마크업 만으로 서버로부터 데이터를 불러와 부분을 바꿀 수 있다.
- CSS Transition 을 지원하여 기본적인 애니메이션 대응이 가능하다.
- 기존 Ajax를 비롯하여 Server Sent Events, 아직 실험적이지만 Websocket 통신을 지원한다.
- IE는 11을 지원한다.
- 같은 프로젝트 기준, React 대비 약 60%의 코드 양으로 구현 가능하다고 주장한다.
- 확장을 지원하며, 당연히 자바스크립트가 필요하지만 어렵지 않게 구현할 수 있다.
2.1. 장점
근래 프론트엔드 대비 흔치 않는 스크립트만 첨부하면 되는 방식으로 설치가 끝나 설치가 쉬운 점, HTML, CSS 정도까지만으로도 서버 통신을 통한 풍부하고 동적인 웹 문서 프로젝트를 만들 수 있다는 점, 필요한 옵션 및 컨트롤은 HTML 내 특성(Attribute) 로 컨트롤하여 해결할 수 있도록 설계되어 있는 점 등으로 깃허브의 엑셀러레이터에 들 정도로 오픈소스 진영과 자바스크립트에 질린 개발자들에게 주목을 받고 있다.따라서 자신이 Javascript를 모르거나 혹은 사용의 부담이 클 때 이 프로젝트를 사용하여 해결할 수 있다. 그 이외로도 주로 자바스크립트와 거리가 먼 Python이나 Rust 등의 언어로 이루어진 서버와 통신을 통한 컨텐츠가 주류일 경우에 추천하는 프로젝트.
2.2. 단점
가장 많이 쓰이는 서버 통신에 스크립트 없이 구현을 목적으로 만든 프로젝트다 보니 그 외의 용도부터는 이 프로젝트와 거리가 멀어진다. 결국 용도 외적으로 쓰려 할 경우 자바스크립트가 필요하게 되며 당연하겠지만 충분한 자바스크립트 지식이 필요하다.예를 들어 캐러셀, 데이터그리드, 차트 등의 고급 컴포넌트를 구현해야 할 경우 등이 있다. 기본적으로 이 라이브러리는 자바스크립트 간의 직접적인 연동과 궁합이 맞지 않으며 이런 컨텐츠들은 서버 사이드 만으로는 한계가 있기 때문에 리액트 등의 고급 프론트엔드 기술로 눈을 돌리기도 한다.
추가로 2020년에 시작된 프로젝트인지라[2] 2024년 기준 다른 오래된 대규모 프로젝트들에 비해 관련 인터넷 자료가 풍부하지 않다는 점도 있다.
3. 예시
#!syntax html
<!-- 아래 태그를 head 요소에 넣으면 설치 끝. -->
<script src="https://unpkg.com/[email protected]"></script>
<!-- 아래 버튼을 누르면, /clicked 경로를 HTML POST 방식으로 받은 응답으로 아래 내용이 교체된다. -->
<button hx-post="/clicked" hx-swap="outerHTML">
여기를 클릭하세요!
</button>
주의사항: 서버의 응답 형식은 JSON 같은 데이터 교환 방식이 아니라, 브라우저의 내용을 표시할 수 있는 HTML이어야 한다.
예) PHP 응답 예시
#!syntax php
<?php
// clicked.php
echo "<strong>여기를 클릭했습니다!</strong>";
?>
4. 인기
자바스크립트를 거의 쓰지 않고도 서버로부터 데이터를 가져와 부분 렌더링을 실현하는 방식이기 때문에, 백엔드에 역량을 집중할 수 있는 장점으로 백엔드 위주의 프레임워크나 라이브러리, 혹은 프로젝트에서 htmx 를 프론트엔드로 많은 주목을 받고 있다.이에 반해 한국에서는 Github 엑셀리레이터 등재로 인해 주목을 끌기는 시작했으나, 풀스택의 부담을 덜 수 있는 이 획기적인 라이브러리의 의의를 모르는 사람이 많은 것이 현실이다.
5. 여담
제작사는 HTML 을 개발 언어로 만드는 비범함까지 선보이고 있다. https://html-lang.org/6. 대안
심지어 별도의 라이브러리조차 필요 없이 비슷한 방법을 적용할 수 있는 코드가 공개되었다.설치는
<body> 태그 적당한 곳에 아래 소스를 첨부하면 끝.#!syntax html
<iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(contentWindow.location.hash||null)?.replaceWith(...contentDocument.body.childNodes))"></iframe>
사용법은 프레임 대상으로 링크나 양식을 작동하도록 걸면 된다.
#!syntax html
<a href="/example#my-target" target=htmz>GET 기본 가져오기</a>
<form action="/default#my-target" target=htmz method="POST">
<button>POST 기본 액션</button>
<button formaction="/button#my-target">
POST 다른 주소 액션
</button>
<button formaction="/another-action#another-target">
POST 다른 주소와 다른 첨부 위치 액션
</button>
</form>
<div id="my-target">호출 후 이 부분의 내용이 대체된다.</div>
7. 시조
javascript fatigue:
longing for a hypertext
already in hand
longing for a hypertext
already in hand
피곤한 자바스크립트
하이퍼텍스트의 갈망
이미 내 손안에
하이퍼텍스트의 갈망
이미 내 손안에