Fetch(페치)

쉬운 설명

AI가 만든 코드에서 fetch("/api/studies")를 보면 서버에 스터디 정보를 요청하는 부분일 수 있어요. 받은 응답의 상태를 확인하고 JSON 같은 본문을 읽어 화면에 사용할 수 있어요. fetch를 호출하는 것과 데이터를 화면에 표시하는 것은 다른 단계예요. 브라우저뿐 아니라 Fetch를 지원하는 서버 실행 환경에서도 사용할 수 있어요.

이런 상황에서 만나요

스터디 목록이 나오지 않아 코드를 살펴보니 fetch가 있다고 해 볼게요. 요청 주소, 응답 상태, 본문 읽기를 나눠 확인하면 어디에서 문제가 생겼는지 찾기 쉬워요.

const response = await fetch("/api/studies");

if (!response.ok) {
  throw new Error(`HTTP ${response.status}`);
}

const studies = await response.json();

아래 코드는 async 함수 안에서 사용하는 일부예요. response.ok를 먼저 확인하고 응답이 JSON이라는 조건에서 본문을 읽어요. 실패 메시지를 화면에 보여 주거나 재시도하는 처리는 앱에 맞게 별도로 작성해야 해요.

헷갈리기 쉬운 점

404나 500 응답은 fetch가 자동으로 오류로 처리하나요?

일반적으로 그런 HTTP 응답만으로 fetch의 Promise가 실패하지는 않아요. response.ok나 status를 확인해야 해요. 네트워크 실패와 서버가 보낸 오류 응답, JSON을 읽는 과정의 실패를 나누어 봐요.

브라우저에서 다른 출처의 주소를 요청하면 CORS 정책이 영향을 줄 수 있어요. 이때 no-cors를 붙이면 응답을 마음대로 읽을 수 있다는 식으로 해결하지 않아요. 요청 대상의 허용 설정과 서버 경유가 필요한지 확인해요.

왜 알아야 할까요?

“API가 안 돼요” 대신 요청 주소·상태 코드·응답 본문 중 무엇이 예상과 다른지 전달할 수 있어요. 성공 응답을 받아 놓고도 화면이 비는 문제를 요청 실패와 구분할 수 있어요.

참고 자료

• MDN · Fetch 사용
• MDN · fetch 메서드