fetch로 요청하고 HTTP 상태와 JSON 파싱 실패를 처리합니다.
fetch는 네트워크 수준에서 요청하지 못하면 reject하지만 404나 500 응답만으로는 reject하지 않습니다. response.ok를 확인한 뒤 body를 한 번 읽습니다. AbortController로 오래 걸리는 요청을 취소하고 로딩·실패·빈 결과 상태를 보여줍니다.
코드를 읽을 때는 const response=await fetch(url,{signal}); if(!response.ok) throw new Error(...); 부분부터 찾으세요. 현재 값과 실행 순서를 줄마다 적어 보면 문법을 외우지 않아도 결과를 예측할 수 있습니다.
결과가 나중에 도착해도 화면 전체를 멈추지 않아야 하는 작업에 사용합니다. 로딩, 성공, 빈 결과, 실패와 취소를 서로 다른 상태로 다루세요.
실행하기 전에 예상 결과를 짧게 적은 뒤 data URL의 배열을 비우거나 필드 타입을 바꿔 빈 결과와 형식 오류를 확인하세요. 실제 출력이 다르면 콘솔에 처음 나타난 오류와 그 직전 값을 차례로 확인하세요.
fetch가 resolve됐다는 이유만으로 성공 응답이라고 판단하지 마세요. response.ok와 예상 데이터 구조를 확인해야 합니다.
직접 바꿔보세요data URL의 배열을 비우거나 필드 타입을 바꿔 빈 결과와 형식 오류를 확인하세요.