fetch와 {#await ..} 적용

이제 마지막으로 ajax 통신을 처리하는 방법을 알아보도록 하겠습니다.

svelte에서는 {#awit... } 이라는 비동기를 처리 할 수 있는 블록을 지원하고 있습니다.

참고로 비동기란 간단히 설명드리면 어던 호출을 했을 때 그 호출이 즉각적으로 반응되는 것이 아니라 어떤 이유로 얼마간의 시간이 흐른 후에 호출 결과가 도착하는 것이라고 생각하면 되겠습니다. 이럴 경우에 promise, asyn/await 같은 방법을 사용하지 않고, 코드를 짜면 자바스크립트는 결과를 기다리지 않고 실행되므로 요청한 결과가 없는 것 처럼 나타나 오류가 됩니다. 이럴때 일정 시간 호출의 결과를 기다리고 그 결과에 따라 다음 작업을 진행하는 것을 비동기 처리라고 보시면 되겠습니다. 보통 다른 서버와 통신하는 경우에 이런 상황이 많이 발생합니다. 이 비동기를 좀 더 알아보고 싶으시다면 자바스크립트 callback, promise, async/await 을 순차적으로 검색해 보시면 해당 내용에 대해 자세히 알 수 있을 것입니다.

비동기 처리를 위해서 꼭 이 awit 블록을 사용해야 하지는 않지만, 사용법을 알아두면 유용하게 사용이 가능합니다.

그리고 우리가 샘플로 사용할 데이터는 https://jsonplaceholder.typicode.com/ 이 사이트에서 데이터를 가져오도록 하겠습니다. 다음과 같이 입력하시면 임의생성된 어떤 포스트들을 얻을 수 있습니다. 페이지는 쿼리스트링은 이용해 제어가 가능한 형태여서 이번 예제를 만드는 데 상당히 유용한 예제라고 보시면 됩니다. _page는 보고싶은 페이지 넘버이고, _limit는 한번에 표시될 페이지 숫자가 되겠습니다. 다음과 같이 입력하면 10개의 object형식의 데이터를 얻을 수 있습니다. 그리고 _page의 숫자를 변경하면 해당 숫자에 해당하는 페이지의 내용들이 오는 것을 볼 수 있습니다.

<https://jsonplaceholder.typicode.com/posts?_page=1&_limit=10>

예제는 기존에 만든 todo 서비스에 이어서 진행하도록 하겠습니다.

pages 폴더 아래에 posts.svelte라는 파일을 만들어 줍니다.

fetch api 외부 데이터를 받아오는 방법으로 우리는 fetch api 라는 것을 사용하겠습니다. fetch api는 자바스크립트에서 기본적으로 제공하는 ajax 처리 api라고 보시면 되겠습니다.

패치의 기본적인 상용방법은 다음과 같습니다.

fetch(api 주소)
.then(response => response.json())  // 정상적으로 데이터를 받았을 때 처리
.catch((error) => console.log(error)) // 오류 처리

전체 소스내용

<script>

let page = 1
let limit = 10

$: items = fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${limit}`).then(response => response.json())

function nextPage() {
  page = page + 1
}

</script>

<header>
  <div class="wrap">
    <h1 class="main-title">REST API PAGE</h1>
    <p>페이지 소개 : api를 이용한 테스트 페이지 입니다. </p>       
  </div>
</header>
<div class="info">
  <div class="wrap">
    <span>PAGE: {page}</span>
  </div>
</div>
<div class="main" id="main" >
  {#await items}
    <p>...Loading</p>
  {:then items } 
    <ul>
      {#each items as item, index}
        <li>
          <p>[{item.id}] {item.title}</p>
        </li>
      {/each}
    </ul>    
  {:catch error}
    <p>오류가 발생했습니다.</p>
  {/await}
  
  <a href="#null" class="btn-blue" on:click={nextPage} >NEXT PAGE</a>

</div>

script 부터 설명드리도록 하겠습니다. 변수로 page와 limit를 각각 생성해 두고,

실제 api에서 비동기로 데이터를 받아오는 부분은 $: items 로 만들어 사용합니다. 여기서 items를 $: 로 하는 이유는 page를 변경시키면 변경시킨 페이지가 나오도록 하기 위해서 입니다. let으로 하면 처음 데이터는 나오지만, 페이지를 변화 시켰을 때 html 영역이 자동으로 변경된 데이터를 반영하지 않기 때문입니다. $: 는 계속해서 다양하게 사용되니 꼭 감을 잡으시기 바랍니다.

그리고 fatch는 자바스크립트에서 네트워크에 요청을 보내고 요청된 서버로 부터 결과를 promise로 받아오는 역할을 하는 api입니다. ajax 기법이 많이 사용되면서 자바스크립트에 도입된 api라고 보시면 됩니다.

그리고 fetch() 안에 사용된 따음표? 는 일반적인 따음표와 다 백틱기호라고 하는데요. 위치는 일반적으로 숫자1 옆에 있으니 참고 하시면 됩니다. 이기호를 사용하는 이유는 예전 자바스크립트에서는 문자열을 합치기 위해서 변수 + ',' + 변수 형태로 했었지만 이제는 백틱기호 문자열을 감싸고, 변수는 ${변수} 이런 식으로 사용할 수 있습니다.

이렇게 받아진 데이터를 html영역에서 다음과 같이 처리가 이루어 집니다.

  {#await items}
    <p>...Loading</p> // 데이터 전송이 완료될 때까지 대기
  {:then items } 
		//  데이터 전송이 완료된 후 실제 처리되는 부분
  {:catch error}
    <p>오류가 발생했습니다.</p> // 오류 발생시 표시
  {/await}

[만들면서 배우는 Svelte]

만들면서 배우는 svelte