OffscreenCanvas · 01 Canvas 제어권 이전
단계: 제어권과 첫 렌더 · 편집 가능한 예제 · 저장 ID: offscreen-canvas-01
목표와 학습 후 역량
- 학습 결과: 소유권의 역할을 설명한다. 입력 사례: 지원 경로와 강제 미지원 경로.
- 산출물: 선택 모드·첫 프레임·오류 안내 표. 대체 경로 처리 근거를 코드와 연결해 설명한다.
선수 지식
Canvas 2D·Web Workers를 이해하고 기존 시작 예제의 입력과 출력을 읽을 수 있다.
핵심 개념과 설명
소유권
transferControlToOffscreen은 표시 Canvas의 제어를 옮긴다. 이전 전에 같은 Canvas에 렌더 context를 만들면 안 된다.
대체 경로
지원 여부와 실제 초기화 성공은 다르다. 실패 시 새 Canvas의 메인 렌더링으로 복구한다.
실습 준비
기존 offscreen-canvas-01·02·03은 지원 브라우저에서 사용하는 시작 예제다. 새 단위는 별도 로컬 HTTP 프로젝트의 메인·Worker 파일에서 구현한다. API와 context 지원을 확인하고 이전 실패 시 새 Canvas의 메인 fallback을 제공한다. CSP와 격리는 유지하며 성능 수치를 직접 기록한다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- 별도 실습 프로젝트의 src/day-1.js에 기능 검사 후 OffscreenCanvas를 Worker에 transfer하고 메인 fallback을 만든다. 기존 1·14·28단위 예제는 출발점으로만 참고한다.
- 입력 조건: 지원 경로와 강제 미지원 경로. 기준: 지원. 기준 조건에서 실행한 뒤 관찰값과 오류를 notes/day-1.md에 남긴다.
- 변경 변수: 지원 플래그. 변경값: 미지원 강제. 같은 입력 경로로 다시 실행한다. 저장할 산출물: 선택 모드·첫 프레임·오류 안내 표. 확인할 가설: 빈 화면 대신 메인 렌더 또는 명확한 안내가 나온다. 실제 결과와 비교해 일치 여부 및 차이의 원인을 기록한다.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 지원 플래그 | 지원 | 미지원 강제 | 빈 화면 대신 메인 렌더 또는 명확한 안내가 나온다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 필수 산출물: 선택 모드·첫 프레임·오류 안내 표. 기준 및 변경 조건 각각의 결과가 있어 총 2조건을 비교할 수 있고, 입력값과 실행 환경을 함께 기록했다.
- 두 조건의 차이에 관한 설명에 다음 개념을 모두 연결했다: 소유권, 대체 경로. 예상과 다른 항목은 원인 또는 미해결 이유를 1개 이상 적었다.
자가 점검
- 이번 실습에서 소유권 개념은 어느 처리 단계에 영향을 주는가? 입력 사례: 지원 경로와 강제 미지원 경로.
- 변경 변수: 지원 플래그. 확인할 가설: 빈 화면 대신 메인 렌더 또는 명확한 안내가 나온다. 실제 결과가 가설과 일치했는가? 대체 경로 관점에서 근거를 설명하라.
공식 참고
연결된 예제와 실행 범위
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.