HTTP와 비동기 API 연결

정적 데이터를 제공된 행사 API로 교체하고 실패를 처리합니다.

진도 0%

레슨

m04 미션 solution의 문서·CSS·데이터·DOM을 이어받은 starter에서 API 경계를 완성합니다. legacy-results.js는 앞 단계 회귀 비교용이며 실제 화면은 새 results.js와 api.js를 사용합니다.

assets/api.js에서 HTTP 상태 검사·empty 발행·dispose 정리를 완성합니다. 실제 API 호출은 제공 로컬 모의 서버만 사용합니다.
이전 검색·지역 필터·상세·조건 초기화·뒤로/앞으로·포커스 복귀를 유지합니다. 카드 제목은 textContent로 넣습니다.
loading·success·empty·not-found·HTTP 오류·연결 실패·계약 오류를 구분하고 실패 후 동일 조건 재시도를 제공합니다.
진행 중 중복 실행을 막고 화면 이탈에서 요청·이벤트를 정리합니다. AbortError와 늦은 완료는 종료 화면에 안내를 쓰지 않습니다.
npm ci 후 npm test를 실행합니다. 서버가 가능한 환경에서 npm start로 브라우저 Network와 CORS를 관찰하고 LAYOUT.md에 근거와 미확인 항목을 기록합니다.

npm test에서 이전 문서 18건·CSS 20건·데이터 15건·동기 DOM 20건과 새 API/비동기 DOM 17건이 전부 통과합니다. starter는 이전 검사와 API 일부 검사 통과·세 TODO 관련 assertion 실패입니다.
API 모델이 200 배열·200 빈 배열·404·500·연결 실패·손상 JSON·잘못된 필드를 구분합니다.
API 모델에서 loading이 완료 전에 발행되고 실패 후 같은 URL로 재시도하여 success로 회복합니다.
DOM 모델에서 안전 제목·상세 404·상세와 목록 복귀·포커스·리스너 제거를 검사합니다. API session 모델에서 중복 차단·취소 signal·이탈 후 늦은 쓰기 방지를 검사합니다.
실제 HTTP 서버·CORS·키보드·320px·200% 확대·뒤로 가기 캐시 복원은 브라우저 관찰을 별도로 제출합니다. 작성 샌드박스의 서버 바인딩은 EPERM으로 미확인입니다.

npm test

모범 답안