24강. 폼 처리와 화면 상태 관리

이번 강의의 결과물은 유효한 문의 폼 제출을 JavaScript로 처리하고 페이지 이동 없이 확인 메시지를 표시하는 인터페이스입니다.

?1. 이번 강의에서 해결할 문제

6강의 폼은 제출하면 페이지를 다시 요청하지만 처리할 백엔드가 없었습니다. 이번에는 브라우저 검증을 통과한 제출 이벤트를 받아 입력값을 읽고 사용자에게 화면 상태로 결과를 알립니다.

✓학습 목표

• 6강의 폼은 제출하면 페이지를 다시 요청하지만 처리할 백엔드가 없었습니다. 이번에는 브라우저 검증을 통과한 제출 이벤트를 받아 입력값을 읽고 사용자에게 화면 상태로 결과를 알립니다.
• 핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

◇2. 핵심 개념

• submit 이벤트: 폼이 제출될 때 발생
• event.preventDefault(): 제출의 기본 페이지 이동을 취소
• FormData: name이 있는 폼 컨트롤의 현재 값 묶음
• get(name): 특정 이름의 값 조회
• reset(): 폼을 초기 상태로 복구
• role="status": 동적으로 바뀐 일반 상태 메시지를 보조 기술에 전달

폼 제출은 데이터가 action과 method에 따라 전송되는 기본 동작을 가집니다. preventDefault로 취소하면 현재 예제처럼 클라이언트 화면 처리만 수행할 수 있습니다. WHATWG 폼 제출 표준

</>3. 코드 예시

파일명: web-basics/portfolio/index.html

<form id="contact-form" method="post">
  <p>
    <label for="name">이름</label>
    <input id="name" name="name" type="text" minlength="2" required>
  </p>

  <p>
    <label for="email">이메일</label>
    <input id="email" name="email" type="email" required>
  </p>

  <p>
    <label for="message">문의 내용</label>
    <textarea id="message" name="message" minlength="10" required></textarea>
  </p>

  <button type="submit">문의 내용 확인</button>
</form>

<p id="form-result" role="status"></p>

파일명: web-basics/portfolio/js/main.js

const contactForm = document.querySelector("#contact-form");
const formResult = document.querySelector("#form-result");

function handleContactSubmit(event) {
  event.preventDefault();

  const formData = new FormData(contactForm);
  const name = formData.get("name");

  formResult.textContent =
    `${name}님, 문의 내용이 확인되었습니다. 실제 전송 기능은 아직 연결되지 않았습니다.`;

  contactForm.reset();
}

if (contactForm && formResult) {
  contactForm.addEventListener("submit", handleContactSubmit);
}

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

python -m http.server 5500

→4. 코드가 동작하는 이유

1. 사용자가 제출 버튼을 누르면 브라우저가 HTML 필드 제약을 먼저 검사합니다.
2. 유효한 폼에서 submit 이벤트가 발생하고 처리 함수가 호출됩니다.
3. preventDefault가 서버로 이동하는 기본 동작을 취소합니다.
4. FormData가 이름이 있는 입력 필드의 현재 값을 수집합니다.
5. 결과 문단의 textContent가 바뀌면서 사용자에게 상태가 표시됩니다.
6. role="status"가 포커스를 강제로 옮기지 않고 메시지 변화를 전달하는 데 도움을 줍니다.
7. reset은 화면의 입력값만 초기화하며 데이터를 서버에 저장하지 않습니다.

이 예제의 확인 메시지는 실제 전송 성공 메시지가 아닙니다. 서버나 외부 폼 서비스가 연결되기 전에는 “전송 완료”라고 표현하면 사용자를 오도합니다.

!5. 자주 하는 실수

• 버튼 click만 처리해 Enter 제출을 놓침
• preventDefault를 호출하지 않아 결과를 보기 전에 페이지가 이동함
• input에 name이 없어 FormData에서 값을 얻지 못함
• id와 name을 혼동해 잘못된 키로 조회함
• 실패 가능성이 있는데 무조건 전송 완료라고 표시함
• 브라우저 검증을 서버 보안 검증으로 오해함

✎6. 짧은 실습 과제

1. 폼과 상태 문단에 필요한 ID를 추가합니다.
2. 제출 이벤트를 연결하고 유효한 입력에서만 메시지가 나오는지 확인합니다.
3. 제출 버튼과 입력 필드에서 Enter를 누르는 두 방식 모두 시험합니다.
4. name 속성 하나를 잠시 제거해 FormData 결과를 확인한 뒤 복구합니다.
5. Network 탭에서 preventDefault 때문에 새 문서 요청이 발생하지 않는지 확인합니다.
6. 실제 서버 전송이 없다는 사실이 메시지에 명확한지 검토합니다.

완료 기준은 유효하지 않은 입력에서는 브라우저 안내가 나오고, 유효한 제출에서는 새로고침 없이 정확한 확인 상태가 표시되는 것입니다.

?7. 이해 점검 질문 3개

1. 폼의 click 대신 submit 이벤트를 처리하는 이유는 무엇인가요?
2. event.preventDefault()를 제거하면 어떤 기본 동작이 발생하나요?
3. 현재 예제에서 “문의 전송이 완료되었습니다”라고 표시하면 안 되는 이유는 무엇인가요?

■핵심 요약

• 이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
• 코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
• 이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.