본문 바로가기
Svelte

Svelte URL 파라미터 사용

by 올엠 2022. 3. 31.
반응형

특정 검색 내용을 페이지로 넘겨서 지속적으로 제공하고자 하는 경우 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

The URLSearchParams interface defines utility methods to work with the query string of a URL.

developer.mozilla.org

 

조건 용도 응답
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"

 

 

반응형