fetch({method:"DELETE,PETCH"})

DELETE,PETCH 메서드를 통해 백엔드에 데이터 전달하기

구현영상

우리 프로젝트에서 백엔드에 전달하고싶은 데이터는 상품 수량 변경, 상품 삭제가 있었다.

REST API 메서드 종류

POST -
데이터를 보내서 유효한값인지 검사를하거나 새로운 데이터를 생성할때 쓰는 메서드.
GET -
데이터를 요청하여 프론트엔드로 데이터를 가져오는 메서드.
DELETE -
데이터를 보내 삭제한다.
PUT -
데이터를 수정하는데 모든데이터를 수정할때 쓰는 메서드.
PATCH -
PUT메서드와는 다르게 내가 수정하고싶은 데이터만 수정할때 쓰는 메서드.

장바구니에서 수량 변경 데이터 통신.

fetch('http://백엔드 주소/cart', {
      method: 'PATCH',
  //http는 stateless성을 띄기 때문에 항상 토큰값을 넣어 백엔드에 요청해야한다.
      headers: { authorization: localStorage.getItem('access_token') },
  // 바디에 수정하고싶은 값을 넣어 보내줘야한다, JSON.stringify는 보내는값을 컴퓨터가 읽을수있는 문자로 바꿔준다고 생각하면됨.
      body: JSON.stringify({
        cart_id: cartListCopy[selectedIdx].cart_id,
        // 수량을 변경하고싶은 물건 id
        quantity: cartListCopy[selectedIdx].quantity,
        // 변경하고자 하는 수량.
      }),
    });

장바구니에서 삭제 데이터 통신

fetch('http://백엔드 주소/cart', {
        method: 'DELETE',
        headers: {
          Authorization: localStorage.getItem('access_token'),
        },
        body: JSON.stringify({
          //삭제하고싶은 데이터의 물건 id
          cart_id: data.cart_id,
        }),

이런식으로 용도에 맞게 메서드를 잘 사용하면 쉽게 백엔드와 통신할수있다!!