본문 바로가기

반응형 html,「HTMX(AJAX + HTML)」

by Recstasy 2020. 6. 4.

htmx는 html과 ajax를 통합한 html이다. 

 

htmx를 사용한다면 ajax를 사용하지 않고, 서버를 통해 실시간으로 데이터를 DOM과 주고받을 수 있다. 그런데 리얼타임으로 서버와 데이터를 주고 받는 방식은 제이쿼리 + ajax를 사용하더라도 충분하다. 실시간으로 데이터를 주고 받으려고, 굳이 htmx를 사용할 이유는 없다. 

 

https://htmx.org/

 

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의 확실한 방향을 보여준다. 

 

table예시

htmx는 'get'방식으로 데이터를 받을 때는 hx-get을 사용한다. 위에서는 '/contacts/?page=2'에 있는 데이터를 hx-get을 통해 받은 뒤 'replaceMe'의 영역에 전달한다. 위와 같이 htmx은 단 몇줄로 데이터를 CRUD할 수 있고, 그래프 라이브러리를 사용한다면 다양한 효과를 만들어낼 수 있다.

 

htmx

 

htmx, Gumroad와 같은 플러그인 스타일의 라이브러리들은 자바스크립트 프레임워크들에 비해 인지도가 낮은 편이지만 이들을 결합한다면, 속도와 의존성 측면에서 오히려 프레임워크보다 좋은 대안이 될 수 있다.

 

 

댓글

최신글 전체

이미지
제목
글쓴이
등록일