Astro 페이지에서 HTML 양식 작성

SSR 모드에서 Astro 페이지는 양식을 표시하고 처리할 수 있습니다. 이 레시피에서는 표준 HTML 양식을 사용하여 서버에 데이터를 제출합니다. 프런트매터 스크립트는 클라이언트에 JavaScript를 보내지 않고 서버의 데이터를 처리합니다.

전제 조건

SSR (output: 'server')이 활성화된 프로젝트가 필요합니다.

레시피

양식과 처리 코드를 포함할 .astro 페이지를 생성하거나 식별합니다. 예를 들어 등록 페이지를 추가할 수 있습니다.
src/pages/register.astro
```
---
---
<h1>Register</h1>
```

일부 입력이 포함된 <form> 태그를 페이지에 추가하세요. 각 입력에는 해당 입력의 값을 설명하는 name 속성이 있어야 합니다.

양식을 제출하려면 <button> 또는 <input type="submit"> 요소를 포함해야 합니다.

---
---
<h1>Register</h1>
<form>
  <label>
    Username:
    <input type="text" name="username" />
  </label>
  <label>
    Email:
    <input type="email" name="email" />
  </label>
  <label>
    Password:
    <input type="password" name="password" />
  </label>
  <button>Submit</button>
</form>

검증 속성을 사용하여 JavaScript가 비활성화된 경우에도 작동하는 기본 클라이언트 측 검증을 제공하세요.

이 예시에서
- required는 필드가 채워질 때까지 양식 제출을 방지합니다.
- minlength는 입력 텍스트에 필요한 최소 길이를 설정합니다.
- type="email"은 유효한 이메일 형식만 허용하는 검증입니다.
src/pages/register.astro
```
---
---
<h1>Register</h1>
<form>
  <label>
    Username:
    <input type="text" name="username" required />
  </label>
  <label>
    Email:
    <input type="email" name="email" required />
  </label>
  <label>
    Password:
    <input type="password" name="password" required minlength="6" />
  </label>
  <button>Submit</button>
</form>
```
<script> 태그와 Constraint Validation API를 사용하여 여러 필드를 참조하는 사용자 정의 유효성 검사 논리를 추가할 수 있습니다.
복잡한 유효성 검사 논리를 더 쉽게 작성하려면 프런트엔드 프레임워크를 사용하여 양식을 작성하고 React Hook Form 또는 Felte와 같은 양식 라이브러리를 선택할 수 있습니다.

양식을 제출하면 브라우저가 페이지를 다시 요청하게 됩니다. 양식 데이터를 URL 매개변수가 아닌 Request 본문의 일부로 보내려면 양식의 데이터 전송 method를 POST로 변경하세요.

---
---
<h1>Register</h1>
<form method="POST">
  <label>
    Username:
    <input type="text" name="username" required />
  </label>
  <label>
    Email:
    <input type="email" name="email" required />
  </label>
  <label>
    Password:
    <input type="password" name="password" required minlength="6" />
  </label>
  <button>Submit</button>
</form>

프런트매터에서 POST 메소드를 확인하고 Astro.request.formData()를 사용하여 양식 데이터에 액세스합니다. try ... catch 블록으로 이를 래핑하여 POST 요청이 양식에서 전송되지 않아 formData가 유효하지 않은 경우를 처리합니다.

---
if (Astro.request.method === "POST") {
  try {
    const data = await Astro.request.formData();
    const name = data.get("username");
    const email = data.get("email");
    const password = data.get("password");
    // 데이터로 작업을 수행합니다.
  } catch (error) {
    if (error instanceof Error) {
      console.error(error.message);
    }
  }
}
---
<h1>Register</h1>
<form method="POST">
  <label>
    Username:
    <input type="text" name="username" required />
  </label>
  <label>
    Email:
    <input type="email" name="email" required />
  </label>
  <label>
    Password:
    <input type="password" name="password" required minlength="6" />
  </label>
  <button>Submit</button>
</form>

서버에서 양식 데이터의 유효성을 검사합니다. 여기에는 엔드포인트에 대한 악의적인 제출을 방지하고 양식 유효성 검사가 없는 희귀한 레거시 브라우저를 지원하기 위해 클라이언트에서 수행된 것과 동일한 유효성 검사가 포함되어야 합니다.

클라이언트에서 수행할 수 없는 유효성 검사도 포함될 수 있습니다. 예를 들어, 이 예시에서는 이메일이 이미 데이터베이스에 있는지 확인합니다.

오류 메시지는 errors 객체에 저장하고 템플릿에서 액세스하여 클라이언트로 다시 보낼 수 있습니다.

---
import { isRegistered, registerUser } from "../../data/users"
import { isValidEmail } from "../../utils/isValidEmail";

const errors = { username: "", email: "", password: "" };
if (Astro.request.method === "POST") {
  try {
    const data = await Astro.request.formData();
    const name = data.get("username");
    const email = data.get("email");
    const password = data.get("password");
    if (typeof name !== "string" || name.length < 1) {
      errors.username += "Please enter a username. ";
    }
    if (typeof email !== "string" || !isValidEmail(email)) {
      errors.email += "Email is not valid. ";
    } else if (await isRegistered(email)) {
      errors.email += "Email is already registered. ";
    }
    if (typeof password !== "string" || password.length < 6) {
      errors.password += "Password must be at least 6 characters. ";
    }
    const hasErrors = Object.values(errors).some(msg => msg)
    if (!hasErrors) {
      await registerUser({name, email, password});
      return Astro.redirect("/login");
    }
  } catch (error) {
    if (error instanceof Error) {
      console.error(error.message);
    }
  }
}
---
<h1>Register</h1>
<form method="POST">
  <label>
    Username:
    <input type="text" name="username" />
  </label>
  {errors.username && <p>{errors.username}</p>}
  <label>
    Email:
    <input type="email" name="email" required />
  </label>
  {errors.email && <p>{errors.email}</p>}
  <label>
    Password:
    <input type="password" name="password" required minlength="6" />
  </label>
  {errors.password && <p>{errors.password}</p>}
  <button>Register</button>
</form>

GitHub Issue 생성

의견 보내기

Astro 페이지에서 HTML 양식 작성

전제 조건

레시피