동적 라우트 매개변수: [id]
폴더 이름의 대괄호 표기법을 사용해 URL 세그먼트를 매개변수로 캡처합니다.
동적 라우트 매개변수: [id]은(는) CoddyKit의 무료 Sveltejs Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Sveltejs Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
대괄호 폴더 이름
동적 세그먼트에는 폴더 이름에 대괄호를 사용합니다.
src/routes/blog/[slug]/+page.svelte -> /blog/:slug매개변수에 접근하기
페이지 내부에서는 $app/stores의 $page 스토어를 사용합니다.
import { page } from "$app/stores";
<p>Slug: {$page.params.slug}</p>load 함수에서 접근하기
+page.js의 load 내부에서는 params.slug에 직접 접근합니다.
export function load({ params }) { return { slug: params.slug }; }여러 매개변수
여러 세그먼트로 구성된 경로에는 대괄호를 여러 개 사용합니다.
src/routes/[lang]/[slug]/+page.svelte매개변수 검증
매개변수가 유효하지 않으면 load에서 404를 반환합니다.
if (!isValid(params.slug)) error(404, "Not found");매처
매개변수에 정규 표현식을 적용하려면 src/params 매처를 추가합니다.
src/routes/blog/[slug=alpha]/+page.svelte매처 정의
함수를 내보내는 src/params/alpha.js를 만듭니다.
export function match(value) { return /^[a-z]+$/.test(value); }슬러그로 검색 엔진 최적화
슬러그는 일반적으로 URL에 안전한 ID입니다. 깔끔한 URL을 위해 제목에서 슬러그를 생성합니다.
정적 경로와 동적 경로 결합
동적 폴더와 함께 정적 폴더를 둘 수 있으며 충돌이 발생하면 정적 경로가 우선합니다.
타입 안전성
SvelteKit은 각 경로의 매개변수에 대한 타입을 생성하며, 이 타입은 load 함수 인수에서 사용할 수 있습니다.
동적 경로 사전 렌더링
사전 렌더링할 값을 열거하려면 +page.js에서 entries를 사용합니다.
빠른 확인
동적 세그먼트는 어떻게 선언합니까?
요약
동적 세그먼트에는 [param] 폴더를 사용합니다. load에서는 params로, 또는 $page.params로 접근합니다.
자주 묻는 질문
“동적 라우트 매개변수: [id]” 강의는 무료인가요?
네 — “동적 라우트 매개변수: [id]” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Sveltejs Academy 강의 전체를 잠금 해제할 수 있습니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“동적 라우트 매개변수: [id]”에서 뭘 배우나요?
폴더 이름의 대괄호 표기법을 사용해 URL 세그먼트를 매개변수로 캡처합니다. 브라우저에서 직접 실행하는 실습 코드로 Sveltejs Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Sveltejs Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Sveltejs Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“동적 라우트 매개변수: [id]” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Sveltejs Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Sveltejs Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- +page.svelte를 사용한 파일 기반 라우팅
- 동적 라우트 매개변수: [id]
- 선택적 매개변수와 나머지 매개변수
- 레이아웃 파일: +layout.svelte