[javascript] Svelte에서 외부 데이터를 가져와 사용하는 방법은 어떻게 되나요?

Svelte에서 AJAX 요청을 하기 위해서는 fetch() 함수를 사용할 수 있습니다. 이 함수는 Promise를 반환하며, 외부 데이터를 가져올 때 사용됩니다.

먼저, Svelte 컴포넌트 내에서 onMount 함수를 사용하여 데이터를 가져오는 것이 일반적입니다. onMount 함수는 컴포넌트가 DOM에 마운트 된 후 호출됩니다.

<script>
  import { onMount } from 'svelte';

  let data = [];

  onMount(async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      data = await response.json();
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  });
</script>

이 코드에서 fetch() 함수를 사용하여 https://api.example.com/data에서 데이터를 가져옵니다. 데이터를 가져오는 동안 발생할 수 있는 오류를 처리하기 위해 try-catch 블록을 사용하였습니다. 성공적으로 데이터를 가져오면 response.json()을 사용하여 JSON 데이터로 변환합니다.

데이터를 가져와서 변수에 할당한 후에는 해당 변수를 이용해 원하는 방식으로 활용할 수 있습니다. 예를 들어, 가져온 데이터를 화면에 표시하거나 다른 처리를 수행할 수 있습니다.

이와 같이 Svelte에서 외부 데이터를 가져오는 방법은 간단하며 유연하게 사용할 수 있습니다. 추가적인 데이터 처리나 화면 업데이트 필요시, 컴포넌트의 다른 부분에서도 데이터를 활용할 수 있습니다. 자세한 내용은 Svelte 공식 문서를 참고하시기 바랍니다.