HTMX를 HMPL로 대체하는 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 웹 개발자, 프론트엔드 개발자, 프레임워크 선택 고민 중인 개발자
• HTMX와 유사한 기능을 필요로 하는 프로젝트의 기술 결정자
• 난이도: 중간(HTMX 사용 경험, JS 프론트엔드 기초 지식 필요)

핵심 요약

• HMPL은 HTMX보다 더 많은 요청 커스터마이징이 가능하며, fetch API를 사용하여 현대적인 접근 방식 제공
• HTMX의 핵심 제한점: XMLHttpRequest 기반의 고정된 요청 방식, 최소한의 설정만 지원
• HMPL은 폼 데이터 처리와 동적 요청 생성을 더 유연하게 지원하며, FormData와 event.target을 활용 가능
• 파일 크기 차이: HTMX는 HTMX.js 1.0.0 기준 약 18KB, HMPL은 HMPL.js 0.1.0 기준 약 22KB(기능 확장 가능성 있음)

섹션별 세부 요약

1. 기초 예제: 클릭기 기능 구현

• HTMX: hx-post, hx-target, hx-swap 속성으로 요청 처리
• HMPL: hmpl.compile()으로 템플릿 생성 후 JS로 DOM 조작
• HTMX의 한계: hx-vars로만 추가 데이터 전송 가능, 커스터마이징 제한
• HMPL의 유연성: JS에서 FormData 생성 및 요청 본문 직접 조작 가능

2. 복잡한 예제: 폼 제출 기능 구현

• HTMX: hx-include="this"로 폼 데이터 포함, hx-indicator로 로딩 상태 표시
• HMPL: {{#request}} 템플릿 내 after="submit:#form" 지정, initFn에서 FormData 생성
• HTMX의 단점: 폼 데이터 처리에 제한적, 요청 본문 커스터마이징 불가
• HMPL의 강점: event.target과 event.submitter 활용, 동적 요청 생성 가능

3. 파일 크기 및 성능 비교

• HTMX: 약 18KB(1.0.0 버전)
• HMPL: 약 22KB(0.1.0 버전)
• HTMX의 장점: 최소한의 기능으로 인한 작은 파일 크기
• HMPL의 장점: 모든 ECMAScript 최신 기능 지원, 확장성 기반의 유연한 설계

결론

• HTMX는 간단한 프로젝트에 적합하지만, 커스터마이징이 필요한 중대형 프로젝트에서는 HMPL을 선택하는 것이 더 효과적
• HMPL의 fetch 기반 요청과 FormData 처리 기능은 서버와의 상호작용을 더 정교하게 만들 수 있음
• 파일 크기 차이는 기능 확장성을 고려할 때 HTMX보다 HMPL이 유리한 경우가 많음
• 실무 팁: HTMX는 빠른 구현이 필요할 때, HMPL은 장기적으로 확장 가능한 아키텍처가 필요한 프로젝트에 추천