1. 무한 스크롤 도입의 배경과 이점
전형적인 페이지네이션은 Pagy와 같은 Gem을 통해 구현되며 서버 부하를 줄이는 데 효과적입니다. 하지만 사용자가 여러 페이지를 클릭해야 하는 번거로움이 있고 UI가 복잡해지는 경향이 있습니다. 반면 무한 스크롤은 다음과 같은 장점을 제공합니다. * 사용자 경험 향상: 사용자가 원하는 결과가 나올 때까지 자연스럽게 스크롤을 이어갈 수 있습니다. * UI 간소화: 불필요한 페이지 번호 목록을 제거하여 화면 공간을 효율적으로 사용합니다. * 검색과의 시너지: 검색 기능과 결합했을 때 사용자가 더 정밀하게 결과를 필터링하며 탐색할 수 있습니다.
2. 백엔드 구현: Hanami Action과 의존성 주입
백엔드에서는 Hanami 프레임워크를 예시로 들어 설명합니다. 핵심은 htmx 라이브러리와 API 클라이언트를 액션에 주입하는 것입니다.
* 매개변수 처리: query(검색어)와 page(페이지 번호)를 선택적 매개변수로 정의하여 유연한 요청 처리를 가능하게 합니다.
* 패턴 매칭 활용: Ruby의 강력한 패턴 매칭(case ... in)을 사용하여 입력된 매개변수 조합에 따라 적절한 API 요청을 생성합니다. 이는 코드의 가독성을 높이고 조건문의 복잡성을 줄여줍니다.
* 에러 핸들링: Dry Monads를 사용하여 API 호출의 성공과 실패를 명확하게 구분합니다. 실패 시에는 Null Object 패턴을 활용하여 빈 결과를 안전하게 렌더링합니다.
3. htmx 전용 응답 최적화
htmx 요청과 일반 브라우저 요청을 구분하여 처리하는 것이 중요합니다.
* 조건부 렌더링: htmx 요청인 경우 레이아웃 없이 필요한 HTML 조각(Fragment)만 반환하여 응답 크기를 최소화합니다.
* 상태 유지: push_url 헤더를 설정하여 무한 스크롤 중에도 브라우저의 주소창이 업데이트되도록 하여 사용자가 특정 위치를 북마크하거나 뒤로 가기를 사용할 수 있게 합니다.
4. 프론트엔드 템플릿과 htmx 속성
템플릿에서는 htmx 속성을 사용하여 비동기 로직을 선언적으로 작성합니다.
* hx-get: 다음 페이지의 데이터를 가져올 엔드포인트를 지정합니다.
* hx-trigger=”revealed”: 해당 요소가 뷰포트에 나타나는 순간 요청을 트리거합니다. 이것이 무한 스크롤의 핵심 메커니즘입니다.
* hx-swap=”this”: 현재의 로딩 요소를 서버에서 받아온 새로운 데이터와 요소로 교체합니다. 이때 select 속성을 병행 사용하여 응답 중 필요한 부분만 추출할 수 있습니다.
* HTML 규격 준수: li 태그 내부에 htmx 속성을 부여하고 로딩 메시지를 배치함으로써 유효한 HTML 구조를 유지하면서도 동적인 데이터 추가를 구현합니다.