Svelte 앱 내에서 API 호출하기

Svelte 앱 내에서 API 호출을 수행하는 방법은 많이 있지만 저에게 효과가 있었던 접근 방식을 공유하고 싶습니다.

데모: Svelte REPL - Demo

전제 조건

먼저 새 Svelte 앱을 시작하세요. 이에 대해서는 Svelte's official Getting Started guide을 확인하십시오.

시작하기

이 자습서에서는 API를 호출하여 위스키 칵테일 목록을 가져오고 표시하는 가상 사용 사례를 안내합니다. 작업할 데이터의 형식은 다음과 같습니다.

TheCocktailDB에서 제공하는 무료 API

{
  "drinks":[
    {"strDrink":"Allegheny","strDrinkThumb":"https:\/\/www.thecocktaildb.com\/images\/media\/drink\/uwvyts1483387934.jpg","idDrink":"11021"},
    {"strDrink":"Bourbon Sour","strDrinkThumb":"https:\/\/www.thecocktaildb.com\/images\/media\/drink\/dms3io1504366318.jpg","idDrink":"11147"},
    {"strDrink":"John Collins","strDrinkThumb":"https:\/\/www.thecocktaildb.com\/images\/media\/drink\/0t4bv71606854479.jpg","idDrink":"11580"},
  ]
}

1단계: 데이터 저장소 생성

좋습니다. 새 앱 내에서 src 폴더 안에 store.js 라는 새 파일을 만듭니다. 여기에서 API에서 가져온 데이터를 "저장"하고 데이터 변환을 수행합니다.

생성했으면 store.js 다음 코드를 추가합니다.

import { writable, derived } from 'svelte/store';

/** Store for your data. 
This assumes the data you're pulling back will be an array.
If it's going to be an object, default this to an empty object.
**/
export const apiData = writable([]);

/** Data transformation.
For our use case, we only care about the drink names, not the other information.
Here, we'll create a derived store to hold the drink names.
**/
export const drinkNames = derived(apiData, ($apiData) => {
  if ($apiData.drinks){
    // Create a new array of just drink names
    return $apiData.drinks.map(drink => drink.strDrink); 
  }
  return []; // Default to empty array
});

2단계: API 호출하기

내부App.svelte는 실제로 API 호출을 수행할 곳입니다. 기술적으로 모든 Svelte 파일에서 이 작업을 수행할 수 있지만 이 자습서에서는 이것을 사용합니다.
<script> 태그 안의 모든 것을 다음으로 바꿉니다.

import { onMount } from "svelte";
import { apiData, drinkNames } from './store.js';

// When the page is loaded, make your API call
onMount(async () => {
  // Make your API call
  fetch("https://www.thecocktaildb.com/api/json/v1/1/search.php?i=bourbon")
  .then(response => {
    // Parse response as json
    return response.json()
  })
  .then(data => {
    // Console logging for debug purposes
    console.log("Data", data);
    // Save data to store
    apiData.set(data); 
  }).catch(error => {
    // Do error handling
    console.error("Error", error);
    return [];
  });
});

3단계: 데이터 표시

이제 스토어에 데이터를 저장하고 변환했으므로 스토어를 호출하여 데이터를 가져와 표시할 수 있습니다. API 호출을 추가한 동일한 App.svelte 파일 내에서 <main> 내의 코드를 다음으로 바꿉니다.

<h1>Whiskey Drinks Menu</h1>
<ul>
<!-- For each drink inside our derived store, create a list item -->
{#each $drinkNames as drinkName}
  <li>{drinkName}</li>
{/each}
</ul>

짜잔! 아주 간단하죠? 이 튜토리얼에서는 API를 호출하고 일부 데이터 변환을 수행하고 표시했습니다! 분명히 이것은 매우 간단한 사용 사례이지만 앞으로 앱에서 빌딩 블록으로 사용할 수 있기를 바랍니다. 읽어주셔서 감사합니다. 행운을 빕니다!

여기에서 작동 확인: Svelte REPL - Demo