SvelteKit 현재 url, query string, params 구하기

SvelteKit으로 개발하면서 현재 경로에 따라 스타일링을 해야 하는 경우가 있습니다. 그러려면 현재 경로를 알 수 있어야겠죠. 그럼 sveltekit에서 현재 url 경로 구하는 방법을 확인해 보겠습니다.

오랫동안 SvelteKit이 1.0 출시를 못하고 있었는데, 2022년 12월 14일부로 1.0 출시를 했습니다. 1.0 출시 이전에는 처리하는 방법이 바뀌기도 했었는데, 이제 1.0 출시를 했으니, 어느정도 안정이 됐다고 볼 수 있겠네요.

page 스토어 활용

sveltekit에서는 page라는 스토어에 현재 페이지에 대한 정보가 보관되고 있습니다.
import 하는 방법은 아래와 같습니다.

import {page} from "$app/stores";

현재 url 경로 구하기

$page.url.pathname을 이용하면 “/about”과 같이 현재 url을 얻을 수 있습니다.

현재 url의 query string 구하기

$page.url.search를 이용하면 “?keyword=test”와 같이 현재의 query string을 얻을 수 있습니다.

1.0 출시 이전에 $page.path 였던 적도 있고, $page.url.pathname을 이용하기도 했는데, 1.0 출시 이후로 확인한 기준으로는 $page.url.pathname을 이용하셔야 합니다. 아래의 코드는 현재의 pathname과 query string을 화면에 출력하는 코드입니다.

<script>
import {page} from "$app/stores";
</script>

<div>{$page.url.pathname}</div>
<div>{$page.url.search}</div>

만약 http://localhost:5173/search?keyword=love 라는 경로로 접속했다면, 아래와 같은 내용이 브라우저에 출력됩니다.

/search
?keyword=love

params를 활용하여 slug 구하기

이를테면 /blog/[slug] 의 형태로 블로그를 만들어서 slug를 활용 중이라면, 아래와 같이 $page.url.params를 활용하여 {slug: “slug값”} 객체를 구할 수 있습니다.

<script>
import {page} from "$app/stores";
</script>

<div>{$page.url.params.slug}</div>

만약 https://localhost:5173/blog/hello-world 라는 경로로 접속한다면, 아래와 같은 내용이 브라우저에 출력됩니다.

hello-world

예제) 현재 url에 따라 링크 스타일링 하기

네비게이션 메뉴에서 현재 페이지의 링크를 굵게 표시하고 싶다면 아래와 같이 처리할 수 있습니다.

<script>
  import {page} from '$app/stores';
</script>

<header>
  <nav>
    <a href="/" class="{$page.url.pathname === '/' ? 'selected' : ''}">홈페이지</a>
    <a href="/about" class="{$page.url.pathname === '/about' ? 'selected' : ''}">이 사이트는?</a>
  </nav>
</header>
<slot/>

<style>
.selected {
  font-weight: bold;
}
</style>

관련 자료

SvelteKit 공식 홈페이지의 Page 객체에 대한 문서를 확인하시면 보다 자세한 내용을 볼 수 있습니다.

SvelteKit 라우팅 +page와 +layout 사용 방법(SvelteKit 1.0 기준)

SvelteKit이 지난 12월 14일 1.0 출시를 했습니다. 기존에는 아무래도 1.0 출시 이전이라 페이지 라우팅 방식에 변경이 있었습니다. 이제는 1.0 출시를 했으니 안정이 좀 됐다고 봐도 괜찮을 것 같습니다. 그럼 SvelteKit 라우팅 +page, +layout 사용 방법을 알아보겠습니다.

SvelteKit 라우팅 방식의 변경

기본 라우팅 페이지를 index.svelte로 사용했던 적이 있었습니다. 하지만, 현재는 +page.svelte를 인덱스 페이지로 사용하고 있습니다. __layout.svelte도 +layout.svelte로 변경되었습니다. 그래서 다른 블로그나 유튜브 등에 아직도 과거에 작성했던 코드들이 혼란을 주는 지점이 있습니다.

이제 정식으로 1.0 릴리즈를 했다는 것만으로도 안정감이 느껴집니다. 이처럼, +page와 +layout으로 파일명을 사용하는 간단한 라우팅 방식은 매우 맘에 드네요.
그러면 SvelteKit의 라우팅 구조를 간단히 살펴보겠습니다.

라우팅 경로 = 디렉토리 경로

SvelteKit에서는 디렉토리 경로를 그대로 라우팅 경로로 사용합니다.

src/routes/+page.svelte 파일이 바로 루트 경로(/)가 됩니다.
src/routes/about/+page.svelte 파일은 /about 이라는 경로가 됩니다.

그럼 +page.svelte 파일이 무엇인지 확인해 봅시다.

+page.svelte

우선 src/routes 하위 디렉토리에 있는 모든 +page.svelte가 index 파일의 역할을 합니다.

+layout.svelte

웹 페이지의 공통 레이아웃에 대한 설정입니다. 아래 코드는 SvelteKit 공식문서에서 가져왔습니다.

<nav>
  <a href="/">홈페이지</a>
  <a href="/about">오솔길은?</a>
  <a href="/settings">설정</a>
</nav>

<slot></slot>
Svelte

위의 코드에서 nav 영역은 공통으로 들어가는 부분이고, slot이 각 페이지마다 다르게 들어가는 부분입니다. 위와 같이 +layout을 설정하면, 네비게이션이 모든 페이지에 공통으로 들어가고 각 페이지는 slot에 들어가게 됩니다.

<h1>홈페이지</h1>
Svelte

홈페이지를 위와 같이 작성하고, 이제 아래와 같이 /about 페이지를 작성해 보겠습니다.

<h1>오솔길은?</h1>
Svelte

/about를 브라우저로 열면, 다음과 같이 slot 부분에 src/routes/about/+page.svelte의 내용이 들어갑니다.

<nav>
  <a href="/">홈페이지</a>
  <a href="/about">오솔길은?</a>
  <a href="/settings">설정</a>
</nav>

<h1>오솔길은?</h1>
Svelte

중첩 +layout

+layout을 각 라우팅에서 사용하면 중첩하여 사용할 수 있습니다. 이를테면, src/routes/about/+layout.svelte를 작성하면, about 하위에 있는 +page는 해당 레이아웃을 추가 적용받게 된다.
예를들어 about 하위에 introduction 이라는 페이지가 더 있는 경우 +layout가 있다고 가정해 봅시다.

<nav>
  <a href="/about">오솔길은?</a>
  <a href="/about/introduction">소개</a>
<nav>

<slot></slot>
Svelte

그리고 introduction을 다음과 같이 작성해 줍니다.

<h1>소개</h1>
Svelte

브라우저에서 /about/introduction을 열면 아래와 같은 페이지가 열립니다.

<nav>
  <a href="/">홈페이지</a>
  <a href="/about">오솔길은?</a>
  <a href="/settings">설정</a>
</nav>

<nav>
  <a href="/about">오솔길은?</a>
  <a href="/about/introduction">소개</a>
<nav>

<h1>소개</h1>
Svelte

스타일링만 잘 해 주면 사용자가 접근하기 좋은 네비게이션이 완성되겠죠.

관련 자료

SvelteKit을 처음 사용하면서 저는+page.svelte가 뭐지? 하는 궁금함에 공식 문서 확인하다가 알게 됐습니다. 자세한 내용은 https://kit.svelte.dev/docs/routing을 확인하시면 됩니다.
SvelteKit 라우팅 개념을 잡는데 도움이 되길 바랍니다.

같이 읽으면 좋은 글

전기요금 계산기를 만들었어요

이번에 처음 접하게 된 SvelteKit을 활용하여 전기요금 계산기를 만들었습니다. Svelte는 지금까지 개발해 왔던 React, Vue, Angular를 돌아보지 않게 만들 정도의 작품이라는 생각이 듭니다. Svelte에 대한 감탄은 그만하고, 전기요금 계산기에 대해 간단히 설명드릴게요.

누진요금 계산원리

어떤 원리로 누진요금이 계산되는지, 그리고 각 단계별로 계산되는 누진 요금도 확인할 수 있습니다. 기후환경요금과 연료비 조정액에 대한 계산까지 모두 살펴보실 수 있습니다. 이 내용이 너무 복잡하다고 생각하시는 분들은 그냥 이용전력량과 해당 월만 선택하시면 간단히 전기요금을 확인하실 수 있습니다.

모바일 & PC 지원

휴대폰과 데스크탑 모두 지원합니다. 너무 오래된 장비만 아니라면 이용하기 어렵지 않을 것입니다.

향후 계획

이후에는 전기요금 관련 정보들을 보강하고, 추가 기능 개발도 이어갈 예정입니다.

관심모아 세이브(https://save.osg.kr)에 접속하시면 바로 이용할 수 있습니다.

관심모아 세이브 전기요금 계산기 이미지