Next.js
폼 제출과 서버 변경 작업 나누기
폼의 입력 수집과 서버에서 데이터를 변경하는 책임은 다릅니다.
이럴 때 필요해요
이름 입력이 서버 저장으로 이어질 때 필요한 검사를 살펴봅니다.
어떻게 동작하나요?
조회가 정보를 읽는 작업이라면 변경은 새 예매를 만들거나 기존 값을 고치는 작업입니다. 폼에서 보낸 값은 서버에서 다시 검사해야 합니다.
Next.js의 서버 함수는 서버에서 실행되며 폼 action 같은 변경 흐름에 연결할 수 있습니다. 화면 버튼을 숨겼다고 서버 함수의 인증과 권한 검사를 생략할 수는 없습니다.
아래는 FormData의 문자열을 확인하는 부분 예제입니다. DB 저장이나 실제 Server Action은 구현하지 않습니다. 실제 변경에서는 인증·권한·중복 요청·오류 복구도 요구사항에 맞게 설계합니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
function readGuest(form: FormData): string {
const value = form.get("guest");
if (typeof value !== "string" || value.trim() === "") {
throw new Error("이름이 필요합니다");
}
return value.trim();
}입력을 읽고 검사하는 함수일 뿐 실제 예매를 저장하는 서버 함수는 아닙니다.
자주 헷갈리는 포인트
- 타입 검사와 서버에서 전달값을 검사하는 것을 구분합니다.
- 클라이언트 버튼 비활성화가 중복 처리 방지를 보장하지 않습니다.
내 말로 설명해 보기
required 입력창인데 서버도 이름을 검사해야 할까요?
생각할 단서 정상적인 브라우저 화면을 거치지 않는 요청도 생각해 보세요.
예시 답변 확인
설명에 들어갈 핵심
- 폼의 입력 수집과 서버에서 데이터를 변경하는 책임은 다릅니다.
- 입력을 읽고 검사하는 함수일 뿐 실제 예매를 저장하는 서버 함수는 아닙니다.
예시 답변
네. 브라우저 폼을 거치지 않고 요청할 수 있으므로 서버에서도 전달값과 권한을 확인해야 합니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.