Svelte · 01 컴파일과 반응성
단계: 컴파일과 runes 기초 · 편집 가능한 예제 · 저장 ID: svelte-01
목표와 학습 후 역량
- 토글 후 목록과 합계가 함께 바뀐다.
- 내장 어댑터와 .svelte 컴파일 실행을 구분한 기록이 있다.
선수 지식
JavaScript 객체·배열·모듈, HTML·CSS, npm 프로젝트 실행.
핵심 개념과 설명
컴파일
Svelte는 .svelte 소스의 템플릿과 반응형 선언을 컴파일합니다. store와 DOM을 연결한 내장 어댑터는 컴파일된 컴포넌트가 아닙니다.
runes
$state는 변하는 값을 선언하고 $derived는 계산 가능한 값을 표현합니다. 완료 수를 따로 저장하지 않으면 목록과 합계의 불일치를 줄입니다.
실습 준비
별도 Svelte 5 Vite 프로젝트에서 .svelte 파일을 컴파일해 실행합니다. 패키지 버전과 lockfile을 기록하세요. Frontory의 Svelte 미리보기는 실제 writable와 명시적 DOM 어댑터이며 .svelte 컴파일러나 runes 실행기가 아닙니다. 기존 svelte-01 미리보기는 출발점입니다. 본문의 확장 결과물은 별도 프로젝트에서 구현합니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- 외부 Svelte Vite 프로젝트 src/App.svelte에 카드 3개를 $state로 선언하세요.
- $derived로 미완료 필터 결과와 완료 수를 계산하고 버튼을 연결하세요.
- 내장 svelte-01의 writable 구독과 실제 컴포넌트의 갱신 경로를 notes/day01.md에서 구분하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 완료 상태 | 완료 0개 | 완료 1개 | 합계는 1·미완료 목록은 2개가 된다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 토글 후 목록과 합계가 함께 바뀐다.
- 내장 어댑터와 .svelte 컴파일 실행을 구분한 기록이 있다.
자가 점검
- rune은 일반 런타임 함수인가요?
- 컴포넌트 함수를 React처럼 매번 실행한다고 가정하면 무엇을 오해하나요?
공식 참고
연결된 예제와 실행 범위
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.