Week 5 · 데이터 통신과 동적 기능 Day 34 / 42

폼 제출과 POST 요청

사용자가 입력한 값을, 페이지 새로고침 없이 서버로 보냅니다

10초 핵심 요약

01

폼의 기본 동작을 막아야 하는 이유

<form>은 원래 "제출 버튼을 누르면 지정된 주소로 페이지 전체를 이동시키는" 아주 오래된 동작 방식을 갖고 있습니다. 우리는 페이지 이동 없이 그 자리에서 데이터만 서버로 보내고 결과를 받고 싶으므로, preventDefault()로 이 기본 동작을 먼저 막습니다.

// Day 7에서 배운 순서 그대로: 먼저 요소를 찾고, 그다음 반응을 붙인다
const form = document.querySelector('#contact-form');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // 새로고침 막기
  // 여기서 fetch로 데이터 전송
});
02

POST로 데이터 보내기

GET은 "데이터 좀 보여줘"(Day 31), POST는 "이 데이터를 저장해줘/처리해줘"입니다. fetch의 두 번째 인자로 method와 body를 지정합니다.

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const message = form.querySelector('#message').value;

  const res = await fetch('/api/contact', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message })
  });
  const result = await res.json();
  alert(result.status === 'ok' ? '전송 완료!' : '전송 실패');
});

headers

"내가 보내는 내용물이 JSON 형식이다"를 서버에 미리 알려주는 표지

JSON.stringify

JS 객체를 실제로 전송 가능한 문자열로 변환. 반대는 JSON.parse

body

요청에 실제로 담아 보내는 데이터 본문. GET 요청에는 없음

03

서버 쪽에서 POST 데이터 받기

Day 33에서 만든 Function 안에서, 이렇게 온 body를 context.request.json()으로 읽습니다.

// functions/api/contact.js
export async function onRequest(context) {
  if (context.request.method !== 'POST') {
    return new Response('Method Not Allowed', { status: 405 });
  }
  const data = await context.request.json();
  console.log('받은 메시지:', data.message);
  return Response.json({ status: 'ok' });
}
04

오늘의 실습 + AI 프롬프트

1간단한 문의 폼(textarea 1개 + 버튼)을 만들고, 제출 시 새로고침 없이 콘솔에 값이 찍히는지 확인합니다.
2Day 33 방식으로 /api/contact Function을 만들어 실제로 POST 요청을 주고받아 봅니다.
AI에게 이렇게 지시해 보세요: "이 폼의 submit 이벤트에서 preventDefault를 호출하고, textarea 값을 JSON으로 만들어 /api/contact에 POST로 보내는 코드를 작성해줘. 성공하면 '전송 완료' 문구를 보여줘."
05

Day 34 완료 체크리스트

preventDefault로 폼의 새로고침을 막는 이유를 설명할 수 있다.
GET과 POST의 역할 차이(조회 vs 상태 변경)를 이해했다.
폼 → fetch POST → Function → 응답까지 전체 흐름을 직접 연결해봤다.
스스로 설명해보기 — 폼의 기본 동작(새로고침)을 preventDefault로 왜 막아야 하는지 설명할 수 있나요?

오늘의 용어

preventDefault()
이벤트의 브라우저 기본 동작(폼 제출 시 새로고침 등)을 막는 함수
POST
서버의 상태를 바꾸기 위해 데이터를 담아 보내는 요청 방식
JSON.stringify()
JS 객체를 전송 가능한 문자열로 변환하는 함수