통신

  useEffect(() => {
    fetch('http://10.58.7.204:8000/users/likes', {
      method: 'GET',
      headers: { Authorization: localStorage.getItem('jwt') },
    })
      .then(response => response.json())
      .then(data => setLikes(data.product_ids));
  }, []);

백엔드에서 데이터를 받아올때는 따로 전해줘야할 정보가 없기 때문에 body부분이 필요 없다.

  const addCart = product => {
    fetch('http://10.58.7.204:8000/carts', {
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('jwt'),
      },
      body: JSON.stringify({
        product_id: product,
        quantity: 1,
      }),
    }).then(response => response.json());
  };

장바구니에 담길 상품의 정보를 전달 해야하기때문에 body부분에 백엔드에서 요청한 정보를 담아준다

let login = () => {
    fetch('http://10.58.6.107:8000/users/login', {
      method: 'POST',
      body: JSON.stringify({
        email: id, 
        password: pw, 
        //아이디혹은 이메일,페스워드 로그인시 필요한 정보 보내고
      }),
    })
      .then(response => response.json())
      .then(response => {
        if (response.USER_NAME) {
          localStorage.setItem('jwt', response.TOKEN);
          // 토큰 로컬스터리지에 삽입
          navigate('/main-eokhwa');
          ///이후 페이지 이동
          
        }
      });
  };

최초 로그인 후에는 아직 토큰 값이 없기 때문에 받은 토큰 값을 저장할 이름을 setItem 함수에 담아서 저장한다.

아직 외워서 쓰기에는 헷갈리기때문에 다음 통신때 참고해야겠다