Vue · 14 컴포넌트 계약과 감시
단계: 컴포넌트 계약과 감시 · 편집 가능한 예제 · 저장 ID: vue-02
목표와 학습 후 역량
- A 입력 후 B 전환에도 B 저장값이 오염되지 않는다.
- 연속 입력 5회 뒤 마지막 값만 저장 완료된다.
선수 지식
14단위는 13단위 결과물과 실험 기록을 이어 사용합니다.
핵심 개념과 설명
초안과 저장
부모가 단위별 초안을 소유하면 에디터 교체에도 문자열을 보존합니다. 저장 대기 상태는 실제 저장 완료와 구분해야 합니다.
지연 작업의 식별
타이머가 실행될 때 현재 단위를 읽으면 다른 필기를 덮을 수 있습니다. 시작 시 id와 문자열을 캡처하고 이전 타이머를 정리합니다.
실습 준비
별도 Vue Vite 프로젝트에서 .vue SFC와 script setup을 사용합니다. 패키지 버전과 lockfile을 기록하고 개발 서버에서 실행하세요. 내장 Vue 예제는 h 함수 기반이며 범용 SFC 컴파일러가 아닙니다. 기존 vue-02 미리보기는 출발점입니다. 본문의 확장 결과물은 별도 프로젝트에서 구현합니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- src/NoteEditor.vue를 props/emits로 연결하고 draftsById를 부모에 만드세요.
- watch의 입력에서 id·text·delay를 캡처해 지연 저장하고 onCleanup으로 clearTimeout하세요.
- A 입력 직후 B로 전환한 뒤 savedById와 draftsById를 비교하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 저장 지연 | 100ms | 1000ms | 전환 시 이전 예약은 취소되고 다른 단위는 덮이지 않는다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- A 입력 후 B 전환에도 B 저장값이 오염되지 않는다.
- 연속 입력 5회 뒤 마지막 값만 저장 완료된다.
자가 점검
- 취소된 A 초안은 어디에 남겨야 하나요?
- 타이머 안에서 unit.value를 읽으면 어떤 문제가 생기나요?
공식 참고
연결된 예제와 실행 범위
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: 감시 정리와 요청 역전 · 다음: 템플릿 ref와 nextTick