자바스크립트의 fetch API는 웹 애플리케이션에서 서버와 데이터를 주고받을 수 있는 강력한 도구입니다. fetch API를 사용하면 서버로부터 데이터를 가져오고, 해당 데이터를 가공하거나 변환할 수 있습니다. 이를 통해 웹 애플리케이션에서 필요한 정보를 쉽게 추출하거나 수정할 수 있습니다.

이번 블로그 포스트에서는 fetch API를 사용하여 데이터를 변환하고 가공하는 방법에 대해 알아보겠습니다.

데이터 가져오기

먼저, fetch API의 기본적인 사용법부터 살펴보겠습니다. fetch 함수를 사용하여 서버로부터 데이터를 가져올 수 있습니다. 다음은 간단한 예제입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 데이터 가공 및 변환
  })
  .catch(error => {
    // 에러 처리
  });

fetch 함수에는 API 엔드포인트 URL을 전달합니다. 이후 response.json()을 호출하여 서버 응답 몸체를 JSON 형식으로 변환합니다. 그리고 JSON 데이터를 사용하여 필요한 가공 작업을 수행할 수 있습니다.

데이터 가공 및 변환

가져온 데이터를 가공하거나 변환하는 방법은 다양합니다. 예를 들어, 데이터 객체의 특정 속성 값을 추출하거나, 데이터 배열을 필터링하는 등의 작업을 수행할 수 있습니다.

데이터 객체 가공하기

가장 일반적인 가공 작업 중 하나는 데이터 객체의 특정 속성 값을 추출하는 것입니다. 이를 위해 map() 함수를 사용할 수 있습니다. 다음은 가져온 데이터 배열에서 ‘name’ 속성 값을 추출하는 예제입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const names = data.map(item => item.name);
    console.log(names);
    // ["John", "Emily", "Michael", ...]
  })
  .catch(error => {
    console.error(error);
  });

데이터 배열 필터링하기

가져온 데이터 배열을 필터링하여 특정 조건을 만족하는 요소만 추출할 수도 있습니다. 이를 위해 filter() 함수를 사용할 수 있습니다. 다음은 가져온 데이터 배열에서 ‘age’ 속성이 30 이상인 요소만 필터링하는 예제입니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const filteredData = data.filter(item => item.age >= 30);
    console.log(filteredData);
    // [{name: "John", age: 35}, {name: "Michael", age: 32}, ...]
  })
  .catch(error => {
    console.error(error);
  });

이외에도 수많은 데이터 가공 및 변환 작업을 수행할 수 있습니다. fetch API를 사용하는 것은 데이터를 가져오는 것만큼이나 중요한 부분이며, 데이터를 가공하여 웹 애플리케이션에 적합한 형태로 변환하는 것은 핵심적인 역할을 합니다.

결론

자바스크립트 fetch API를 사용하여 데이터를 가져와서 가공하는 방법에 대해 알아보았습니다. fetch API를 적절하게 활용하면 서버와의 통신을 통해 필요한 데이터를 가져올 수 있습니다. 또한, 가져온 데이터를 가공하거나 변환하여 웹 애플리케이션에 맞게 사용할 수 있습니다.

더 많은 데이터 가공 기술과 기법을 익히고자 한다면, 자바스크립트의 다른 배열 함수들을 참고하여 활용해 보세요.