한눈에 보는 정의
웹페이지의 자바스크립트가 다른 주소에 요청을 보내고 응답(데이터)을 받아오는 브라우저 기능.
이런 말로 들어요
- 신청 버튼을 누르면 fetch로 서버에 보내고 성공 메시지를 띄우게 할게요.
- 콘솔 보니까 fetch가 403으로 막혀 있네요.
그림으로 보기
페이지를 새로 고치지 않고 필요한 데이터만 요청해 받아 옵니다. 응답이 성공(ok)인지 직접 확인해야 합니다.
하캄솔루션 자체 제작 모션그래픽자세히 알아보기
fetch는 화면을 새로 고치지 않고 서버나 외부 서비스에서 필요한 데이터만 가져올 때 씁니다. 주소를 넣어 요청하면 응답이 도착했을 때 결과를 받아 화면에 반영하는 방식이라, 기다리는 동안에도 페이지는 계속 움직입니다. 폼 내용을 서버로 보내는 일에도 쓰입니다. 바이브코딩으로 만든 코드에서 "데이터가 안 뜬다"는 문제는 대개 이 요청 단계에서 생깁니다.
실무 예시
예를 들어 상담 폼에서 "보내기"를 누르면 fetch가 입력값을 서버 주소로 보내고, 성공 응답이 오면 "접수되었습니다" 문구를, 실패하면 다시 시도 안내를 보여 줍니다.
함께 살펴볼 점
응답 코드가 404·500이어도 fetch 자체는 실패로 처리하지 않습니다. 응답의 성공 여부(ok)를 따로 확인해야 합니다. 비밀 키를 fetch 요청에 직접 넣으면 방문자에게 노출되니 서버 쪽에서 처리합니다.
AI에게 이렇게 요청해 보세요
상담 폼 제출 시 fetch로 /api/inquiry에 JSON을 보내고, 응답이 ok가 아니면 오류 문구를 보여 주고 버튼을 다시 누를 수 있게 해 줘. API 키는 브라우저 코드에 넣지 마.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- Fetch API - MDN 새 창
fetch()가 Window와 Worker에서 쓰는 전역 메서드이고 요청할 주소를 필수 인자로 받는다는 설명을 확인했습니다.
자료 확인 - Using the Fetch API - MDN 새 창
응답 상태 확인(response.ok)과 요청 본문 전송 방법을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정