fetch 함수

去去去中知 行行行裏覺(거거거중지 행행행리각).

"가고 가고 가는 중에 알게 되고, 행하고 행하고 행하는 가운데 깨닫게 된다"
-노자 왈 -

---

💡 목차

1) AJAX란?
2) fetch 함수
3) fetch 함수로 HTTP 요청하기

🚀 AJAX (Asynchronous Javascript And XML)란?

• Asynchronous Javascript And Xml(비동기식 자바스크립트와 XML)의 약자.
• JavaScript의 라이브러리 이다. (JavaScript를 사용한 비동기 통신)
• 클라이언트와 서버간에 XML 데이터를 주고받는 기술
  ❗ 즉, 자바스크립트를 통해서 서버에 데이터를 요청하는 것을 의미한다. AJAX라는 네트워크 기술을 이용하여 클라이언트에서 서버로 데이터를 요청하고 그에 대한 결과를 돌려받을 수 있다.

🧱 AJAX를 사용하는 이유

단순히 WEB화면에서 무언가 부르거나 데이터를 조회하고 싶을 경우, 페이지 전체를 새로고침하지 않기 위해 사용한다고 볼 수 있다.
(전체 페이지를 리로드하지 않고 필요한 데이터만 로드할 수 있다.)

기본적으로 HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고 서버쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하며 페이지 전체를 갱신하게 된다.
(이렇게 할 경우, 엄청난 자원낭비와 시간낭비를 초래한다)

AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 request한다. 이 경우, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.
❗ JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다.

---

🚀 fetch함수

• HTTP 요청 전송 기능을 제공하는 Web API이다. (자바스크립트 내장 라이브러리)
• Server와의 비동기 요청 방식을 기능한다.
• 백앤드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답 받는다. 이 때 자바스크립트 Web API fetch() 함수를 쓰거나 axios 라이브러리를 사용할 수 있다.

❗ Ajax를 구현할 수 있는 여러가지 기술 중, 최신 기술이 fetch함수 이다.

🐣 arrow 함수형

fetch('api 주소')
  .then(res => res.json())
  .then(res => {
    // data를 응답 받은 후의 로직
  });



🐣 함수 선언형

fetch('api 주소')
  .then(function(res) {
    return res.json();
  })
  .then(function(res) {
    // data를 응답 받은 후의 로직
  });

---

🚀 fetch 함수로 HTTP 요청하기

• fetch 함수에는 HTTP 요청을 전송할 URL, HTTP 요청 메서드(GET, POST, PUT, DELETE), HTTP 요청 헤더, 페이로드 등을 설정한 객체를 전달한다.
• fetch() 함수에서 default method는 GET이다.

🍎 method가 GET인 경우
GET : 존재하는 자원 요청

• 단순히 원격 API에 있는 데이터를 가져올 때 쓰임
• fetch함수는 디폴트로 GET 방식으로 작동하고, 옵션 인자가 필요 없음.

fetch('https://api.google.com/user/3')
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        console.log(`${res.user.name}` 님 환영합니다);
    }
  });

설명: 유저 정보를 가져온다.
base url: https://api.google.com
endpoint: /user/3
method: get
응답형태:
    {
        "success": boolean,
        "user": {
            "name": string,
            "batch": number
        }
    }

응답(response) 객체는 json() 메서드를 제공하고, 이 메서드를 호출하면 응답(response) 객체로부터 JSON 형태의 데이터를 자바스크립트 객체로 변환하여 얻을 수 있음.

🍎 method가 POST인 경우
POST : 새로운 자원 생성 요청

• form 등을 사용해서 데이터를 만들어 낼 때, 보내는 데이터의 양이 많거나, 비밀번호 등 개인정보를 보낼 때 POST 메서드 사용
• 새로운 포스트 생성 위해서는 method 옵션을 POST로 지정해주고, headers 옵션으로 JSON 포맷 사용한다고 알려줘야 함. body 옵션에는 요청 전문을 JSON 포맷으로 넣어줌.
• headers에서 json 형식임을 알려주지 않으면 서버에서 못 읽는 문제가 생길 수 있음.

fetch("https://jsonplaceholder.typicode.com/user", {
    method: 'post',
    headers: {
 	   "Content-Type": "application/json",
    },
    body: JSON.stringify({
        title: "test",
        body: "this is testing",
      	userId: 1,
    })
  })
  .then(res => res.json())
  .then(res => {
    if (res.success) {
        alert("저장 완료");
    }
  })

설명: 유저를 저장한다.
base url: https://jsonplaceholder.typicode.com
endpoint: /user
method: post
요청 body:
    {
        "title": string,
        "body": string,
        "userId": Number,
    }
응답 body:
    {
        "success": boolean
    }

body는 JSON형태로 보내기 위해 JSON.stringfy() 함수에 객체를 인자로 전달하여 JSON형태로 변환한다.

🍎 method가 PUT인 경우
PUT : 존재하는 자원 변경 요청

• API에서 관리하는 데이터의 수정을 위해 PUT 메서드 사용함.
• method 옵션만 PUT으로 설정한다는 점 빼놓고는 POST 방식과 비슷하다.

fetch("https://jsonplaceholder.typicode.com/user", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test",
    body: "this is testing",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))

🍎 method가 DELETE인 경우
DELETE : 존재하는 자원 삭제 요청

• 보낼 데이터가 없기 때문에 headers, body 옵션이 필요없음

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "DELETE",
})
  .then((response) => response.json())
  .then((data) => console.log(data))