HTMX 및 Golang을 사용한 파일 업로드
- WBOY원래의
- 2024-08-20 06:32:41611검색
물론 HTMX의 훌륭함에 대해 이미 들어보셨을 겁니다(아직 모르셨나요? 여기 오셔서 다행이네요 ?)
오늘은 HTMX의 단순성과 Golang의 강력한 기능을 결합하여 서버에 파일을 업로드할 것입니다. 네, 우리는 HTMX와 Go를 사용하여 또 다른 흥미로운 웹 기능을 구축할 예정입니다.
그런데 HTMX를 사용하여 풀스택 앱을 구축하는 데 대한 실용적인 프로젝트 기반 가이드를 정말로 원한다면 내 HTMX + Go: Golang을 사용하여 풀스택 애플리케이션 구축 및 HTMX 과정 [할인 포함]을 확인하세요.
자, 시작해 보겠습니다.
Go 프로젝트 설정
첫 번째 단계는 간단한 Go 프로젝트를 설정하는 것입니다. 아래 명령을 사용하여 폴더를 만들고 해당 폴더로 이동하여 Go 프로젝트로 초기화하면 됩니다.
mkdir go-htmx-file-uploads cd go-htmx-file-uploads go mod init go-htmx-file-uploads
프로젝트가 초기화되면 이제 프로젝트 내에서 필요한 일부 종속성을 설치해 보겠습니다.
이것은 업로드 양식이 포함된 단일 페이지와 파일 업로드에 사용되는 엔드포인트를 포함하는 간단한 서버입니다.
라우팅에는 Gorilla Mux 라우팅 라이브러리를 사용하지만 원하는 라우팅 솔루션을 자유롭게 사용해도 됩니다. 또한 Go용 Google의 UUID 라이브러리를 사용하여 파일을 업로드할 때 파일의 임의 이름을 생성할 것입니다. 다양한 방법으로 파일 이름을 생성할 수 있으므로 이는 개인 취향입니다.
아래 명령을 사용하여 이 두 가지를 설치하세요.
고릴라 먹스
go get -u github.com/gorilla/mux
구글 UUID
go get github.com/google/uuid
이 두 가지를 설치하면 프로젝트가 완전히 설정되었으며 다음 단계로 넘어갈 수 있습니다.
템플릿 만들기
이 작은 프로젝트를 위해 두 개의 HTML 템플릿을 만들 예정입니다.
첫 번째 템플릿은 서버에서 클라이언트로 보낼 수 있는 문자열 메시지 조각을 간단히 취하는 HTML 조각입니다.
이 조각은 이 메시지 조각을 가져와 이를 반복하여 클라이언트에 반환할 HTML 목록을 생성합니다(HTMX가 하이퍼미디어 API와 어떻게 작동하는지 기억하시나요? 꽤 멋지죠?).
그럼 먼저 만들어 보겠습니다.
Go 프로젝트의 루트에서 먼저 모든 템플릿을 저장할 템플릿 폴더를 만듭니다.
다음으로 템플릿 폴더 안에 message.html 파일을 만들고 다음 코드를 추가합니다.
{{define "messages"}}
<ul>
{{range .}}
<li>{{ . }}</li>
{{end}}
</ul>
{{end}}
이는 메시지 템플릿을 정의하고 수신되는 문자열 메시지 조각을 반복하여 HTML 목록을 형성합니다.
다음 템플릿에서는 파일 업로드 페이지 자체를 만들 예정입니다.
템플릿 폴더 안에 upload.html이라는 새 파일을 만들고 아래 코드를 붙여넣으세요.
{{define "upload"}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
<title>Upload File</title>
</head>
<body>
<div class="row">
<div class="col-md-6 p-5 mt-5">
<h4>Upload File</h4>
<form class="form">
<div id="messages"></div>
<div class="mb-3">
<label for="avatarInput" class="form-label">Select Image</label>
<input type="file" class="form-control" id="avatarInput" name="avatar" required>
</div>
<button
hx-post="/upload"
hx-encoding="multipart/form-data"
hx-target="#messages"
type="submit" class="btn btn-primary">Upload</button>
</form>
</div>
</div>
</body>
</html>
{{end}}
완벽해요!
이제 이 파일의 코드를 살펴보겠습니다.
먼저 upload라는 이름으로 템플릿을 정의했습니다. 이 이름은 나중에 경로 핸들러에서 참조하는 데 사용할 이름입니다.
헤드 섹션에 몇 가지 상용구 HTML 코드가 있지만 여기에 두 개의 중요한 라이브러리를 포함했습니다. 하나는 정말 중요하고 다른 하나는 CSS 느낌을 위한 것입니다.
HTMX 라이브러리는