[JS] fetch와 REST API

---

01

fetch 란

1. fetch의 배경

fetch가 나오기 전에는 AJAX를 사용하여 자바스크립트에서 데이터를 서버로 요청하고 받는 것이 어려웠습니다.

• AJAX(Asynchronous JavaScript And XML)
  : 전체 페이지를 새로 고침 하지 않고 필요한 데이터만 서버에서 비동기적으로 가져오는 기법입니다.
• XMLHttpRequest
  : 데이터를 요청하고 받아오는 객체인데, 복잡하고 불편한 점이 있었습니다.
  예를 들어, 콜백 함수를 사용해야 하고 코드가 길어지는 단점이 있었습니다.

 

2. fetch란?

fetch는 AJAX의 대체로, 네트워크 요청을 보내고 정보를 받아오는 더 간편하고 효율적인 방법입니다.

fetch는 Promise 기반이기 때문에, AJAX보다 간편하고 효율적으로 사용할 수 있습니다.

 

✅ fetch의 장점:

• Promise 기반이기 때문에 비동기 코드가 더 깔끔하고 직관적입니다.
• 페이지를 새로 고침하지 않고도 서버로부터 데이터를 가져올 수 있습니다.
• 대부분의 모던 브라우저에서 지원되지만, 구식 브라우저에서는 지원되지 않습니다.

 

3. 기본 문법

let response = await fetch(url);  // 네트워크 요청을 보냄

• url: 데이터를 요청하고자 하는 서버의 주소입니다.
• options: 선택적인 매개변수로, HTTP 메서드(POST, GET 등), 헤더 정보 등을 설정할 수 있습니다. 만약 아무것도 설정하지 않으면 기본값인 GET 요청을 보냅니다.

fetch() 호출 시 네트워크 요청이 발생하고, Promise 객체가 반환됩니다.

---

02

fetch 예제

1: 기본 fetch 사용 (데이터 받기)

특정 API에서 데이터를 받아오는 예제입니다.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())  // JSON 형태로 응답 처리
  .then(data => console.log(data))  // 받은 데이터 출력
  .catch(error => console.error('Error:', error));  // 에러 처리

 

2: fetch로 데이터 보내기 (POST 요청)

POST 요청을 보내서 서버에 데이터를 추가하는 예제입니다.

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
})
  .then(response => response.json())  // 응답을 JSON으로 처리
  .then(data => console.log(data))  // 보낸 데이터의 응답 출력
  .catch(error => console.error('Error:', error));  // 에러 처리

 

3: fetch로 API 데이터 받아오기 (API 예제)

async/await를 사용하여 API에서 사용자 데이터를 비동기적으로 받아오는 방법입니다.

async function getUserData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    if (response.ok) {
      const data = await response.json();  // JSON 데이터 받기
      console.log(data);
    } else {
      console.error('Error:', response.status);  // 에러 상태 출력
    }
  } catch (error) {
    console.error('Request failed', error);
  }
}

getUserData();

---

03

REST API 란?

REST API는 서버와 클라이언트 간에 데이터를 주고받는 방법 중 하나입니다.

REST는 Representational State Transfer의 약자로, 서버와 클라이언트가 데이터를 주고받는 규칙입니다.

 

서버는 URL을 통해 요청을 받고, 클라이언트(브라우저)는 요청을 보내어 데이터를 받습니다.

예를 들어, 웹사이트에서 게시글을 불러오기, 사용자 정보를 추가하기, 상품을 삭제하기 등을 할 때 사용됩니다.

 

1. REST API의 특징

✅ HTTP 요청을 사용

: REST API는 HTTP 프로토콜을 사용하여 요청과 응답을 주고받습니다.

 

✅ 리소스

: REST API에서는 서버와 클라이언트가 주고받는 데이터들을 리소스라고 부릅니다. 

예를 들어, users(사용자들), posts(게시글들), products(상품들) 같은 데이터들이 리소스입니다.

 

✅ HTTP 메서드: 각 작업은 HTTP 메서드를 사용해 요청합니다.

• GET: 데이터를 가져오기
• POST: 데이터를 추가하기
• PUT: 데이터를 수정하기
• DELETE: 데이터를 삭제하기

 

2. REST API의 작동 방식

1. 클라이언트(웹 브라우저, 모바일 앱 등)가 서버에 요청을 보냅니다.
2. 서버는 요청에 맞는 데이터를 준비하고 응답을 반환합니다.
3. 클라이언트는 받은 데이터를 화면에 표시하거나 다른 작업을 수행합니다.

---

04

REST API 예시

이제 fetch와 REST API를 활용한 실제 사용 예시를 살펴보겠습니다.

REST API는 서버와 클라이언트 간에 데이터를 주고받는 방식으로,

GET, POST, PUT, DELETE와 같은 HTTP 메서드를 사용해 작업을 처리합니다.

 

이 예시에서는 fetch를 사용하여 REST API에 요청을 보내고, 그 응답을 처리하는 방법을 보여줍니다.

1. GET 요청 예시 (데이터 가져오기)

GET 요청은 서버에서 데이터를 가져올 때 사용됩니다. 예를 들어, 특정 사용자 정보를 불러오는 예시입니다.

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(response => response.json())  // 서버의 응답을 JSON으로 변환
  .then(data => console.log(data))  // 받은 사용자 정보 출력
  .catch(error => console.error('Error:', error));  // 에러 처리

 

2. POST 요청 예시 (데이터 보내기)

POST 요청은 데이터를 서버에 보내는 데 사용됩니다. 예를 들어, 새로운 게시글을 추가하는 예시입니다.

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',  // POST 요청
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'New Post',
    body: 'This is the content of the new post',
    userId: 1
  })
})
  .then(response => response.json())  // 응답을 JSON으로 처리
  .then(data => console.log(data))  // 서버에서 응답받은 데이터 출력
  .catch(error => console.error('Error:', error));  // 에러 처리

 

3. PUT 요청 예시 (데이터 수정하기)

PUT 요청은 서버에 있는 데이터를 수정할 때 사용됩니다. 예를 들어, 특정 게시글을 수정하는 예시입니다.

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PUT',  // PUT 요청
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    id: 1,
    title: 'Updated Post',
    body: 'This is the updated content of the post',
    userId: 1
  })
})
  .then(response => response.json())  // 수정된 데이터를 JSON으로 처리
  .then(data => console.log(data))  // 수정된 데이터 출력
  .catch(error => console.error('Error:', error));  // 에러 처리

 

4. DELETE 요청 예시 (데이터 삭제하기)

DELETE 요청은 서버에서 데이터를 삭제할 때 사용됩니다. 예를 들어, 게시글을 삭제하는 예시입니다.

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE'  // DELETE 요청
})
  .then(() => console.log('Post deleted'))  // 삭제 완료 메시지 출력
  .catch(error => console.error('Error:', error));  // 에러 처리

---

05

fetch와 REST API를 사용하는 이유

REST API와 fetch를 사용하면 웹 애플리케이션에서 서버와 데이터를 비동기적으로 주고받을 수 있습니다.

페이지를 새로 고침 하지 않고도 필요한 데이터를 로드하거나 전송할 수 있습니다.

이를 통해 더 빠르고 원활한 사용자 경험을 제공할 수 있습니다.

• 비동기 처리
  : fetch는 Promise를 기반으로 하기 때문에, 비동기 작업을 처리할 때 코드가 깔끔하고 직관적으로 작성됩니다.
• 효율적인 데이터 통신
  : REST API는 HTTP를 기반으로 한 표준 방식으로, 모든 클라이언트와 서버에서 사용 가능합니다.
• 유연한 데이터 처리
  : GET, POST, PUT, DELETE 메서드를 사용하여 데이터의 조회, 추가, 수정, 삭제를 효율적으로 처리할 수 있습니다

---

06

마무리

fetch와 REST API를 사용하면 웹 애플리케이션에서 서버와의 통신을 더 직관적이고 효율적으로 처리할 수 있습니다.

Promise와 비동기 처리 덕분에 페이지 새로 고침 없이 데이터를 처리하고,

더 빠르고 원활한 사용자 경험을 제공할 수 있습니다.

 

REST API는 다양한 웹 애플리케이션에서 데이터를 표준화된 방식으로 처리하기 위해 널리 사용되고 있습니다.