Interaction With Server-GET, POST, PUT, DELETE

1. GET : 존재하는 데이터 요청

  fetch: () => {
    window //node가 아니고 브라우저 fetch이므로 window를 통해 접근해야 함.
    .fetch("URL")
    .then(function(res){
      return res.json(); // JSON형태로 요청
    })
    .then(function(data){
      return data  // 반환
    })
  }

• 단순히 원격 API데이터를 가져옴
• fetch는 기본적으로 GET방식으로 작동하며 옵션 params가 필요없음
• 응답(res) 객체는 json() 메서드를 제공하고, 이 메서드를 호출하면 응답(res) 객체로부터 JSON 형태의 데이터를 자바스크립트 객체로 변환하여 얻을 수 있음.
• 만일 single skeleton의 경우, 다른 메소드에서 활용하고자 할때에는 data 구문과 fetch전달인자 대신 callback인자를 주고 다른 메소드 내부에서 function~retrun data를 통해 자원을 받을 수 있음 (리턴받는 데이터를 callback으로 넣음)

2. POST : 생성

fetch("URL", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test",
    body: "I am testing!",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))

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

3. PUT : 업데이트

fetch("URL", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "Test",
    body: "I am testing!",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))

• API의 데이터의 수정을 위해 PUT 메서드 사용.

4. DELETTE : 삭제

fetch("URL", {
  method: "DELETE",
})
  .then((response) => response.json())
  .then((data) => console.log(data))

• headers, body가 존재하지 않음

5. Payload(?)

body와 같다고 생각하면 편하다.
GET, DELETE와 같이 body가 필요없는 메소드는 메소드 그 자체로 실행이 가능하다. 하지만 PUT, POST 등의 메소드는 무엇을 업로드할지 반드시 명시해야 하는데 우리는 이것을 body를 통해 나타내고 payload(본문, ex. application.json)이라고 이해할 수 있다.
MIME Type이라고 하며 주로 application.json 포맷이 많이 사용된다.