자바스크립트의 fetch API는 웹 애플리케이션에서 서버와 데이터를 주고받는 데 사용되는 강력한 도구입니다. 이를 활용하여 데이터를 필터링하고 정렬하는 방법을 알아보겠습니다.

데이터 가져오기

가장 먼저, fetch API를 사용하여 서버에서 데이터를 가져와야 합니다. fetch 함수를 사용하여 HTTP 요청을 보낼 수 있습니다. 아래는 간단한 예제입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 데이터를 사용하여 작업을 수행하는 코드
  })
  .catch(error => {
    console.error('데이터를 가져오는 동안 오류가 발생했습니다:', error);
  });

위의 코드에서 ‘https://api.example.com/data’는 데이터를 가져올 엔드포인트의 URL입니다. 서버는 이 URL을 통해 데이터를 제공해야 합니다. fetch 함수는 Promise를 반환하므로, then 메서드를 사용하여 응답과 데이터를 처리할 수 있습니다.

데이터 필터링

데이터를 가져왔으면, 이제 그 중에서 필요한 부분을 필터링할 수 있습니다. 자바스크립트의 배열 메서드인 filter를 사용하여 원하는 조건에 맞는 데이터만 선택할 수 있습니다. 아래는 예시입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const filteredData = data.filter(item => item.category === '사과');
    // 필터링된 데이터를 사용하여 작업을 수행하는 코드
  })
  .catch(error => {
    console.error('데이터를 가져오는 동안 오류가 발생했습니다:', error);
  });

위의 코드에서는 데이터 배열(data)에서 ‘category’ 속성이 ‘사과’인 항목들만 필터링하여 filteredData 배열에 저장합니다.

데이터 정렬

필터링된 데이터를 정렬해야 한다면, 자바스크립트의 배열 메서드인 sort를 사용할 수 있습니다. 아래는 예시입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const filteredData = data.filter(item => item.category === '사과');
    const sortedData = filteredData.sort((a, b) => a.price - b.price);
    // 정렬된 데이터를 사용하여 작업을 수행하는 코드
  })
  .catch(error => {
    console.error('데이터를 가져오는 동안 오류가 발생했습니다:', error);
  });

위의 코드에서는 먼저 필터링된 데이터를 가져와서 filteredData 배열에 저장한 후, 이 배열을 가격(price)에 따라 오름차순으로 정렬하여 sortedData 배열에 저장합니다. 정렬 순서를 변경하려면 콜백 함수 내의 비교 연산을 수정하면 됩니다.

마무리

이렇게 자바스크립트의 fetch API를 사용하여 데이터를 필터링하고 정렬하는 방법을 알아보았습니다. fetch API를 활용하면 웹 애플리케이션에서 서버와 손쉽게 데이터를 주고받을 수 있습니다. 필터링과 정렬을 통해 사용자에게 필요한 데이터만 제공하고, 정렬하여 데이터를 효율적으로 활용할 수 있습니다.