새로운 데이터를 가져오고 필터링하거나 정렬하는 작업은 웹 애플리케이션에서 매우 흔한 일입니다. 자바스크립트 fetch API는 데이터를 비동기적으로 가져올 수 있는 강력한 도구입니다. 이 포스트에서는 fetch API를 사용하여 데이터를 필터링하고 정렬하는 방법을 알아보겠습니다.

데이터 가져오기

먼저, 데이터를 가져오는 과정부터 시작합시다. fetch API는 웹 서버로부터 데이터를 가져오는 데 사용됩니다. 아래는 fetch 함수를 사용하여 JSON 형식의 데이터를 가져오는 예제입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 데이터를 사용하여 필터링 및 정렬
  })
  .catch(error => {
    console.error('데이터 가져오기 실패:', error);
  });

위의 예제에서는 fetch 함수를 사용하여 ‘https://api.example.com/data’ 주소로 GET 요청을 보냅니다. 그런 다음 then 함수를 사용하여 서버의 응답을 JSON 형식으로 변환합니다. 그리고 마지막으로 데이터를 사용하여 필터링 및 정렬하는 작업을 수행할 수 있습니다.

데이터 필터링

데이터를 필터링하는 경우에는 주어진 조건에 따라 일치하는 데이터만 보여줘야 합니다. 아래는 간단한 예제입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const filteredData = data.filter(item => item.price < 100);
    console.log(filteredData);
  })
  .catch(error => {
    console.error('데이터 가져오기 실패:', error);
  });

위의 예제에서는 filter 함수를 사용하여 data 배열에서 price 속성이 100보다 작은 항목만 필터링합니다. 그리고 필터링된 데이터를 filteredData 변수에 저장하고 콘솔에 출력합니다. 필터링 조건은 프로젝트에 따라 다를 수 있으므로 필요에 따라 조건을 수정해야 합니다.

데이터 정렬

데이터를 정렬하는 경우에는 주어진 기준에 따라 데이터를 정렬하여 보여줘야 합니다. 아래는 간단한 예제입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const sortedData = data.sort((a, b) => a.price - b.price);
    console.log(sortedData);
  })
  .catch(error => {
    console.error('데이터 가져오기 실패:', error);
  });

위의 예제에서는 sort 함수를 사용하여 data 배열을 price 속성을 기준으로 오름차순으로 정렬합니다. 정렬된 데이터를 sortedData 변수에 저장하고 콘솔에 출력합니다. 정렬 기준은 프로젝트에 따라 다를 수 있으므로 필요에 따라 기준을 수정해야 합니다.

마무리

위에서 살펴본 예제는 자바스크립트 fetch API를 사용하여 데이터를 필터링하고 정렬하는 기본적인 방법을 보여줍니다. 실제로는 더 복잡한 조건이나 기준에 따라 작업해야 할 수도 있지만, 이러한 기본적인 개념을 기반으로 확장할 수 있습니다. fetch API를 활용하여 웹 애플리케이션에서 데이터를 필터링하고 정렬하는 작업을 수행해 보세요!