빠른 탐색
핵심 요약
- htmx는 HTML 속성을 통해 일반적인 기능을 구현하여 HTTP 요청 처리를 간소화하는 JavaScript 라이브러리입니다.
- 웹 애플리케이션에 htmx를 손쉽게 추가하려면 CDN에서 제공하는 스크립트 링크를 활용하면 됩니다.
- htmx를 사용하면 JavaScript 코드를 작성하지 않고도 페이지네이션, 폼 유효성 검사, 인라인 편집 등 다양한 상호작용 기능을 구현할 수 있습니다.
최근 웹 개발 분야에서 htmx에 대한 관심이 높아지고 있습니다. 그렇다면 이 새로운 기술은 정확히 무엇일까요? htmx는 생각보다 훨씬 간단하지만, 그 유용성은 충분히 주목할 만합니다.
htmx란 무엇인가?
htmx는 특정 기능에 집중하는 소규모 JavaScript 라이브러리입니다. HTML 속성을 통해 일반적인 JavaScript 기능을 사용할 수 있도록 지원합니다. 간단한 예를 들어보겠습니다.
<a href="https://wilku.top/about" hx-get="https://wilku.top/about">소개</a>
위 코드는 ‘hx-get’이라는 사용자 정의 HTML 속성을 사용한 예시입니다. 이 링크를 클릭하면 htmx 라이브러리가 AJAX 요청을 보내고, 전체 브라우저를 새로 고침 없이 해당 페이지를 로드합니다.
htmx는 요청 전송과 관련하여 다음과 같은 추가적인 기능을 제공합니다.
- 및 폼 이외의 요소에서도 사용 가능.
- 클릭 및 제출 외의 다른 이벤트에도 반응.
- GET 및 POST 외의 HTTP 메서드도 지원.
- 전체 페이지 대신 페이지의 특정 부분만 대체.
htmx는 CSS 애니메이션과 WebSocket과 같은 기술도 지원하지만, 주요 목표는 HTTP 요청 처리를 단순화하는 것입니다.
간단한 웹 애플리케이션에서 htmx 활용하기
htmx는 전체 애플리케이션의 동작보다는 웹 애플리케이션이나 웹사이트 내의 특정 기능을 처리하는 데 적합합니다.
이 라이브러리의 가장 큰 장점 중 하나는 쉽게 시작할 수 있다는 점입니다. 라이브러리 복사본을 다운로드하여 설치할 수도 있지만, 종속성이 없으므로 CDN에서 제공하는 스크립트 링크를 추가하는 것만으로도 충분합니다.
<script src="https://unpkg.com/[email protected]" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
로컬 개발 및 테스트 환경에서는 Apache와 같은 웹 서버를 구성해야 합니다. ‘file:’ 프로토콜은 AJAX 요청을 허용하지 않으므로 정적 파일을 사용할 경우에도 웹 서버가 필요합니다.
무한 스크롤 예시
무한 스크롤은 트위터와 같은 사이트에서 피드에 자주 사용되는 기술입니다. 목록의 맨 아래에 도달하면 추가 항목을 로드하여 계속해서 내용을 읽을 수 있도록 합니다.
이 기능을 구현하려면 페이지 스크롤 위치를 감지하고, 페이지를 새로 고치지 않고 새 항목을 로드하는 JavaScript 코드가 필요합니다. 하지만 htmx를 사용하면 이 모든 작업을 간단하게 처리할 수 있습니다.
다음은 각 게시물에 이미지가 포함된 게시물 목록의 마크업 예시입니다.
<ol> <li><img src="http://placekitten.com/420/300" /></li> <li><img src="http://placekitten.com/400/320" /></li> <li><img src="http://placekitten.com/440/300" /></li> <li><img src="http://placekitten.com/420/340" /></li> <li><img src="http://placekitten.com/300/200" /></li> </ol>
이러한 항목이 ‘Feed1.html’ 파일에 있고, 추가 항목이 ‘Feed2.html’ 등에 있다고 가정해 보겠습니다. 각 페이지에는 스크롤 가능한 항목의 작은 하위 집합이 표시됩니다.
‘다음 페이지’ 링크를 사용하여 페이지를 탐색할 수도 있지만, 무한 스크롤을 더욱 쉽게 구현할 수 있습니다. 마지막 항목을 다음과 같이 변경합니다.
<li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend"> <img src="http://placekitten.com/300/200" /> </li>
이 네 가지 속성을 마지막 목록 항목에 추가하면 무한 스크롤 기능이 구현됩니다. 각 속성이 의미하는 바는 다음과 같습니다.
| 속성 | 값 | 의미 |
|---|---|---|
| hx-trigger | revealed | 이 요소가 화면에 처음 나타날 때… |
| hx-get | Feed2.html | … Feed2.html에 GET 요청을 전송하고… |
| hx-select | li | … 응답에서 li 요소를 선택하고… |
| hx-swap | afterend | … 이 요소 뒤에 추가합니다. |
목록의 아래쪽으로 스크롤하면 새 콘텐츠가 자동으로 로드되는 것을 확인할 수 있습니다. 스크롤바를 주의 깊게 살펴보거나 브라우저의 개발자 도구를 사용하여 확인할 수 있습니다.
간단한 정적 페이지 설정에서는 ‘Feed2.html’ 페이지에 ‘hx-get’ 속성이 ‘Feed3.html’로 설정된 마지막 항목이 포함되어 있습니다. 또한 htmx가 스크롤 이벤트에 대한 리스너를 추가하는 방법도 확인해 보세요.
htmx의 다른 잠재적 활용
htmx는 다음과 같은 다양한 일반적인 상호 작용을 구현하는 데 사용할 수 있습니다.
- 페이지네이션: 사용자가 페이지네이션 링크를 클릭하면 항목을 로드하고 교체합니다.
- 폼 유효성 검사: 폼 제출 시 검증 메시지나 폼의 하위 집합으로 교체합니다.
- 진행률 표시줄: 서버 응답에 따라 진행률 표시줄 값을 주기적으로 업데이트합니다.
- 인라인 편집: 해당 요소의 값을 포함하는 텍스트 영역으로 요소를 교체합니다.
위의 각 예는 표준 JavaScript를 사용하여 구현할 수 있지만, htmx를 사용하면 프로세스를 훨씬 쉽게 만들 수 있습니다.
htmx의 장점과 단점
장점
htmx는 많은 웹 애플리케이션과 웹사이트에서 일반적인 상호작용을 크게 단순화할 수 있습니다. 이를 통해 디자이너와 프런트엔드 개발자들은 JavaScript를 배우지 않고도 기능을 추가할 수 있습니다.
일반적인 동작을 추상화함으로써 htmx는 프로젝트 전체 또는 프로젝트 간에 일관성을 유지할 수 있도록 합니다. 무한 스크롤은 구현 주체와 관계없이 모든 페이지에서 동일한 방식으로 작동합니다.
명령적(어떻게) 접근 방식이 아닌 선언적(무엇) 접근 방식을 강조하므로, htmx 기능은 일반적으로 이해하고 추론하기가 더 쉽습니다.
단점
htmx를 사용하면 많은 경우에 JavaScript를 사용하지 않고 작업을 수행할 수 있지만, 모든 문제를 해결할 수 있는 것은 아닙니다! 특정 비즈니스 로직이나 하위 수준의 기능을 처리하려면 여전히 코드를 작성해야 합니다.
htmx는 많은 작업을 처리하므로 동작을 사용자 정의하는 데 제약이 있을 수 있습니다. 이는 대부분의 경우 긍정적인 부분이지만, 어느 정도의 제어권을 포기해야 할 수도 있다는 점을 염두에 두어야 합니다.
htmx를 사용하면 JavaScript 코드를 작성하지 않을 수 있지만, 백그라운드에서는 여전히 JavaScript 코드가 실행된다는 점을 알아야 합니다. 모든 링크에서 ‘href’ 속성 대신 ‘hx-get’ 속성을 사용하는 것이 매력적일 수 있지만, 이는 결국 JavaScript에 대한 의존성을 발생시킵니다. 코드가 어떤 이유로든 실행되지 않으면 사용자에게는 아무 기능도 수행하지 않는 링크가 남게 됩니다. 따라서 점진적 개선을 적용하는 것이 중요합니다.