[include(틀:웹 프레임워크)]

||<-2><table width=350><table align=right><table bordercolor=#3d72d7><colbgcolor=#3d72d7><colcolor=#fff><table bgcolor=#fff,#3d72d7> {{{+1 '''htmx'''}}} ||
||<-2><bgcolor=#fff> [[파일:htmx.svg|width=100%]] ||
||<width=30%> '''제작사''' ||[[https://bigsky.software/|Big Sky Software]] ||
|| '''분류''' ||[[웹 프레임워크]] ||
|| '''출시''' ||[[2021년]] [[6월 28일]] ||
|| '''언어''' ||[[JavaScript]] ||
|| '''버전''' ||1.9.9 ||
|| '''라이선스''' ||BSD-2 라이선스 ||
|| '''링크''' ||[[https://htmx.org/|[[파일:홈페이지 아이콘.svg|width=20]]]] [include(틀:GitHub 로고,링크=bigskysoftware/htmx,크기=20)] [include(틀:트위터 로고,링크=htmx_org,크기=20)] [[https://htmx.org/discord|[[파일:디스코드 아이콘.svg|width=20]]]] ||

[목차]
[clearfix]
== 개요 ==
htmx는 [[2022년]] [[https://intercoolerjs.org/|intercooler.js]] 로부터 프로젝트 명칭을 바꿔 정식 출시한 오픈 소스 [[프론트엔드(프로그래밍)|프론트엔드]] [[웹 프레임워크]]이다.

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

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

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

== 예시 ==
{{{#!syntax html
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<!-- 아래 버튼을 누르면, /clicked 경로를 HTML POST 방식으로 받은 응답으로 아래 내용이 교체된다. -->
<button hx-post="/clicked" hx-swap="outerHTML">
  여기를 클릭하세요!
</button>
}}}
주의사항: 서버의 응답 형식은 [[JSON]] 같은 데이터 교환 방식이 아니라, 브라우저의 내용을 표시할 수 있는 [[HTML]]이어야 한다.
예) [[PHP]] 응답 예시
{{{#!syntax php
<?php
// clicked.php
echo "<strong>여기를 클릭했습니다!</strong>";
?>
}}}

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

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

== [[하이쿠|시조]] ==

> javascript fatigue:
> longing for a hypertext
> already in hand

> 피곤한 자바스크립트
> 하이퍼텍스트의 갈망
> 이미 내 손안에

== 관련 문서 ==

 * [[웹 프레임워크]]
 * [[라이브러리]]
 * [[React(라이브러리)|React]]
 * [[JavaScript]]

[[분류:웹 프레임워크]][[분류:JavaScript]]