HTTP 메소드를 활용해서 request 보내기

0. 오늘의 배울 것.

서버에게 리퀘스트를 보낼 때, '데이터를 보고 싶어요' 라든가, '이 데이터를 저장해주세요', '이 데이터를 수정해주세요' 등의 요청을 할 수 있다. 즉, 서버에게 request를 보낼 때 내가 원하는 동작을 하도록 method를 지정해서 같이 보내면 되는데, 어떻게 하는지 알아보자.

참고로 fetch 함수를 쓰면 json데이터를 js 객체로 변환하는 과정이 따로 필요하지만,

axios 객체를 쓰면 그런 과정이 필요하지 않다.

실무에선 보통 axios를 많이 쓴다고는 하지만, 간단한 웹 통신에서는 fetch도 쓰이긴 하니 fetch 기준으로 알아보자.

1. JSON 데이터를 객체로 변환하기.

(axios 에서는 JSON 데이터를 따로 변환해줄 필요가 없다. fetch 함수 한정.)

먼저 json 데이터 자체는 string 타입이다.

fetch('url')
    .then((response) => response.text())
    .then((result) => {console.log(typeof result);}); // string  출력. 

그래서 이 JSON 데이터를 js 객체로 바꿔줘야한다!!

fetch('url')
    .then((response) => response.text())
    .then((result) => {
          const users = JSON.parse(result);
        console.log(users.length); // 받아온 데이터를 객체로 전환해 length 출력.
    })

2. 메소드

우리가 리퀘스트를 보낼 때, 서버에게 ~~ 한 동작을 하게 해달라고 요청하기 위해 같이 첨부하는 값이 바로 메소드이다.
주로 사용하는 메소드에는

1. 데이터 조회 ... GET
2. 데이터 추가 ... POST
3. 데이터 수정 ... PUT
4. 데이터 삭제 ... DELETE

가 대표적으로 많이 쓰이고, 그 외에도 PATCH나 HEAD도 종종 쓰인다...

이런 메소드는 request의 head 내부에 들어가있고, 데이터 값은 request의 body 안에 들어가있다.

request를 보낼 때 서버로부터 데이터를 요청하는 식인 GET, DELETE 메소드는 body가 필요 없지만, POST, PUT 메소드는 데이터를 담을 BODY가 필요하므로 이런 모습이 된다.

웹의 network 탭에서 request를 확인해보면, 실제로 header의 method 속성에 우리가 지정한 메소드 값이 들어있다. (만약 우리가 값을 지정하지 않으면 디폴트로 GET 메소드로 지정된다.)

GET request

먼저 GET 리퀘스트는 그냥 디폴트 메소드라서, 우리가 이때껏 사용한 fetch 함수와 같은 형식이다.

POST request

먼저 우리가 추가하려는 데이터를 작성하고, 해당 데이터를 body 값에 담은 다음, method 값으로 post를 지정한다.
이 때 body에 바로 데이터 객체를 넘겨주면 안되고, JSON 타입으로 변환하는 과정이 필요하다.

참고로

1. string 타입인 json 데이터를 js 객체로 바꾸는 것을 직렬화 (Serialization) - 리퀘스트를 보낼 때.
2. js 객체를 string 타입의 json 데이터를 바꾸는 것을 역직렬화(Deserialization) - 리스폰스를 받을 때.

라고도 한다.

const newUser = {
    name: "Hellen",
      email: "1234@567.com",
      age: 25,
};

fetch('url/total', {
    method: 'POST',
      body: JSON.stringfy(newUser),
}).then((response)=>response.text())
  .then((result)=>{console.log(result);});

PUT request

만약 기존의 데이터를 수정하고 싶다면 put 메소드를 쓰자. 그런데 put 메소드는 아예 data를 덮어씌우는 형식이기때문에, 만약 기존 데이터에는 id 값이 있었는데 내가 새로운 데이터 값을 줄 때 name 속성을 주지 않았다면 그대로 name 속성이 사라진 채 저장돼버린다.

따라서!! put 메소드를 쓸 때엔 변함 없는 데이터들도 모두 잘 써줘야 한다.

또한, 새로운 user을 추가할 때 url/total에 접근했던 post와 달리, put 메소드를 사용할 땐 수정할 데이터의 개인페이지에서 진행해야 한다.
여기서는 각 user마다 id값이 있고, url/id로 접근할 수 있다고 해보자.

const user = {
    name: "Hellen",
      email: "1234@tistory.com",
      age: 25,
};

fetch('url/{id}', {
    method: 'PUT',
      body: JSON.stringfy(user),
}).then((response)=>response.text())
  .then((result)=>{console.log(result);});

각 데이터에는 id 값이 있는데, 여기서 나는 user 정보에 id 값을 딱히 적지 않았다.

id는 서버가 자동으로 할당하는 값이기 때문이다. (이것도 백엔드에서 개발자가 설정하는 부분.)

마찬가지로 Post 메소드에서도 id를 따로 적지 않는다.

DELETE request

만약 해당 user을 지우고 싶다면, user의 개인 페이지로 접근해 DELETE 명령어를 쓰면 된다.

전체 유저들을 지우고 싶다면 user/total 전체 페이지에서 DELETE 명령어를 쓰면 될 것이다.

fetch('url/{id}', {
    method: 'DELETE',
}).then((response)=>response.text())
  .then((result)=>{console.log(result);});

PATCH request

patch 메소드도 put과 마찬가지로 기존의 데이터를 수정하는 역할이다.

그런데, patch 메소드는 put과 달리 덮어쓰는 게 아니다!! 자원의 부분 교체를 하기 때문에, 만약 내가 새 데이터로 주는 값에 속성 몇 개를 빼먹고 안 적더라도 기존 자원의 속성은 그대로 남아있다.

즉,

PUT: 자원의 전체 교체, 자원 교체 시 모든 속성이 필요함.
PATCH: 자원의 부분 교체, 자원 교체 시 일부 속성이 필요함.

따라서, 일부 수정 시 PATCH, 전체 수정 시 PUT 을 쓰자.

const user = {
      email: "1234@tistory.com",
};

fetch('url/{id}', {
    method: 'PATCH',
      body: JSON.stringfy(user),
}).then((response)=>response.text())
  .then((result)=>{console.log(result);});

HEAD request

head 메소드는 get과 비슷하지만, get처럼 서버의 응답 본문은 리턴되지 않고 head 값만 받아온다는 특징이 있다.

즉,

fetch('url') // response에 head, body 둘 다 받아옴.

fetch('url', {
    method: 'HEAD',
}) // response에 head만 받아옴.

head만 받아올 경우 get보다 속도가 빠르기 때문에, 서버의 상태를 일단 빠르게 조회할 때 해당 메소드를 쓰는 것이 좋다.

특히, response의 content-length 를 체크하여 resourse가 얼마나 될지 조회할 때엔 HEAD 메소드가 유용하다.

3. 오늘의 결론.

메소드를 잘 파악하고 활용하자.

멋진 프론트 개발자가 되기 위해, json 데이터와 익숙해지자...