예매 페이지 프론트엔드 엔지니어
티켓팅 페이지, 공연 정보와 좌석 목록을 어떻게 불러올까요?
독립적인 API 병렬 호출부터 부분 실패 처리, 요청 경쟁(Race Condition) 방지와 응답 스키마 검증까지 차례대로 설계합니다.
상황 배경
티켓 예매가 열리는 날입니다. URL에는 공연 ID가 포함되어 있고, 공연 상세 정보와 날짜별 잔여 좌석 목록은 서로 다른 API로 조회합니다. 네트워크가 느리거나 특정 API만 실패하더라도 사용자가 화면을 이탈하지 않고 다시 시도할 수 있어야 합니다.
설계 제약 조건
- 공연 소개 API와 좌석 조회 API는 서로의 응답 값에 의존하지 않는 독립된 요청입니다.
- 좌석 조회가 실패하더라도 공연 기본 소개 화면은 정상적으로 보여야 합니다.
- 사용자가 날짜 탭을 빠르게 바꾸면 마지막에 선택한 날짜의 좌석 정보만 화면에 남아야 합니다.
- 서버에서 내려오는 JSON은 외부 입력이므로 TypeScript 타입 선언만으로 런타임 데이터 구조가 보장되지 않습니다.
각 선택지의 예상 결과와 트레이드오프를 비교하는 설계 연습 시나리오입니다. 서비스 요구사항에 따라 다른 선택도 가능하며, 연결된 코드 실습은 아래 링크에서 바로 실행해 볼 수 있습니다.
질문 1 / 4
독립적인 두 API 호출 시작하기
URL에서 공연 ID를 이미 알고 있으므로, 좌석 목록 API를 호출하기 위해 공연 소개 API 응답이 올 때까지 기다릴 필요가 없습니다.
공연 소개와 좌석 목록 API를 어떤 방식으로 호출할까요?
1 / 4