Request의 Head와 Body & fetch

Request의 메소드(Method)값의 설정

하나의 Request에는 Head, Body로 이루어진 부분이 존재한다.

Head
Request에 대한 여러가지 부가적인 정보들이 들어있다.
그리고 여기에는 method값이 존재한다.

Body
Request에 대한 실제 데이터를 담고있는 부분이다.
Request를 보낼 때 어떤 데이터를 함께 보내야 된다면, body에 담아서 보내야 된다.

POST & PUT

예를 들어서 data를 추가할 때의 POST request, 기존 data를 새로운 data로 수정할 때의 PUT request는 보통 body에 data를 담아서 보내줘야 된다.

GET & DELETE

그에 비해 단순히 데이터를 조회하는 GET request, 기존의 data를 삭제할 때 사용하는 DELETE request는 body에 아무런 정보를 담지 않아도 된다.
body가 필요 없다!

GET
GET 메서드는 특정 리소스의 표시를 요청한다.
GET을 사용하는 요청은 오직 데이터를 받기만한다.

POST
POST 메서드는 특정 리소스에 entity를 제출할 때 사용한다.

PUT
PUT 메서드는 목적 resource 모든 현재 표시를 요청 payload로 바꾼다.

DELETE
DELETE 메서드는 특정 resource를 삭제한다.

Method 정리

종류	메소드	요청 방법
데이터 조회	GET	Get Request
데이터 추가	POST	POST Request
데이터 수정	PUT	PUT Request
데이터 삭제	DELETE	DELETE Request

fetch함수를 사용해서 requset 보내기

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => { console.log(result)} );

fetch를 통해 request를 날리고, response를 살펴볼 것이다.
그러면 아래와 같이 response의 내용을 확인할 수 있다.

Network 탭 에서 web browser가 보낸 request & 받은 response 살펴보기

fetch 함수를 통해 request를 보내고, 받은 response를 살펴보기 위해 네트워크 탭을 열어보았는데 구글을 열면서 이미 많은 요청과 응답이 오고 간 것을 확인할 수 있었다.
그리고, 내가 GET으로 보낸 users의 요청도 확인할 수 있었다.

---

위에 캡쳐된 사진을 보면, Response Headers, Request Headers를 확인할 수 있다.

여기서 Request Headers는 바로 Request의 head부분이 된다.
Headers는 header들이라는 뜻이된다!

Header
head안에 존재하는 하나하나의 키: 쌍을 의미한다.
각각의 header들은 해당 request에 관한 부가적인 정보들을 담고 있다.
각각의 부가적인 정보들은 request가 알았으면 하는 정보들이라고 할 수 있다.
header들을 살펴보면,

• method는 현재의 request가 데이터를 조회하는 GET요청을 보낸 것을 확인할 수 있다.
  method값도 request의 head에 존재한다!!
• path를 살펴보면 url을 어떻게 날렸는지 확인할 수 있다.
• user-agent: 를 살펴보면 요청을 보낸 브라우저와 요청을 보낸 운영체제의 정보를 확인할 수 있다.

(user-agent에 저렇게 자세하게 운영체제 정보까지 나온다니 놀랍다..)

POST Request

POST request는 GET request와는 달리 fetch 함수의 두번째 파라미터에 option 객체를 넣어줘야 된다.
option 객체에는 method와 body의 값을 지정해줘야 된다.

  let newMember = {
    name: 'JY',
    email: 'JY@google.com',
    department: 'engineering',
  };

  fetch('https://.../api/members', {
    method: 'POST',
    body: JSON.stringify(newMember),
  })
    .then((response) => response.json())
    .then((result) => console.log(result));

POST Request를 통해 Network 탭 살펴보기

새로운 직원의 정보를 담은 객체를 POST 요청을 통해 보내보았다.

그리고 Network의 Headers탭에서 Request Headers부분과 POST 요청을 보냈기 때문에 확인할 수 있는 Request Payload 부분도 살펴볼 수 있었다.

  let newMember = {
    name: 'Hoho',
    email: 'Hoho@google.com',
    department: 'engineering',
  };

  fetch('https://.../api/members', {
    method: 'POST',
    body: JSON.stringify(newMember),
  })
    .then((response) => response.json())
    .then((result) => console.log(result));

Request Headers

Request Payload

GET request에서는 볼 수 없었던, body의 내용을 POST request에서 살펴볼 수 있다!

Response

Response 탭을 클릭하면, 내가 POST로 요청한 결과가 JSON data로 잘 온것을 확인할 수 있다. (신기! 😲)

PUT request로 data 변경하기

기존 데이터는 아래와 같다.
PUT request로 해보려고 하는 것은 바로 department: sales에서
marketing으로 변경해볼 것이다.

그러면, fetch를 통해 option 객체를 보낼 때, method는 PUT, body에는 새로운 기존의 객체에서 department를 수정한 객체를 보낼 것이다.

let updateMember = {
  name: 'Kokoa',
  email: 'kokoa@gmail.com',
  department: 'marketing',
};

fetch('https://.../api/members/6', {
  method: 'PUT',
  body: JSON.stringify(updateMember),
});

DELETE request 보내기

DELETE request는 options객체의 method 속성값으로 DELETE를 적어주면 된다.
그냥 데이터를 삭제하기 때문에 body property는 적을 필요가 없다.

GET request, DELETE request는 body에 내용을 담을 필요가 없다!

fetch('https://.../api/members/3', {
  method: 'DELETE',
})
  .then((response) => response.text())
  .then((result) => console.log(result));