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

웹 개발을 배우는 여러분, 웹사이트나 앱에서 데이터를 가져오고 싶으신가요? 오늘은 바로 그 방법, 바로 Fetch API를 사용하는 방법을 알아볼 거예요. Fetch API는 웹에서 데이터를 쉽게 가져올 수 있게 해주는 강력한 도구입니다. 복잡한 기술 용어는 잠시 뒤로하고, 실제로 어떻게 사용하는지 함께 살펴보겠습니다.

Fetch API란?

Fetch API는 브라우저에서 제공하는 자바스크립트 인터페이스로, 서버로부터 자원을 비동기적으로 가져오는 것을 도와줍니다. 간단히 말해, 웹 페이지가 로딩되는 동안 백그라운드에서 데이터를 가져오거나 보낼 수 있게 해주죠.

기본 사용법

Fetch API를 사용하는 가장 기본적인 방법은 아래와 같습니다. 여기서는 간단한 텍스트 파일을 가져와 보여주는 예제를 들어볼게요.

fetch('example.txt')
  .then(response => response.text())
  .then(data => console.log(data))
  .catch(error => console.error('데이터를 가져오는 중 오류가 발생했습니다:', error));

이 코드는 example.txt 파일을 가져와서 그 내용을 콘솔에 출력합니다. .then() 메소드를 사용해 데이터를 처리하고, 만약 오류가 발생하면 .catch()로 잡아서 오류 메시지를 출력합니다.

JSON 데이터 가져오기

웹 개발에서는 대부분의 데이터를 JSON 형식으로 다룹니다. Fetch API로 JSON 데이터를 가져오는 방법도 매우 간단합니다.

fetch('data.json')
  .then(response => response.json()) // 응답을 JSON으로 변환
  .then(data => console.log(data))
  .catch(error => console.error('데이터를 가져오는 중 오류가 발생했습니다:', error));

이 코드는 data.json 파일을 가져와서 JSON 형태로 변환한 다음, 그 내용을 콘솔에 출력합니다.

요청 옵션 설정하기

Fetch API를 사용할 때, 요청 방식(GET, POST 등), 헤더 설정, 바디 내용 등 다양한 옵션을 설정할 수 있습니다. 예를 들어, POST 요청을 보내고 싶다면 다음과 같이 할 수 있습니다.

fetch('submit-form', {
  method: 'POST', // 요청 방식 설정
  headers: {
    'Content-Type': 'application/json' // 컨텐츠 타입 설정
  },
  body: JSON.stringify({
    name: 'John Doe',
    job: 'Web Developer'
  }) // 보낼 데이터
})
.then(response => response.json())
.then(data => console.log('성공:', data))
.catch(error => console.error('오류:', error));

이 코드는 사용자의 이름과 직업을 서버에 전송하는 POST 요청을 보내는 예제입니다. 서버로부터의 응답도 JSON 형태로 받아 처리합니다.

마무리

Fetch API는 웹 개발에서 데이터를 다루는 강력한 도구입니다. 복잡해 보일 수 있지만, 기본적인 사용법을 익히면 다양한 상황에서 유용하게 사용할 수 있습니다. 오늘 배운 내용을 토대로 여러분의 프로젝트에 Fetch API를 적용해 보세요. 데이터를 가져오고, 보내고, 웹 개발의 가능성을 넓혀보세요!