Hypermedia-Driven Applications
하이퍼미디어 기반 애플리케이션 (Hypermedia-Driven Application), 찍먹해주세요
이 시리즈는 하이퍼미디어 기반 애플리케이션(HDA)의 대표주자인 htmx를 중심으로, 간단한 사용 가이드와 개인적으로 좋다고 생각하는 패턴들을 정리한 글이다. 앞으로 htmx를 대표로 이야기하겠지만, Hotwired/Turbo나 최근 관심받는 Alpine AJAX, Datastar 또한 비슷한 철학을 공유한다.
HDA 시리즈 #0 - 전통적인 MPA 폼 처리와 그 한계
이번 글에서는 Spring Boot MVC로 간단한 Todo 애플리케이션을 만들면서, 전통적인 MPA(Multi-Page Application) 방식의 폼 처리가 어떻게 동작하는지, 그리고 어떤 불편함이 있는지 살펴본다.
HDA 시리즈 #1 - HTMX로 부분 업데이트 구현하기
이전 글에서 전통적인 MPA 폼 처리의 한계를 살펴봤다. 이번 글에서는 HTMX를 도입해서 페이지 깜빡임 없이 부분 업데이트를 구현하는 방법을 알아본다.
HDA 시리즈 #2 - 삭제 기능과 에러 처리
이번 글에서는 Todo 삭제 기능을 구현하면서, HTMX에서 상황에 따라 응답을 유연하게 처리하는 방법을 알아본다.
HDA 시리즈 #3 - 서버 주도 리다이렉트
이전 글에서는 부분 업데이트 방식으로 생성/삭제를 구현했다. 성공 시 특정 요소만 교체하고, 실패 시 에러 메시지를 표시하는 방식이었다. 이번 글에서는 더 단순한 접근법을 소개한다.
HDA 시리즈 #4 - UX 개선: 로딩 상태와 실시간 검증
이전 글에서는 HX-Location과 @ControllerAdvice로 서버 코드를 정리했다. 이번 글에서는 클라이언트 측 사용자 경험을 개선한다. 요청 중 버튼 비활성화, 로딩 인디케이터, 실시간 중복 체크를 구현해본다.
HDA 시리즈 #5 - 모달을 활용한 수정 기능
이번 글에서는 모달을 활용한 수정 기능을 구현한다. 모달은 HDA에서 구현 방식이 다양해서 고민이 많았던 부분이다. 이번 글에서는 가장 단순한 방식인 "서버에서 모달 전체를 렌더링"하는 방법을 먼저 다루고, 그 한계점과 개선 방향을 살펴본다.
HDA 시리즈 #6 - 모달 UX 개선
이전 글에서 서버에서 모달 전체를 렌더링하는 기본 방식을 구현했다. 동작은 하지만 사용자 경험에 아쉬운 부분이 있었다. 이번 글에서는 HTMX의 생명주기 이벤트를 활용해 클라이언트에서 모달을 열고 서버에서 내용만 가져오는 개선된 방식을 구현해본다.
HDA 시리즈 #7 - SPA 같은 페이지 전환
이번 글에서는 hx-boost를 활용해 페이지 전환 시 깜빡임 없이 SPA처럼 부드럽게 화면을 전환하는 방법을 다룬다.
HDA 시리즈 마무리 - Vite로 정적 리소스 관리하기
이번 글에서는 SSR 환경에서 정적 리소스(JavaScript, CSS)를 효율적으로 관리하는 방법에 대해 다룬다. 지금까지 프로젝트에서 사용해온 JavaScript 구성을 살펴보자.