Svelte에서 API 요청을 처리하는 방법은 다양하지만, 가장 간편한 방법은 fetch 함수를 사용하는 것입니다. fetch 함수는 네트워크 요청을 보내고 응답을 받는 역할을 합니다.

먼저, Svelte 컴포넌트에서 API 요청을 처리하는 코드를 작성해 보겠습니다.

let data;

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('API 요청 실패:', error);
  }
}

이 예시에서는 fetchData 함수를 사용하여 API 요청을 보내고 응답을 받습니다. fetch 함수는 비동기 함수이기 때문에 async와 await를 사용하여 비동기적으로 처리할 수 있습니다.

fetch 함수에는 API의 엔드포인트를 전달하여 요청을 보내고, 받은 응답은 response.json() 메서드를 사용하여 JSON 형태로 변환합니다. 이렇게 얻은 데이터는 data 변수에 할당됩니다.

만약 API 요청이 실패한 경우, catch 블록에서 오류를 처리하고 콘솔에 오류 메시지를 표시합니다.

Svelte 컴포넌트에서 이 함수를 호출하여 API 요청을 실행할 수 있습니다. 예를 들어, 버튼 클릭 시 API 요청을 실행하도록 한다면 다음과 같이 코드를 작성할 수 있습니다.

<button on:click={fetchData}>API 요청</button>

위의 코드는 버튼을 클릭하면 fetchData 함수를 호출하여 API 요청을 실행합니다.

이와 같이 Svelte에서 API 요청을 처리하면 다양한 데이터를 서버에서 받아와 애플리케이션에 표시할 수 있습니다.

더 자세한 내용을 확인하려면 Svelte 공식 문서를 참조하십시오.