fetch로 요청하고 HTTP 상태와 JSON 파싱 실패를 처리합니다.
fetch는 네트워크 수준에서 요청하지 못하면 reject하지만 404나 500 응답만으로는 reject하지 않습니다. response.ok를 확인한 뒤 body를 한 번 읽습니다. AbortController로 오래 걸리는 요청을 취소하고 로딩·실패·빈 결과 상태를 보여줍니다.
url은 실제 서버 대신 JSON 배열을 퍼센트 인코딩해 담은 data URL이라, fetch가 네트워크 없이 상태 200의 응답을 돌려줍니다. response.ok를 확인한 뒤 response.json()으로 배열을 꺼내고, 모든 항목의 id가 정수이고 title이 문자열인지 검사한 다음 제목만 모아 JavaScript를 출력합니다. 1초 타이머는 응답이 늦을 때 요청을 끊기 위한 것이고 finally에서 해제됩니다.
직접 타이머를 만드는 대신 signal에 AbortSignal.timeout(1000)을 넘겨도 1초 뒤 요청이 취소됩니다. 이때 fetch가 던지는 오류의 이름은 AbortError가 아니라 TimeoutError이므로, 예제의 catch처럼 오류 이름으로 분기한다면 두 경우를 함께 확인해야 합니다.
fetch가 resolve됐다는 이유만으로 성공 응답이라고 판단하지 마세요. response.ok와 예상 데이터 구조를 확인해야 합니다.
직접 바꿔보세요data URL의 배열을 비우거나 필드 타입을 바꿔 빈 결과와 형식 오류를 확인하세요.