아겔로그

🕛 global hx-boost + <script defer>

지금까지의 스토리🧚🔮🧌

  1. 블로그 + [htmx transition animation, loading indicator
  2. categories안녕👋 taxonomies 정렬 추가

htmx hx-boost을 사용하여, 블로그내의 링크이동을 빠르고 가볍게 만들었다.

그런데, 페이지가 로딩된 다음 자동으로 실행될 자바스크립트를 지정하기 어려워졌다. 사례로 위 (2)-을 구현하는데에 현재 선택된 정렬기준을 표시해주는 JS이 페이지 로딩 때에 자동으로 실행됐으면 했는데 그게 좀 어려웠다…

hx-boost와 onload 🦻

페이지가 로딩됐을때, JS이 실행되도록 하는 방법은 여러 가지가 있…: onload, ready, DOMContentLoaded 모두 조금씩 다른데 여기서는 소개하지 않겠다. 인터넷에 충분히 많은 좋은 설명이 있으니까.

그런데 공통점은: JS코드를 실행해서 ‘원하는 시점’에 실행하길 원하는 코드를 등록하는 방식,이란 점이다.

문제는 hx-boost-와 엮일 때에 발생했다: hx-boost은 웹브라우저의 현재페이지 컨텍스트를 모두 지우고, 새로 이동하는 페이지의 컨텍스트로 다시 시작하는 것이 아니라, 현재 페이지의 컨텍스트를 그대로 유지한 채, 새로운 페이지의 내용으로 그 컨텍스트를 변형해 나가는 방식이기 때문.

그래서 생기는 문제는:

  • hx-boost 링크를 통해 로드한 페이지에서 등록한 onload-등의 ‘이벤트핸들러’들이 실행되지 않는다.

대안 htmx:afterSwap ?

실제로 hx-boost이 페이지의 내용을 변화시킨것일뿐, 웹브라우저의 관점에서는 페이지컨텍스트를 새로 만든 것이 아니므로 그런 이벤트핸들러를 실행시켜주지 않기 때문. 😥

그래서 대안으로, Event - htmx:afterSwap-을 지정할 수 있음. hx-boost-이 DOM을 변형한 이후에 실행해주기 때문에 onload에 유사하게 기대한 것처럼 동작할 수 있다. 🤩

…하지만, 다음과 같은 문제가 여전히 있다. ☠️

  1. global hx-boost: 특정페이지를 위한 콜백을 실행해주는 htmx:afterSwap 이벤트를 지정하기 곤란하다.

    1. global hx-boost => htmx:afterSwap => per-page callback 호출하는 구조를 만들수는 있을 것 같다. 🩵

      • 하지만 일종의 특별한 이름/구조의 뭔가를 만들어주는 것이니 일단은 피하고 싶다.

  2. global hx-boost이 지정된 위치가 아닌, 불러들인 페이지의 요소에 htmx:afterSwap 지정을 지원하지는 않는 것 같다. 👪

    • 예: 불러온 페이지에서 <div ... hx-on::after-swap="doThis(...)"> 같이 지정할 방법.
    • 그런 방식이 가능하다면, 위 (1.1)-을 따로 구성할 필요도 없이 불러들이는 페이지마다 이렇게 지정하기만 하면 될테니.

<script defer>

결국 특정한 시점을 JS에서 지정하거나, 등록하는 일들을 일반적인 웹브라우저 페이지이동 <=> hx-boost 간에 서로 잘 호환되지 못하는거 같다.

hx-boost으로 불러들인 페이지는 그 페이지의 모든 <script> 등을 다 실행해주지만 시점을 지정하는 것이 어려웠을 뿐이었어서.

==> 그래서 <script defer>-을 활용하는걸 좀 더 열심히 하게 되었다.

아직까진 적당히 의도대로 동작해 주는거 같다. ㅎㅎ🤑