TIL 33. Request와 Response

1. REQUEST(4가지)

1) 데이터 조회 (GET 메소드) -> get request : READ
2) 데이터 추가 (POST 메소드) -> post request : CREATE
3) 데이터 수정 (PUT 메소드) -> put request : UPDATE
4) 데이터 삭제 (DELETE 메소드) -> delete request : DELETE

하나의 Request는 Head 와 Body로 구성되어있다. Head는 Request에 대한 부가 정보를 담고 있는 부분으로 메소드가 여기에 속한다. Body는 실제 데이터를 담는 부분이다.

새로운 데이터를 추가하거나 수정하기 위한 POST, PUT request에는 body가 필요하지만 GET이나 DELETE는 body가 필요하지 않다.

(1) GET request (조회)

// 전체 정보 조회
fetch("url")
  .then((response) => response.text())
  .then((result) => {
    console.log(result); // JSON 데이터 출력
});

//ID 3번 조회
fetch("url/3")
  .then((response) => response.text())
  .then((result) => {
    console.log(result); // JSON 데이터 출력
  });

(2) POST request(추가)

const newMember = {
  name: "Jerry",
  email: "jerry@codeitmail.kr",
  department: "engineering",
};

fetch("url", {
  /// => 옵션객체 : request의 설정을 적는 개체로 옵션객체가 없으면 default 메소드는 GET이다.
  method: "POST",
  body: JSON.stringify(newMember), // ==> 자바스크립트 데이터를 외부로 보내기 위해선 JSON형태로 변환해주어여한다. 
})
  .then((response) => response.text())
  .then((result) => {
    console.log(result);
  });

//get request로 다시 조회해보면 데이터가 추가된 것을 알 수 있다.

(3) PUT request(수정)

const member = {
  name: "Alice",
  email: "alice@codeitmail.kr",
  department: "marketing",
};

fetch("url/2", { /// => 수정이 필요한 id 값 추가
  method: "PUT",
  body: JSON.stringify(member),
})
  .then((response) => response.text())
  .then((result) => {
    console.log(result);
  });

PUT과 PATCH의 다른점

PATCH는 PUT과 같이 데이터를 수정하는 메소드이지만 PUT은 기존 데이터를 아예 새로운 데이터로 덮어씀으로써 수정하려고 할 때 쓰는 메소드이고, PATCH는 새 데이터로 기존 데이터의 일부를 수정하려고 할 때 쓰는 메소드이다. PUT 메소드의 경우에는 원하는 새 데이터의 온전한 모습 전체를 바디에 담아서 보내줘야 한다. 그러나 PATCH의 경우에는 보통, 리퀘스트의 바디에 있는 내용을 기존 데이터의 각 속성과 대조 및 병합(merge-patch)하면서 데이터를 수정하기 때문에, 바디에 수정할 프로퍼티의 데이터만 넣어줘도 된다.

(4) DELETE request(삭제)

fetch("url/2", { /// => 삭제할 데이터의 id 값 추가
  method: "DELETE", 
  // body가 필요하지 않다.
})
  .then((response) => response.text())
  .then((result) => {
    console.log(result);
  });

(5) HEAD request

HEAD 메소드는 GET 메소드와 동일하다. 대신 GET 리퀘스트를 보냈을 때 받았을 리스폰스에서 바디 부분은 제외하고, 딱 헤드 부분만 받는다는 점이 다르다. 이 메소드는 데이터 용량이 클 때 해당 데이터를 모두 불러오지 않고 데이터의 정보만 확인하고 싶을 때 주로 사용한다.

2. Response

text() vs json()

fetch("https://jsonplaceholder.typicode.com/users")
  .then((response) => response.text())
  .then((result) => {
    const users = JSON.parse(result);
  });

// 여기서 response.text()를 json.()로 바꾸면 코드를 더 간결하게 표현할 수 있다.
fetch("https://jsonplaceholder.typicode.com/users")
  .then((response) => response.json())
  .then((result) => {
    const users = result;
  });

response 객체의 text 메소드 대신 json이라는 메소드를 호출하면, 리스폰스의 내용이 JSON 데이터에 해당하는 경우, 바로 Deserialization까지 수행한다. 이렇게 json 메소드를 사용하면, 두 번째 콜백의 result 파라미터로는 Deserialization 결과로 생성된 자바스크립트 객체가 넘어가게 되는데. 그래서 두 번째 콜백 안에서 JSON.parse를 해주지 않아도 result를 바로 자바스크립트 객체로서 사용할 수 있다. 단, 리스폰스의 내용이 JSON 데이터에 해당하지 않을 경우에는 에러가 발생할 수 있다.

Response State Code

Response도 Request 처럼 Head와 body로 구성되어 있다. response의 body에는 우리가 확인하고 싶은 내용, 데이터가 들어있다 (주로 JSON 데이터). Head에는 상태코드라는 것이 포함된다. 상태코드는 request를 받은 서버가 그 결과를 나타내기 위해서 response에 상태코드로 숫자를 나타낸다. 보통은 request가 정상처리 되었음을 나타내는 200을 주로 보지만 우리가 자주 보는 404를 포함해 100~500까지 다양한 상태를 나타내는 상태코드가 있다.

상태 코드는 Web Api 설계시 결정되어야 하는 요소이다. 리퀘스트에 관한 URL과 메소드 종류 뿐 아니라 response의 상태코드 또한 각각의 상황에 알맞은 것들이 설정되도록 설계해야 한다. 모든 상황을 세분화해 매번 거기에 맞는 상태 코드를 넣는 건 불필요한 작업일 수 있다. 따라서 보통은 꼭 사용할 상태 코드만 추린 후 특정 유형의 상황들은 모두 하나의 상태코드로 표현하는 방법이 주로 사용된다. 그렇지만 가장 이상적인 것은 존재하는 상태코드를 최대한 많이 활용하는 것이다.

3. 헤더의 content-type

content-type헤더는 현재 리퀘스트 또는 리스폰스의 바디에 들어있는 데이터가 어떤 타입인지를 나타낸다. JSON,텍스트, 이미지 등 다양한 데이터의 타입 정보가 content-type 헤더에 담겨있다. Content-Type 헤더의 값은 '주 타입(main type)/서브 타입(sub type)'의 형식으로 나타난다. 예를 들어 주타입이 text인 경우 css코드는 text/css, JSON의 경우에는 application/json으로 나타나는 식이다. application/octet-stream 처럼 표현되는 것은 텍스트 파일 이외의 파일들인 바이너리 파일 중에서 특정 확장자 포맷에 해당하지 않는 데이터들을 나타낼 때 사용된다. 보통 이 값이 쓰여있으면 브라우저는 사용자에게 다운로드 받으시겠습니까와 같은 얼럿창을 띄운다. content-type의 헤더가 필요한 이유는 바디의 데이터를 직접 확인해서 그 타입을 추론하지 않아도 되기 때문이다.이를 써주지 않으면 서버에서 바디의 데이터가 어떤 타입인지를 확인하는 절차가 추가적으로 필요해 불필요한 비용이 발생한다. 따라서 리퀘스트, 리스폰스 모두 데이터가 존재하는 경우엔 이 헤더의 값을 설정해주어야 한다.

const newMember = {
  name: "Jerry",
  email: "jerry@codeit.kr",
  department: "engineering",
};

fetch("https://learn.codeit.kr/api/members", {
  method: "POST",
  headers: {
    // 추가된 부분
    "Content-Type": "application/json",
  },
  body: JSON.stringify(newMember),
})
  .then((response) => response.text())
  .then((result) => {
    console.log(result);
  });