🌐
웹개발
htmx
htmx
HTML 속성으로 AJAX, WebSocket 구현. 자바스크립트 최소화.
상세 설명
htmx는 HTML 속성만으로 AJAX, WebSocket, SSE를 구현할 수 있는 라이브러리입니다. JavaScript를 직접 작성하지 않고도 동적인 웹 페이지를 만들 수 있어 "HTML의 확장"이라 불립니다.
- hx-get, hx-post: HTTP 요청을 HTML 속성으로 선언
- hx-target: 응답을 삽입할 요소 지정
- hx-swap: innerHTML, outerHTML 등 삽입 방식 결정
- hx-trigger: 이벤트 기반 요청 트리거
서버에서 HTML을 반환하는 전통적인 방식과 잘 맞아, Django, Rails 등 템플릿 기반 프레임워크와 궁합이 좋습니다.
코드 예제
<!-- CDN으로 htmx 로드 -->
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<!-- 클릭 시 GET 요청, 응답을 #result에 삽입 -->
<button hx-get="/api/greeting" hx-target="#result">인사하기</button>
<div id="result"></div>
<!-- 폼 제출 (POST) -->
<form hx-post="/api/users" hx-swap="outerHTML">
<input name="name" placeholder="이름">
<button>등록</button>
</form>
<!-- 무한 스크롤 -->
<div hx-get="/api/items?page=2"
hx-trigger="revealed"
hx-swap="afterend">
로딩 중...
</div>
실무 대화 예시
백엔드 개발자
"React 없이 동적 UI 만들 수 있어? 간단한 관리자 페이지인데 SPA까지는 필요 없거든."
시니어
"htmx 써봐. HTML 속성만 추가하면 AJAX 처리 돼. 서버에서 HTML 조각 반환하면 끝이야. Django 템플릿이랑 찰떡이야."
주의사항
복잡한 상태 관리 한계: 클라이언트 사이드 상태가 복잡하면 React 등이 더 적합합니다.
SEO: 동적으로 로드된 콘텐츠는 초기 HTML에 없어 SEO에 불리할 수 있습니다.