자바스크립트는 웹에서 데이터를 가져오고 가공하는 데에 매우 유용한 fetch API를 제공합니다. fetch API는 HTTP 요청을 보내고 응답을 처리함으로써 서버로부터 데이터를 가져올 수 있는 기능을 제공합니다. 이를 활용하여 데이터를 변환하고 가공하여 원하는 형식으로 사용할 수 있습니다.

데이터 가져오기

fetch API를 사용하여 데이터를 가져오려면 fetch 함수를 사용해야 합니다. 이 함수는 Promise 객체를 반환하며, 이를 활용하여 응답을 처리할 수 있습니다. 아래는 fetch API를 사용하여 데이터를 가져오는 예제입니다.

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

위 예제에서는 fetch 함수에 데이터를 가져올 URL을 전달하고, 응답이 성공적으로 도착하면 response.json() 함수를 사용하여 JSON 형식으로 변환합니다. 이후 변환된 데이터를 활용하여 원하는 가공 작업을 수행할 수 있습니다.

데이터 변환 및 가공하기

fetch API를 통해 가져온 데이터는 원하는 형식으로 변환하거나 가공할 수 있습니다. 예를 들어, 숫자 데이터를 포맷팅하거나 문자열 데이터를 자르는 등의 작업을 수행할 수 있습니다. 아래는 몇 가지 예시입니다.

숫자 데이터 포맷팅하기

fetch('https://example.com/data')
  .then(response => response.json())
  .then(data => {
    const formattedData = data.map(value => value.toLocaleString());
    console.log(formattedData);
  })
  .catch(error => {
    console.error(error);
  });

위 예제에서는 데이터를 가져와 toLocaleString() 메서드를 사용하여 숫자 데이터를 해당 로케일에 맞는 문자열로 포맷팅합니다. 이후 formattedData 배열에 포맷팅된 데이터를 저장하고, 원하는 방식으로 활용할 수 있습니다.

문자열 데이터 자르기

fetch('https://example.com/data')
  .then(response => response.json())
  .then(data => {
    const truncatedData = data.map(value => value.substring(0, 10));
    console.log(truncatedData);
  })
  .catch(error => {
    console.error(error);
  });

위 예제에서는 데이터를 가져와 substring() 메서드를 사용하여 문자열 데이터를 원하는 길이로 자릅니다. 이후 truncatedData 배열에 자른 데이터를 저장하고, 필요에 따라 가공된 데이터를 활용할 수 있습니다.

결론

자바스크립트 fetch API는 데이터를 가져오고 가공하기 위한 강력한 도구입니다. 이를 활용하여 데이터를 변환하고 가공하는 작업을 간단하게 수행할 수 있습니다. 데이터 처리가 필요한 웹 애플리케이션을 개발할 때, fetch API를 적절히 활용하여 데이터 변환 및 가공 기능을 구현해보세요.