[TIL] HTMX 실전 가이드

유데미 강의 “HTMX - The Practical Guide”를 완주했습니다.

—

htmx라는 걸 말만 들었는데 배워보니 재미있습니다. 다음 예제에서 hx-post hx-target 과 같은 hx-* 형식의 attribute들을 사용하여 html 의 일부를 교체하는 방식입니다.

          <form 
            id="goal-form" 
            hx-post="/goals" 
            hx-target="#goals"
            hx-swap="beforeend"
            hx-on:submit="document.querySelector('form').reset()">
            <div>
              <label htmlFor="goal">Goal</label>
              <input type="text" id="goal" name="goal" />
            </div>
            <button type="submit">Add goal</button>
          </form>

htmx attribute 에 따르는 동작은 htmx.js 라이브러리가 수행하는데, 서버와 통신하여 html의 일부만 업데이트한다는 점에서 jquery 와 비슷하다는 느낌이 듭니다.

—

htmx는 서버에서 거의 모든 페이지를 생성하는 프레임웍과 궁합이 잘 맞다고 합니다. 그래서 django 와 조합하거나 go 언어 프레임웍과 사용하는 게 생산적이라고 하네요.

사내 업무용 시스템을 django 와 조합해서 한 번 만들어 봐야겠습니다.