설계 시나리오 · 4개 질문
티켓팅 페이지, 공연 정보와 좌석 목록을 어떻게 불러올까요? →
독립적인 API 병렬 호출부터 부분 실패 처리, 요청 경쟁(Race Condition) 방지와 응답 스키마 검증까지 차례대로 설계합니다.
요청 경쟁 직접 실험 →학습 공간 개념 · 판단 · 실험
Frontend Performance Lab상황 판단 · 실전 서비스 설계
요구사항과 제약 조건을 읽고 선택지를 고른 뒤, 각 선택의 판단 근거와 트레이드오프를 비교해 보세요.
실무 상황을 바탕으로 구성한 설계 연습 시나리오입니다. 요구사항에 따라 다른 선택도 가능하며, 직접 코드를 실행해 볼 수 있는 주제는 실습 링크를 함께 안내합니다.
비동기 요청 경쟁과 좌석 선택 상태 관리를 구분해 설계합니다.
설계 시나리오 · 4개 질문
독립적인 API 병렬 호출부터 부분 실패 처리, 요청 경쟁(Race Condition) 방지와 응답 스키마 검증까지 차례대로 설계합니다.
요청 경쟁 직접 실험 →설계 시나리오 · 3개 질문
React의 상태 스냅샷·업데이터 함수, 리스트 key 식별, 그리고 서버가 최종 확정하는 좌석 점유 권한을 구분해 설계합니다.
스트리밍 청크 파싱, 대화 전환 시 구독 정리, 안전한 렌더링을 설계합니다.
설계 시나리오 · 4개 질문
스트리밍 청크(Chunk) 파싱, 대화방 전환 시 응답 격리, 생성 중단 처리와 XSS 방지 렌더링을 함께 설계합니다.
스트리밍 파싱·대화 전환·중단 처리를 다루는 설계 시나리오입니다.
타임아웃 시 멱등성 재시도와 서버 기준 결제 확정 흐름을 다룹니다.
설계 시나리오 · 4개 질문
API 권한 검증, 개인화 데이터 캐시 격리, 멱등성 키(Idempotency Key)를 이용한 안전한 재시도와 결제 확정을 설계합니다.
인증·캐시 분리·멱등성 재시도와 결제 확정을 다루는 설계 시나리오입니다.
메인 스레드 연산 비용과 DOM 렌더링 병목을 나누어 진단합니다.
설계 시나리오 · 3개 질문
메인 스레드 점유, Worker 전달 비용, React 리렌더링과 DOM 노드 수 문제를 구분해 병목에 맞는 해결책을 고릅니다.