htmx란 무엇이며 어떻게 웹사이트를 간소화할 수 있나요?

빠른 링크

⭐ htmx란 무엇인가요?

⭐ 간단한 웹 앱에서 htmx를 사용하는 방법

⭐ htmx의 장점과 단점

주요 내용

htmx는 HTML 속성을 활용하여 HTTP 요청 관리 프로세스를 간소화하고 이와 관련하여 일반적으로 사용되는 기능을 구현할 수 있는 접근 가능하고 효율적인 수단을 제공하는 다목적 자바스크립트 라이브러리입니다.

콘텐츠 전송 네트워크(CDN)에서 사용 가능한 호스팅 버전에 액세스하도록 사용자를 안내하는 하이퍼링크를 활용하여 웹 애플리케이션에 HTML5 스크립트를 통합하는 작업을 간소화할 수 있습니다.

페이지 매김, 양식 유효성 검사, 인라인 편집과 같은 일반적인 프런트엔드 기능을 구현할 수 있는 편리한 솔루션을 제공하므로 자바스크립트 코드를 작성할 필요가 없습니다.

htmx는 최근 웹 개발 분야에서 상당한 관심을 불러일으키고 있는 혁신적인 도구입니다. 간단해 보이지만 htmx를 활용하면 얻을 수 있는 잠재적인 이점은 개발자와 업계 전문가 모두에게 상당한 열정을 불러일으켰습니다.

htmx란 무엇인가요?

자바스크립트는 꽤 오랫동안 웹 개발에 활용되어 왔으며, 웹사이트에 상호 작용과 동적 콘텐츠를 추가하는 데 널리 사용되고 있습니다. 하지만 모든 개발자가 자바스크립트에 익숙하지 않거나 자바스크립트를 완전히 배울 시간이 없는 경우도 있습니다. 이 문제를 해결하기 위해 hmx는 긴 코드 스니펫을 작성하는 대신 HTML 속성을 사용하여 웹사이트에 대화형 요소를 추가하는 프로세스를 간소화하는 훌륭한 솔루션입니다. 따라서 프로그래밍 지식이 부족한 사람들도 복잡한 스크립트에 대한 걱정 없이 원하는 기능을 쉽게 구현할 수 있습니다. 본질적으로 hmx는 개발 프로세스를 간소화하고 웹사이트의 사용자 경험을 향상시킵니다.

 <a href="/about" hx-get="/about">About</a> 

현재 코드에는 “hx-get”이라는 레이블이 붙은 맞춤형 HTML 속성이 표시됩니다. 제공된 하이퍼링크를 클릭하면 htmx 라이브러리가 AJAX 요청을 시작하여 브라우저 창을 완전히 새로고침할 필요 없이 지정된 웹페이지를 원활하게 로드할 수 있습니다.

htx는 표준 기능 외에도 고급 기능을 통해 요청을 시작할 수 있는 기능을 지원합니다.

구조(a)와 모양(형태) 이외의 요소가 있다는 것을 암시합니다.

웹페이지의 요소 위로 스크롤하거나 마우스를 가져가는 것과 같이 클릭 및 제출 이외의 동작에 대해 마우스 이벤트 추적을 통해 귀중한 인사이트를 얻을 수 있습니다.

웹 리소스와의 고급 상호 작용을 위해 표준 GET 및 POST 요청 방법 외에 HEAD, PUT, DELETE 등 HTTP 프로토콜 확장을 활용하여 웹 리소스와 더 쉽게 상호 작용할 수 있습니다.

일부 검색 엔진은 전체 웹페이지를 교체하는 대신 콘텐츠의 특정 부분만 선택적으로 업데이트할 수 있습니다.

HTML5 미디어 확장(HTMX)은 CSS 애니메이션 및 웹소켓과 같은 고급 기술을 지원하지만, 주로 HTTP 요청을 관리하는 프로세스를 간소화하는 데 중점을 둡니다.

간단한 웹 앱에서 htmx를 사용하는 방법

HTMX는 전체 애플리케이션의 전반적인 동작을 포괄하는 것이 아니라 웹 애플리케이션과 웹사이트에서 발견되는 특정 기능에 중점을 둡니다.

라이브러리의 주목할 만한 장점은 사용자 친화적인 특성으로, 최소한의 노력으로 원활하게 통합할 수 있다는 점입니다. 사용자는 로컬 사본을 직접 다운로드하여 설정하거나 콘텐츠 전송 네트워크(CDN)에 필요한 링크를 통합하여 사용을 시작할 수 있습니다.

 <script
  src="https://unpkg.com/[email protected]"
  integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
  crossorigin="anonymous"></script>
 

프로토콜은 이 채널을 통한 AJAX 요청을 금지합니다.

무한 스크롤을 사용한 간단한 예제

이 기본 예제의 사본은 GitHub의 온라인 리포지토리에 액세스하여 얻을 수 있습니다.

무한 스크롤은 트위터와 같은 플랫폼에서 피드의 콘텐츠를 연속적으로 읽을 수 있도록 하기 위해 자주 사용되는 방법론입니다. 목록의 정점을 향해 탐색할 때 사용자의 흐름을 방해하지 않고 디스플레이 내에 무한히 증가하는 추가 데이터가 매끄럽게 통합되어 브라우징 경험을 무한히 지속할 수 있습니다.

HTML5는 JavaScript를 활용하여 웹페이지의 현재 스크롤 위치를 모니터링하고 페이지를 완전히 새로고침할 필요 없이 추가 콘텐츠를 동적으로 로드할 수 있습니다. 이 기능은 일반적으로 기존 페이지 새로 고침과 관련된 중단을 최소화하면서 추가 콘텐츠에 대한 원활한 액세스를 제공하여 사용자 경험을 향상시키는 효율적인 수단으로 사용됩니다.

일련의 항목 또는 발행물을 표현하기 위해 이미지 형태의 시각적 미디어를 사용하는 제공된 마크업을 고려하세요:

 <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> 

피드1.html, 피드2.html 등과 같이 각각 수많은 항목이 포함된 여러 개의 파일을 보유하고 있는 시나리오를 생각해 보겠습니다. 이러한 파일은 스크롤할 수 있는 콘텐츠의 제한된 보기를 표시하는 개별 페이지를 생성하도록 설계되었습니다.

여러 페이지 사이를 원활하게 탐색하려면 간단한 ‘다음 페이지’ 링크를 사용하는 것으로 충분할 수 있습니다. 그러나 무한 스크롤 메커니즘을 구현하는 것도 실행 가능한 옵션입니다.이렇게 하려면 목록의 마지막 항목을 다음과 같이 수정하면 됩니다:

 <li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
    <img src="http://placekitten.com/300/200" />
</li> 

이 네 가지 속성을 통합하면 무한 스크롤 인터페이스를 구현할 수 있습니다. 각각의 의미를 살펴보겠습니다:

현재 뷰포트의 엔드포인트에 도달하면 명단의 확장된 부분이 원활하게 로드되므로 잠시 시간을 내어 자세히 살펴보시기 바랍니다. 이 현상을 확인하려면 디스플레이 하단 가장자리에 있는 진행률 표시줄을 살펴보고, 선택한 웹 브라우저 애플리케이션 내의 개발자 도구에서 자동 새로고침 표시가 있는지 확인하세요.

실제로 이 동적 콘텐츠 로딩 메커니즘의 구현에는 HTML의 `` 태그와 함께 JavaScript의 `setTimeout` 함수를 활용하는 것이 포함됩니다. 구체적으로, 사용자가 웹 페이지를 아래로 스크롤하면 스크립트는 추가 이벤트 리스너()를 사용하여 ‘스크롤’ 이벤트를 수신하여 이 동작을 감지합니다. 트리거되면 setTimeout()으로 지정된 시간 지연(밀리초) 내에 필요한 코드를 실행하여 현재 스크롤 위치에 따라 외부 파일이나 기타 소스에서 필요에 따라 추가 콘텐츠를 로드합니다. 그 결과 브라우징 세션 중 중단이나 중단 없이 새로운 데이터를 원활하게 통합할 수 있습니다.

htmx의 다른 잠재적 용도

Htmx는 일상적인 작업 및 커뮤니케이션 처리 등 다양한 시나리오에서 활용할 수 있는 다용도 도구입니다.

사용자가 페이지가 지정된 탐색 요소를 클릭하여 다른 콘텐츠 페이지로 이동하면 시스템은 새 데이터를 로드하고 이전에 표시된 요소를 새로 로드된 요소로 대체하여 표시된 정보를 동적으로 업데이트해야 합니다.

양식을 제출할 때 확인 메시지 또는 원본 양식의 압축 버전으로 대체할 수 있습니다. 이 프로세스를 ‘양식 유효성 검사’라고 합니다.

진행률 표시줄은 진행 중인 작업의 완료율에 대한 정보를 제공하는 주기적인 핑 수신을 통해 현재 상태를 추적하여 주기적으로 업데이트해야 합니다.

사용자 입력에 따라 페이지 내의 특정 컴포넌트를 해당 컴포넌트의 콘텐츠가 포함된 텍스트 영역으로 대체합니다.

표준 JavaScript를 사용하면 이러한 모든 인스턴스를 구성할 수 있지만 htmx를 사용하면 절차가 상당히 간소화됩니다.

htmx의 장점과 단점

장점

HTML(하이퍼텍스트 마크업 언어)은 월드와이드웹에서 콘텐츠를 구조화하고 제작하는 데 사용되는 마크업 언어입니다. HTML5는 멀티미디어 요소와 모바일 장치에 대한 향상된 지원과 같은 새로운 기능을 포함하는 HTML의 업데이트 버전입니다. HTML5는 일반적인 작업을 간소화하고 JavaScript와 같은 외부 스크립트의 필요성을 줄임으로써 대화형 경험을 보다 능률적으로 제작할 수 있는 방법을 제공합니다. 따라서 디자이너와 개발자는 프로그래밍 언어에 대한 광범위한 지식 없이도 웹 프로젝트에 인터랙티브 기능을 쉽게 통합할 수 있습니다. 그 결과 HTML5는 기존의 정적 사이트를 넘어 이커머스 플랫폼, 소셜 미디어 네트워크, 뉴스 포털, 교육 리소스, 엔터테인먼트 플랫폼 등 다양한 유형의 웹 애플리케이션을 포괄할 수 있도록 그 범위를 넓혀가고 있습니다. 이러한 다양한 온라인 서비스는 HTML5의 강력한 성능을 활용하여 더욱 풍부한 사용자

공유 동작의 추상화를 통해 다양한 프로젝트 간의 통일성과 프로젝트 간 일관성을 촉진할 수 있습니다. 무한 스크롤 기능은 개별 구현 세부 사항에 관계없이 모든 페이지에서 일관된 경험을 제공하도록 보장합니다.

HTMX의 디자인은 명령적 전략보다 선언적 전략을 우선시하여 기능을 이해하는 데 있어 명확성과 이해도를 높였습니다.

단점

HTMX는 다양한 상황에서 자바스크립트 사용을 우회하는 편리한 수단을 제공하지만 모든 문제를 해결할 수 있는 포괄적인 솔루션을 제공하지는 않습니다. 특정 비즈니스 규칙 구현 및 하위 수준 기능 관리와 같은 프로그래밍의 특정 측면에는 여전히 맞춤형 코딩 작업이 필요하다는 점을 인식하는 것이 중요합니다.

HMTX가 제공하는 광범위한 기능으로 인해 동작을 조정할 수 있는 범위가 비교적 제한적입니다. 그러나 시스템 작동에 대한 어느 정도의 제어권을 포기해야 하므로 커스터마이징을 위해 이러한 희생을 감수하는 것이 전반적으로 유리할 수 있습니다.

HTML을 사용하면 자바스크립트 코드 작성을 생략할 수 있지만, 자바스크립트는 은밀하게 실행된다는 점을 인식하는 것이 중요합니다. 기존의 “href” 속성 대신 “hx-get” 속성을 사용하면 JavaScript 기능에 의존하게 될 수 있습니다.스크립트가 실행되는 동안 문제가 발생하면 사용자에게 응답하지 않는 링크가 표시됩니다. 이러한 문제를 방지하려면 점진적인 개선 전략을 일관되게 적용하는 것이 좋습니다.