스벨트킷(SvelteKit) 라우팅 - 04

스벨트킷(SvelteKit)은 파일 시스템 기반의 라우팅을 제공합니다. 이는 코드베이스 내 파일과 폴더에 따라 브라우저에서 접근할 수 있는 URL 경로가 정의된다는 뜻입니다. 이제 코드를 통해 구체적인 예시로 이 라우팅 방식을 알아보겠습니다.

프로젝트 설정

이전 글에서 설명한것처럼 먼저 새로운 스벨트킷 프로젝트를 설정하고 나서, 해당 프로젝트의 폴더 구조를 이해하는 것이 중요합니다. 

기본 폴더 구조

프로젝트를 설정한 후, src 폴더 아래에 routes 폴더를 생성하고 모든 라우트는 이 폴더 내에 위치해야 합니다. 스벨트킷에서는 라우트를 설정하기 위해 특정한 파일 및 폴더 명명 규칙을 따르는 것이 중요합니다.

라우팅 규칙

1. 모든 라우트는 routes 폴더에 위치해야 합니다.
2. **파일명은 +page.svelte**이어야 합니다.
3. 폴더명은 URL 경로에 대응됩니다.

이 규칙을 따르면 파일이 자동으로 라우트로 인식됩니다.

예시: 첫 번째 라우트 생성

첫 번째 라우트는 사용자가 localhost:5173에 접속했을 때 표시될 페이지입니다.

1. routes 폴더를 생성하고 about 이라는 폴더를 생성하고 그 안에 +page.svelte 파일을 추가합니다.
2. +page.svelte 파일에는 간단한 HTML 코드로 H1 태그를 추가합니다.

html

코드 복사

<h1>I am a svelte programmer</h1>

 

이렇게 하면 홈 경로(/about)에 접속했을 때 "I am a svelte programmer"라는 문구가 표시됩니다. 이를 확인하기 위해 npm run dev 명령어로 로컬 서버를 실행할 수 있습니다.

추가 라우트 생성

이제 profile 페이지를 추가해보겠습니다.

1. routes 폴더 내에 profile 이라는 하위 폴더를 만들고 그 안에 +page.svelte 파일을 추가합니다. 이 파일에는 H1 태그로 " My Profile"라는 텍스트를 추가합니다.

html 코드 복사

<h1>My Profile</h1>

이제 localhost:5173/profile에 접속하면 "My Profile"이 표시됩니다.

404 페이지 처리

사용자가 존재하지 않는 경로(예: /company)를 입력하면, 스벨트킷은 자동으로 404 페이지를 반환합니다. 이를 위해 별도로 404 처리를 코드로 구현할 필요가 없습니다.

결론

스벨트킷의 파일 기반 라우팅 시스템은 직관적이고 간단합니다. 폴더와 파일의 구조만으로 라우트를 정의할 수 있기 때문에, 별도의 라우팅 설정 없이도 자연스럽게 경로가 매핑됩니다. 스벨트킷의 이러한 구조는 "설정보다 규칙을 따르는" 접근 방식을 통해 개발자의 편의성을 높여줍니다.