htmx는 html과 ajax를 통합한 html이다.
htmx를 사용한다면 ajax를 사용하지 않고, 서버를 통해 실시간으로 데이터를 DOM과 주고받을 수 있다. 그런데 리얼타임으로 서버와 데이터를 주고 받는 방식은 제이쿼리 + ajax를 사용하더라도 충분하다. 실시간으로 데이터를 주고 받으려고, 굳이 htmx를 사용할 이유는 없다.
htmx - high power tools for html
htmx high power tools for HTML introduction htmx allows you to access AJAX, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext htmx is small (~7k min.gz'd
htmx.org
htmx를 사용하는 이유는 가상DOM에 있다. htmx는 데이터 바인딩 기능과 함께 서버의 데이터를 주고 받을 수 있는 ajax를 덧붙였다. 아래 테이블 관련 예제코드는 htmx의 확실한 방향을 보여준다.
htmx는 'get'방식으로 데이터를 받을 때는 hx-get을 사용한다. 위에서는 '/contacts/?page=2'에 있는 데이터를 hx-get을 통해 받은 뒤 'replaceMe'의 영역에 전달한다. 위와 같이 htmx은 단 몇줄로 데이터를 CRUD할 수 있고, 그래프 라이브러리를 사용한다면 다양한 효과를 만들어낼 수 있다.
htmx, Gumroad와 같은 플러그인 스타일의 라이브러리들은 자바스크립트 프레임워크들에 비해 인지도가 낮은 편이지만 이들을 결합한다면, 속도와 의존성 측면에서 오히려 프레임워크보다 좋은 대안이 될 수 있다.
'코드 스터디' 카테고리의 다른 글
| '데이터 시각화' 비즈니스 모델에 대한 고찰 (0) | 2020.07.04 |
|---|---|
| no 프레임워크 (0) | 2020.07.02 |
| 자바스크립트 배열 사용 4가지 방법 (0) | 2020.04.04 |
| 5편 객체지향 설계 5원칙 [SOLID] 의존성 역전 원칙 (0) | 2020.04.03 |
| 4편 객체지향 설계 5원칙 SOLID『인터페이스 분리원칙』 (0) | 2020.04.01 |
댓글