[React] fetch로 백엔드와 통신하면서 놓쳤던 부분

 

[React] fetch로 백엔드와 통신하면서 놓쳤던 부분

장바구니를 구현하면서 백엔드와 통신할 일이 많았는데, 이때 다양한 실수를 범했기에 기록한다.
다음 통신때는 절대 이런 실수를 하지 않으리 다짐해본다.

 

우선 내가 장바구니에서 백엔드와 통신해야했던 부분, 중요한 부분을 이야기 해보자면,

• 장바구니는 회원만 이용이 가능하다.
• 백엔드에 POST로 보내줄 body 내용은 JSON 문자열로 변환해야 한다.
• 전체 삭제 및 선택 삭제, 제품 직접 삭제가 가능하고 삭제한 내용은 DB에서 지워져야 한다.
• 구매하기를 누르면 구매한 데이터가 백엔드 측에서 따로 저장되어야 한다.

 

 

장바구니는 회원만 이용이 가능하다.

회원만 가능하다는 뜻은 결국 Token을 갖고 있는 회원만 장바구니에 접근이 가능하다는 뜻이다.
회원만 가능하다면 삭제할 때에도, 구매할 때에도 사용자의 Token을 보내주어야 한다. 왜냐하면 장바구니 내에서 실행되는 모든 행동들은 '회원'만 이용이 가능하기 때문이다.

그렇다면, header 내에 장바구니에서 어떤 행동이 실행되든 Token이 있어야한다는 것이다.
그리고 상품 삭제 완료된 화면을 다시 보여주려고 재렌더링하기 위해 fetch를 한번 더 사용할 때(GET)에도 Token이 필요하다는 의미도 포함된다.
그런데 이 중요한 부분을 백엔드와 통신할때 줄곧 잊어먹었고 원하는대로 실행되지 않아 막혀있었다.

fetch(`${BASE_URL}carts?cartId=${name}`, {
  method: 'DELETE',
  headers: {
    Authorization: userToken,
  },
  body: JSON.stringify({ cartId: name }),
})
  .then(res => res.json())
  .then(data => {
    fetch(`${config.BASE_URL}carts`, {
      headers: {
        Authorization: userToken,
      },
    })
      .then(res => res.json())
      .then(data => setProductData(data.result));
  });

제품이 삭제된 화면을 보여주어야 하기 때문에 setstate를 통해 재렌더링을 하려고 한번 더 fetch를 해줄 때도 Token은 필요하다.

 

 

백엔드에 보내줄 body 내용은 JSON 문자열로 변환해야 한다.

fetch(`${BASE_URL}carts?cartId=${name}`, {
  method: 'DELETE',
  headers: {
    Authorization: userToken,
  },
  body: JSON.stringify({ cartId: name }),
})

JSON은 JavaScript Object Notation의 약자로, 브라우저와 서버사이에서 오고가는 데이터의 형식이다.
그래서 body에 내용을 그대로 넣으면 백엔드측에서 인식하지 못한다.

서버가 알아들을 수 있도록 JSON.stringify 안에 내가 전달해줄 값을 넣어주어야 한다.

 

 

제품 삭제를 하면 삭제한 내용은 DB에서 지워져야 한다.

서버에 사용자가 삭제할 데이터의 cartId값을 보내주기로 약속했다.
서버에서는 클라이언트 측에서 보내주는 id 값을 바탕으로 DELETE 메소드를 통해 DB에서 제거한다.
그러면 클라이언트에서는 해당 제품이 삭제된 화면을 보여줄 수 있어야 한다.

리액트는 state로 화면에 재렌더링이 가능하다. setstate를 통해 삭제된 상태를 재렌더링해서 보여줄 수 있으면 된다.
그렇다면 GET 메소드를 통해 setstate로 삭제된 후의 데이터를 서버에서 다시 갖고와 뿌려주면 삭제된 화면을 사용자에게 보여줄 수 있게 된다.

다시 보여주기 위해 GET 메소드를 통해 새로 업데이트된 데이터를 화면에 뿌려주도록 한다.

fetch(`${BASE_URL}carts?cartId=${name}`, ...중략)
  .then(res => res.json())
  .then(data => {
    fetch(`${config.BASE_URL}carts`)
      .then(res => res.json())
      .then(data => setProductData(data.result));
  });

구매하기 또한 마찬가지이다. 구매를 했을 때 사용자가 직접 선택해 구매한 제품들은 구매하기를 진행했다면 장바구니 내에서 삭제되어야 하고 서버에 해당 데이터의 값들이 전송되어야 한다.
그리고 해당 과정을 통해 화면상에서는 구매가 된 상품들은 사라지고 구매하지 않았던 제품만 남은 장바구니 화면을 보여줄 수 있어야 한다.

 

 

 

마무리

통신하면서 어려운 내용으로 힘들었던게 아니라 생각보다 별거 아닌 부분을 놓쳐서 애를 많이 먹었다.
다음 프로젝트에서는 이런 실수를 하지 않도록 통신에 필요한 내용을 재점검하고 백엔드와 더 원활한 통신을 이어갈 수 있도록 준비해야겠다.
필요한 메소드 뿐만 아니라 주고 받기로 한 데이터들을 항상 확인하는 습관을 가져야겠다.
사이트 내에서 통신하는데 필요한 로직도 신경써야겠다는 생각이 든다. 스스로에게 오답노트가 되었길 바라며 글을 썼다.