← 목록

JavaScript Fetch API를 활용한 데이터 가져오기 🌐

작성: 2025년 12월 18일읽기: 약 3분
GPTLLM

웹 개발을 배우는 여러분, 오늘은 JavaScript의 Fetch API를 이용해 웹에서 데이터를 어떻게 가져오는지 알아볼 거예요. Fetch API는 웹에서 데이터를 요청하고 받아오는 간단하면서도 강력한 방법 중 하나입니다. 복잡한 기술 용어는 잠시 잊고, 쉽게 이해할 수 있도록 하나씩 풀어보겠습니다.

Fetch API란?

Fetch API는 웹 브라우저에서 서버로부터 데이터를 비동기적으로 가져오기 위한 기능을 제공합니다. 쉽게 말해, 사용자가 웹 페이지를 떠나지 않고도 서버로부터 필요한 데이터를 받아올 수 있게 도와주는 도구입니다.

기본 사용법

Fetch API를 사용하는 기본 형태는 아래와 같습니다. 여기서는 가장 간단한 예제로, 웹에서 JSON 형태의 데이터를 가져오는 방법을 보여줍니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fetching error:', error));

이 코드는 다음과 같은 단계로 데이터를 가져옵니다:

  1. fetch() 함수에 데이터를 가져올 URL을 전달합니다.
  2. 서버로부터 응답을 받으면, .then()을 이용해 응답을 JSON 형태로 변환합니다.
  3. 변환된 데이터를 다음 .then()에서 콘솔에 출력합니다.
  4. 만약 요청 중에 오류가 발생하면, .catch()를 이용해 오류를 콘솔에 출력합니다.

실제 예제

이제 실제로 사용자 정보를 가져오는 간단한 예제를 살펴보겠습니다.

fetch('https://api.example.com/users/1')
  .then(response => response.json())
  .then(user => console.log('User name:', user.name))
  .catch(error => console.error('Error fetching user:', error));

이 코드는 특정 사용자의 정보를 가져와서, 그 사용자의 이름을 콘솔에 출력합니다. 여기서 https://api.example.com/users/1은 사용자 정보를 제공하는 가상의 URL입니다.

마치며

Fetch API를 사용하면, 웹 페이지를 새로고침하지 않고도 서버로부터 데이터를 가져올 수 있습니다. 이를 통해 사용자 경험을 크게 향상시킬 수 있습니다. 오늘 배운 내용을 통해 여러분의 프로젝트에 도움이 되길 바랍니다. 웹 개발의 세계는 끝없이 넓고, 우리가 탐험할 기술은 많습니다. 계속해서 배우고, 실험하며, 성장해 나가세요!