htmx 살펴보기

https://youtu.be/vZ_oT0p113I?si=qu-FdjQycHP7kf40 

html ? htmx?

 

위 강의를 보며 공식문서를 살펴보고 정리!

 

공식은 아니지만 이번에 깃헙 어쩌구에서 후원금까지 받은 라이브러리라고 한다.

 

공식 사이트

https://htmx.org/

</> htmx - high power tools for html

 

 

소개

htmx gives you access to AJAX, CSS Transitions, 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 (~14k min.gz’d), dependency-free, extendable, IE11 compatible & has reduced code base sizes by 67% when compared with react

리액트 뿐만 아니라 htmx를 쓰면 기존의 웹 사이트를 만들 때 사용하던 코드가 최대 67%나 줄어든다고 한다 🤩

 

사용법

<script src="https://unpkg.com/htmx.org@1.9.5"></script>

먼저 위 코드로 htmx 를 받아와주거나

npm install htmx.org

직접 프로젝트에 설치해준다.

 

 <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>

해당 hx-post 속성은 htmx 를 불러와서 직접 ajax 요청을 처리해줄 수 있다고 한다. hx-post 는 post 메서드를 의미하며 값은 api 를 요청할 주소를 의미한다.

 

htmx 의 목적

이처럼 htmx 의 목적은 ajax 요청을 html에서 직접적으로 받아와주는 것이라고 한다.

 

이벤트를 다루기 위해

기본적으로 ajax 요청을 하기 위해선,

• input, textarea, select 등은 chage 이벤트
• form 은 submit 이벤트
• 모든 요소는 click 이벤트

가 필요하다.

하지만 htmx는 hx-triggeer 라는 속성을 사용하여 이벤트를 지정해줄 수 있다.

<div hx-post="/mouse_entered" hx-trigger="mouseenter once">
    [Here Mouse, Mouse!]
</div>

hx-trigger 로 mouseenter 이벤트를 once 한번만 실행한다는 의미이다.

 

Polling

hx-trigger="every 1s" 로 주면 1초마다 실행된다.

 

hx-target

selector 문법을 사용하여, 클래스나 아이디를 넣어서 해당 값을 실행해줄 위치를 직접 정해줄 수 있다.

<input hx-get='/search' hx-trigger='#result' />
<div id='result'>결과</div>

 

hx-boost

a태그를 사용할 때 기본적으로 새로고침이 되지만 해당 속성을 true로 지정해주면 새로고침없이 html 을 받아온다고 한다.

리액트의 라우팅 처리를 생략해줄 수 있다.

 

class='htmx-indicator'

스피너를 손쉽게 넣어줄 수 있다.

 

 

단점

• 서버 통신이 적거나 없다면 쓸데없음
• html 조작을 복잡하게 하거나 애니메이션 등을 주려고 하면 한계가 있음
• api 로 response 를 보낼 때 html 로 보내주는 서버가 필요

app.get('/', (req, res) => {
	res.send('<h1>HTML</h1>');
});

• 다른 회사의 서버랑 통신할 땐 필요없음

 

실제로 html 페이지 자체를 보여주는 것이 잦거나 많은 사이트에는 htmx 를 사용하면 리액트보다 응답속도가 빠르다고 한다.

나중에는 몰라도 아직까진 개인적으로 사용해보기는 힘들 것 같다.