피드로 돌아가기
GeekNewsFrontend
원문 읽기
HTMX가 너무 멋져서 직접 만들었다 (2024)
Server-side HTML 렌더링 기반 부분 갱신을 통한 JS 번들 최소화 및 오디오 상태 유지
AI 요약
Context
SvelteKit에서 DinoSsr로 교체하며 발생한 전체 페이지 리로드 문제로 인해 오디오 재생 상태가 끊기는 병목 지점 발생. 클라이언트 사이드 라우팅 부재로 인한 UI 연속성 결여를 해결해야 하는 제약 사항 존재.
Technical Solution
- HTMX 철학을 적용한 영역 부분 갱신 구조 설계를 통해 오디오 컴포넌트 상태 보존
- 서버 템플릿 기반의 HTML 응답을 API 역할로 정의하여 프런트엔드 JavaScript 의존도 제거
- Last-Modified 및 If-Modified-Since 헤더 기반의 304 캐싱 메커니즘을 적용한 네트워크 효율 최적화
- History API(pushState, popstate) 통합을 통한 부분 갱신 상태의 URL 동기화 및 브라우저 히스토리 관리
- Pointer Event 기반 Preload 로직을 구현하여 실제 Click 이벤트 발생 전 Fetch 요청을 시작하는 응답 속도 개선
- 비표준 hx-* 속성 및 비대한 라이브러리 의존성을 제거한 경량 자체 구현체로 전환하여 코드베이스 단순화
실천 포인트
1. 전체 페이지 리로드 없이 특정 상태(예: 오디오, 채팅창)를 유지해야 하는지 검토
2. 과도한 JS 프레임워크 대신 Server-side Template과 부분 갱신으로 대체 가능한 UI 패턴인지 분석
3. HTTP 304 캐싱과 Pointer Event Preload를 통한 체감 성능 향상 가능성 확인
4. 라이브러리 도입 전 핵심 동작 원리를 파악하여 필요한 기능만 최소 단위로 직접 구현하는 방안 고려