Three.js · 24 비동기 장면 교체
단계: 자원 수명·접근성·측정 · 편집 가능한 예제 · 저장 ID: threejs-step-24
목표와 학습 후 역량
- 늦은 응답이 새 모델을 바꾸지 않는다.
- 버린 결과의 정리 경로가 있다.
선수 지식
선수 개념: 명시적 해제, 공유 수명. 23단위의 결과 파일과 관찰 기록을 준비하세요.
핵심 개념과 설명
오래된 결과
이전 요청의 모델이 늦게 도착할 수 있습니다. 요청 토큰을 비교해 현재 장면에 붙일지 결정합니다.
버려진 자원
사용하지 않는 로딩 결과도 자원을 가질 수 있습니다. 화면에 붙이지 않았더라도 소유한 자원을 정리해야 합니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 로컬 HTTP 개발 서버의 HTML·ES 모듈 프로젝트에서 직접 구현합니다. three와 addons를 같은 설치 버전으로 고정하고 기록하세요.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- 외부 실습 프로젝트의 day-24.js와 index.html을 준비하세요. 모델 선택마다 증가하는 requestId를 저장하고 loadAsync 완료 시 비교하세요.
- 느린 모델 A와 빠른 B를 교대로 요청해 B만 보이며 A의 자원이 정리되는지 로그를 남기세요.
- 입력 조건 요청순에서 출력을 저장한 뒤 역순 조건으로 다시 실행하세요. 예상: 현재 요청과 다른 결과는 장면을 덮지 않습니다. 실제 화면·로그와 대조하고 day-24-notes.md에 실제 결과와 차이의 원인을 남기세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 완료 순서 | 요청순 | 역순 | 현재 요청과 다른 결과는 장면을 덮지 않습니다 |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 늦은 응답이 새 모델을 바꾸지 않는다.
- 버린 결과의 정리 경로가 있다.
자가 점검
- 토큰 검사가 네트워크 요청도 취소하나요?
- 실패한 이전 요청의 오류를 현재 UI에 보여야 하나요?
공식 참고
연결된 예제와 실행 범위
지연된 절차적 지오메트리로 완료 역순과 오래된 결과 해제를 재현합니다. 네트워크 모델 로딩 자체는 포함하지 않습니다.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: 자원 소유권 장부 · 다음: HTML 제어와 접근성