+page.svelte를 사용한 파일 기반 라우팅
src/routes 아래의 파일 경로를 URL 경로에 자동으로 매핑합니다.
+page.svelte를 사용한 파일 기반 라우팅은(는) CoddyKit의 무료 Sveltejs Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Sveltejs Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
파일 = 경로
SvelteKit은 src/routes 아래의 폴더를 URL 경로에 매핑합니다. +page.svelte 파일이 경로를 정의합니다.
루트 페이지
src/routes/+page.svelte는 /에서 렌더링됩니다.
소개 페이지
src/routes/about/+page.svelte는 /about에서 렌더링됩니다.
중첩 경로
폴더는 중첩할 수 있습니다. src/routes/blog/posts/+page.svelte는 /blog/posts에서 렌더링됩니다.
페이지 구성 요소
파일은 일반적인 Svelte 구성 요소입니다. 학습한 모든 기능을 사용할 수 있습니다.
<!-- +page.svelte -->
<h1>About Us</h1>
<p>Welcome to our site.</p>라우팅 규칙
+로 시작하는 파일 이름은 SvelteKit에서 특별한 의미를 가집니다. +page, +layout, +server 등이 있습니다.
가져오기 불필요
경로를 수동으로 등록할 필요가 없습니다. 파일 시스템이 라우터 역할을 합니다.
프로그래밍 방식 탐색
코드에서 탐색하려면 $app/navigation의 goto를 사용합니다.
import { goto } from "$app/navigation";
goto("/about");링크 구성 요소
일반적인 <a href> 태그를 사용하면 SvelteKit이 클라이언트 측 탐색을 위해 이를 가로챕니다.
미리 가져오기
마우스를 올렸을 때 미리 가져오도록 링크에 data-sveltekit-preload-data를 사용합니다.
404 페이지
찾을 수 없는 페이지를 사용자 지정하려면 src/routes/+error.svelte를 만듭니다.
빠른 확인
/products 경로는 어디에 만듭니까?
요약
파일 시스템이 경로를 정의합니다. src/routes 아래 어느 폴더에든 있는 +page.svelte는 하나의 경로가 됩니다.
자주 묻는 질문
“+page.svelte를 사용한 파일 기반 라우팅” 강의는 무료인가요?
네 — “+page.svelte를 사용한 파일 기반 라우팅” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Sveltejs Academy 강의 전체를 잠금 해제할 수 있습니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“+page.svelte를 사용한 파일 기반 라우팅”에서 뭘 배우나요?
src/routes 아래의 파일 경로를 URL 경로에 자동으로 매핑합니다. 브라우저에서 직접 실행하는 실습 코드로 Sveltejs Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Sveltejs Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Sveltejs Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“+page.svelte를 사용한 파일 기반 라우팅” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Sveltejs Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Sveltejs Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- +page.svelte를 사용한 파일 기반 라우팅
- 동적 라우트 매개변수: [id]
- 선택적 매개변수와 나머지 매개변수
- 레이아웃 파일: +layout.svelte