Svelte · 22 Canvas 루프와 반응성 분리
단계: Canvas 검증과 프레임워크 비교 · 외부 실행 예제 · 미리보기 안내 · 저장 ID: svelte-step-22
목표와 학습 후 역량
- speed 0에서 원이 정지한다.
- 속도 변경이 Canvas 재생성을 일으키지 않는다.
선수 지식
22단위는 21단위 결과물과 실험 기록을 이어 사용합니다.
핵심 개념과 설명
프레임 상태
좌표와 각도는 렌더 루프가 자주 바꾸는 값입니다. UI에 매 프레임 표시할 필요가 없다면 지역 변수로 보관합니다.
시간 계산
이동량은 delta와 속도를 곱해 계산합니다. 큰 delta를 제한하면 탭 복귀의 급격한 이동을 줄이지만 시간 의미가 달라집니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 Svelte 5 Vite 프로젝트에서 .svelte 파일을 컴파일해 실행합니다. 패키지 버전과 lockfile을 기록하세요. Frontory의 Svelte 미리보기는 실제 writable와 명시적 DOM 어댑터이며 .svelte 컴파일러나 runes 실행기가 아닙니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- src/CanvasScene.svelte의 angle을 지역 변수로 두고 speed만 $state 입력으로 전달하세요.
- RAF timestamp에서 delta를 구해 원을 움직이세요.
- speed 0·1·2와 탭 복귀를 관찰하고 프레임 값·UI 값의 표를 작성하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| speed | 1 | 2 | 동일 시간 회전량이 약 두 배가 된다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- speed 0에서 원이 정지한다.
- 속도 변경이 Canvas 재생성을 일으키지 않는다.
자가 점검
- 각도를 $state로 두는 것이 언제 필요한가요?
- delta 상한 때문에 누락된 시간을 어떻게 설명하나요?
공식 참고
연결된 예제와 실행 범위
미리보기는 Svelte writable/DOM 계약 실험입니다. runes·snippet·컴파일 결과는 실제 App.svelte를 Svelte 5 프로젝트에서 실행하세요.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: key 블록과 초안 보존 · 다음: 스타일 범위와 접근성