저는 현재 Go, Templ, HTMX를 사용하여 자체 호스팅할 블로그 플랫폼을 만드는 작업을 진행 중입니다. 나는 이것이 이 스택에 대한 지식을 얻는 데 도움이 될 재미있고 유용한 프로젝트가 될 것이라고 결정했습니다. 이 블로그 게시물에서는 HTMX를 사용하여 리디렉션을 처리하면서 직면한 문제에 대한 내 경험과 솔루션을 공유하겠습니다.

브라우저 리디렉션

관리자의 기능을 마무리하는 동안 마침내 HTMX를 프로젝트에 구현하기 시작할 때라고 결정했습니다. 나는 로그아웃 핸들러에 POST 요청을 보내는 버튼 요소로 시작했습니다. 일반적으로 양식 요소를 사용하여 이 작업을 수행하지만 앞서 언급했듯이 이제 프로젝트에 HTMX 구현을 시작할 차례입니다. 문제는 이 POST 작업이 여전히 양식처럼 작동하고 서버의 응답이 / 엔드포인트로 다시 리디렉션되도록 하려는 것입니다.

문제: http.Redirect로 리디렉션 처리

다음은 제가 사용한 버튼 요소입니다:

Logout

제가 겪은 문제는 리디렉션에 대한 응답이 여전히 HTML이고 HTMX가 이 콘텐츠를 로그아웃 버튼 요소로 바꾸는 것입니다.

http.Redirect를 사용하여 리디렉션 처리

func (app *application) handleLogoutPost(w http.ResponseWriter, r *http.Request) {
    // handle business logic...
    //...

    http.Redirect(w, r, "/", http.StatusSeeOther)
}

이미지: 콘텐츠가 로그아웃 버튼으로 교체되었습니다.

해결 방법: HX-Redirect 헤더 사용

응답에서 http.Redirect를 HX-Redirect 헤더로 바꾸고 대상 위치를 값으로 바꾸면 콘텐츠 교환을 방지할 수 있습니다.

func (app *application) handleLogoutPost(w http.ResponseWriter, r *http.Request) {
    // handle business logic...
    //...

    // Write our HX-Redirect header with location and redirect
    w.Header().Set("HX-Redirect", "/")
    http.WriteHeader(http.StatusNoContent)
}

이미지: 브라우저가 다음으로 리디렉션되었습니다/URL을 참고하세요.

결론

Go, Templ, HTMX를 사용하여 나만의 블로그 플랫폼을 구축하는 과정은 지금까지 보람찬 경험이었습니다. HTMX를 통합함으로써 사이트는 추가 자바스크립트 코드를 작성하고 제공할 필요 없이 최신 웹사이트라면 여전히 많은 상호작용 기능을 가질 수 있습니다. HX-Redirect 헤더를 사용한 리디렉션 처리는 간단하고 효과적인 솔루션이었습니다. 이 게시물이 프로젝트를 수행하는 모든 사람에게 도움이 되기를 바라며 웹 애플리케이션에서 HTMX의 잠재력을 탐색하도록 권장합니다.