스벨트킷(SveltKit) 동적 라우트 구현과 라우트 파라미터 처리 방법 - 05

SvelteKit은 빠르게 성장하고 있는 웹 프레임워크 중 하나로, 다양한 웹 애플리케이션을 효율적으로 구축할 수 있도록 돕습니다. 특히 SvelteKit의 네스티드 라우트와 동적 라우트 기능은 복잡한 애플리케이션에서 매우 유용합니다. 이번 글에서는 SvelteKit에서 동적 라우트를 설정하고 라우트 파라미터를 처리하는 방법을 알아보겠습니다.

네스티드 라우트 개념

네스티드 라우트는 말 그대로 라우트 안에 또 다른 라우트를 정의하는 방식입니다. 예를 들어 /blog/first와 같은 경로는 /blog라는 메인 경로 아래에 first라는 서브 경로를 추가하는 방식입니다. SvelteKit에서 네스티드 라우트를 구현하려면 특정 폴더 구조를 따라 파일을 배치하면 됩니다.

제품 목록 및 세부 정보 페이지 생성

이제 간단한 예제로 시작해 보겠습니다. 우선 제품 리스트 페이지를 만들어 보겠습니다. /products 경로에서 세 개의 제품 목록을 표시하고, 각 제품을 클릭하면 해당 제품의 세부 정보 페이지로 이동할 수 있도록 하려 합니다. 이러한 구조는 복잡한 애플리케이션에서 매우 흔히 사용됩니다.

정적 경로의 한계

초기에 정적 경로로 각각의 제품 페이지를 만들 수도 있습니다. 예를 들어, /products/1, /products/2와 같이 폴더를 만들고 각각에 대응하는 +page.svelte 파일을 작성하는 방식입니다. 하지만 이렇게 하면 100개의 제품이 있을 경우, 100개의 폴더와 파일을 만들게 됩니다. 이는 매우 비효율적이고, 관리가 어려워질 수 있습니다.

동적 경로 세그먼트 소개

이 문제를 해결하기 위해 SvelteKit에서는 동적 경로 URL을 사용할 수 있습니다. 즉, 폴더 이름을 대괄호로 감싸서 변수처럼 사용할 수 있습니다. 예를 들어, /products/[productID]와 같은 형식으로 경로를 설정하면, 다양한 제품 ID에 대응하는 하나의 파일만으로 모든 제품 세부 정보 페이지를 구현할 수 있습니다.

동적 라우트 설정: 제품 페이지 예제

이를 SvelteKit에서 구현하려면, /products 폴더 안에 [productID]라는 폴더를 만들고 그 안에 page.svelte 파일을 작성하면 됩니다. 그러면 /products/1, /products/2와 같은 다양한 제품 ID를 가진 경로들이 자동으로 이 파일에 매핑됩니다.

라우트 파라미터 추출하기

SvelteKit에서는 app/stores 모듈을 사용하여 라우트 파라미터를 추출할 수 있습니다. page라는 읽기 전용 스토어에서 현재 경로 정보를 가져오고, 이를 통해 동적 경로의 파라미터를 추출할 수 있습니다.

svelte 코드 복사

<script> 
import { page } from '$app/stores'; 
const productID = $page.params.productID; 
</script> 

<h1>제품 {productID}에 대한 세부 정보</h1>

이 코드를 사용하면 URL의 제품 ID에 따라 동적으로 페이지 내용을 변경할 수 있습니다.

페이지 컴포넌트 설명

SvelteKit에서 각 페이지는 독립된 컴포넌트로 동작하며, HTML, CSS, JavaScript를 한 파일 안에 모두 포함할 수 있습니다. +page.svelte 파일을 수정함으로써 쉽게 UI와 기능을 함께 제어할 수 있습니다.

파라미터로부터 제품 ID 출력하기

page 스토어를 사용하여 추출한 productID 값을 HTML에 출력할 수 있습니다. 예를 들어 /products/1로 접근하면 "제품 1에 대한 세부 정보"라는 텍스트가 표시됩니다. /products/100으로 접근하면 "제품 100에 대한 세부 정보"가 표시됩니다.

다양한 제품 페이지 테스트

동적 라우트를 구현한 후에는 다양한 제품 페이지로 이동하여 테스트할 수 있습니다. SvelteKit은 자동으로 동적 라우트를 처리하기 때문에, /products/1, /products/2와 같은 경로에서 제품의 세부 정보를 쉽게 볼 수 있습니다.

동적 라우트의 유용성

동적 라우트는 특히 많은 제품이나 게시글이 있는 애플리케이션에서 유용합니다. 하나의 파일 구조만으로 다양한 경로를 처리할 수 있기 때문에 유지보수가 쉬워집니다. 리스트-디테일 패턴은 전자 상거래 사이트에서 자주 사용되는 패턴입니다.

SvelteKit을 사용한 애플리케이션 확장성

동적 라우트를 사용하면 애플리케이션의 확장성도 높아집니다. 제품이 몇 개 더 추가되어도 새로운 폴더나 파일을 만들 필요 없이, 하나의 동적 경로로 처리할 수 있습니다.

문제 해결

정적 경로로 모든 제품 페이지를 개별적으로 만드는 것은 비효율적입니다. 동적 라우트를 사용하면 이 문제를 해결할 수 있습니다. 대괄호로 감싼 폴더 이름을 사용하면 무한한 제품 페이지를 하나의 파일로 처리할 수 있습니다.

추가 기능 및 API 통합

실제 애플리케이션에서는 라우트 파라미터를 이용해 API 호출을 통해 데이터를 가져올 수 있습니다. 예를 들어, productID를 사용하여 백엔드에서 해당 제품의 정보를 가져오고, 이를 페이지에 표시할 수도 있습니다.

마무리

SvelteKit에서 동적 라우트는 복잡한 애플리케이션을 효율적으로 관리할 수 있는 강력한 도구입니다. 이를 통해 유지보수와 확장성을 동시에 잡을 수 있습니다. 다양한 사용 사례에서 동적 라우트를 활용하여 유연한 웹 애플리케이션을 개발할 수 있습니다.