23 · 로딩 UI와 진행률
4주 차 / 원문 Day 23 · 문서·예제 제공 · 고정된 하루 분량이 아닌 학습 순서입니다.
목표
실제 단계와 근거가 있는 진행 상태를 표시한다.
선수 지식
19, 22, Promise와 취소.
핵심 개념과 설명
전송·파싱·GPU 준비·첫 화면은 서로 다른 단계입니다. 전송량을 알 수 있을 때만 바이트 기반 진행률을 표시하고 전체 크기를 모르면 불확정 로딩 상태를 사용합니다. 전송 100%가 전체 완료를 뜻하지 않을 수 있습니다.
실패와 재시도, 전환 중 취소 또는 늦은 응답 무시를 설계합니다. 성공·실패 상태를 섞거나 임의의 숫자를 진짜 진행률처럼 보여 주지 않습니다.
학습 후 얻을 역량
- 실제 단계와 근거가 있는 진행 상태를 표시한다.
- 아래 완료 조건을 재현하고 자가 점검 질문에 자신의 말로 답할 수 있습니다.
실습 과제
- 로딩 상태를 idle/loading/ready/error로 나누고 각 표시 문구를 적습니다.
- 파일 크기를 아는 전송과 모르는 전송의 UI를 구분합니다.
- 실패 후 재시도, 로딩 도중 전환, 완료 직전 전환을 테스트합니다.
관찰할 변수
전체 크기 정보 유무, 네트워크 지연, 응답 순서, 실패 위치.
완료 조건
- 표시 숫자의 근거를 설명한다.
- 재시도와 취소/무시 흐름을 구현하거나 테스트했다.
- 첫 화면 준비와 전송 완료를 구분한다.
자가 점검 질문
- 전체 크기가 없을 때 50%를 표시해도 될까요?
- 파싱 중에는 어떤 상태를 보여 주는 것이 정확할까요?
공식 참고
실험 기록 — 직접 작성
목표
핵심 개념
바꾼 변수와 예상
실제 결과
배운 점
남은 질문
이전: React+Three.js 컴포넌트 설계 · 다음: 카메라 이동·회전·줌
연결된 예제와 실행 범위
원본 실행 코드 · 화면 단위 ID: 23-loading-ui
지연과 진행률을 제어한 모의 로더입니다. 실제 네트워크 전송량을 측정하지 않습니다.
기존에 저장한 코드가 있으면 그대로 유지합니다. 새 원본을 사용하려면 먼저 전체 JSON으로 백업한 뒤 원본 코드로를 선택하세요. 필기는 지워지지 않습니다.