Svelte URL 파라미터 사용

특정 검색 내용을 페이지로 넘겨서 지속적으로 제공하고자 하는 경우 URL 파라미터를 이용하게 되는데, Svelte역시 이를 활용할 수 있다. svelte-spa-router를 사용하여 어떻게 URL 파라미터를 사용할 수 있는지 알아보자.

GitHub - ItalyPaleAle/svelte-spa-router: Router for SPAs using Svelte 3 

 

Svelte에서 SPA를 구성하는 방법은 아래 링크에서 확인하기 바란다.

Svelte - SPA routes 설정 (asecurity.dev)

SPA 구성을 완료하고 이제 URL 파라미터를 사용하고자 한다면, 사용하고자 하는 페이지에 svelte-spa-router에서 제공하는 querystring 을 이용하여 구성할 수 있다.

<script>
    import {location, querystring} from 'svelte-spa-router'
    let searchParams = new URLSearchParams($querystring);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}
</script>

<p>The current page is: {$location}</p>
<p>The querystring is: {searchParams}</p>

위와 같이 구성한후 테스트 서버를 구성한 후 콘솔 로그를 확인해 보면, 아래와 같이 정상적으로 URL 파라미터를 &단위로 해석한 것을 알 수 있다.

URL파라미터는 아래 표준을 따르도록 되어 있는데, 기본적인 조건을 확인하는 방법은 다음과 같다.

URLSearchParams - Web APIs | MDN (mozilla.org)

URLSearchParams - Web APIs | MDN

 

조건	용도	응답
has	키가 있는지 확인	true/false
get	키의 값 리턴	Value return
getAll	키의 모든 값을 리스트로 리턴	Value List return
append	키와값 추가
set	키를 지정한 값을 변경
delete	지정한 키를 삭제

searchParams.has('topic') === true;      // true
searchParams.get('topic') === "api";     // true
searchParams.getAll('topic');            // ["api"]
searchParams.get('foo') === null;        // true
searchParams.append('topic', 'webdev');
searchParams.toString();                 // "q=URLParams&topic=api&topic=webdev"
searchParams.set('topic', 'More webdev');
searchParams.toString();                 // "q=URLParams&topic=More+webdev"
searchParams.delete('topic');
searchParams.toString();                 // "q=URLParams"