장고(DRF) + 리액트 REACT.JS 포트폴리오 2

이전에 이어지는 내용들입니다.
https://devttaemppang.tistory.com/2

장고(DRF) + 리액트 REACT.JS 포트폴리오 1

 
 
 
장고 API 데이터 요청을 리액트 비동기로  받아오려면 async-await를 사용해야하고 try-catch로 묶어줘야 에러핸들링이 되면서 콘솔로 에러원인을 파악할 수 있다.
 

try-catch로 묶어서 에러핸들링을 하였다. useState로 Basket이라는 빈 배열을 새로 만들어 백엔드 데이터들을 ...basket으로 빈배열을 복사해 담아주었다. 장바구니에 담아줄려고 백엔드 api를 axios를 사용해 GET, POST요청을 하였다. 또 로그인 비로그인에 따라 카트 상태를 다르게 보여줄려고 Django rest framework에서 회원가입후 발급된 토큰을 사용하여 토큰 헤더인증을 통해 요청권한을 주었다.

 

헤더에 토큰인증을 안해주면 허용을 안해주고 데이터를 보여주지 않는다.

 

파이썬 Django rest framework 백엔드에서 TokenAuthentication인증 허용권한에 IsAuthenticated 코드를 넣어주었다.상태를 보니 헤더에 토큰인증을 안해줘서 GET 403오류가 떳다.

 

로그인 후 백엔드 카트 데이터베이스에 저장된 데이터를 axios.get 헤더 토큰인증을 거치니 화면에 잘 보여진다.

 
 

회원인증을 거치고 상세페이지로 들어가서 카트 담기버튼을 눌렀는데 400 Bad request... 이래서 Try-catch문을 보면 에러핸들링 되서 콘솔로 에러를 잘보여준다. 그리고 url경로를 보면 슬래시뒤에 숫자가 붙여져 있다.

 

상세페이지를 만들려고 변수에 id에 useParams() 파라미터를 담아서 `백엔드주소/${id}`에 결합하였다.

 
 

상세페이지 동영상

 

상품 데이터를 카트에 담을려고 데이터 요청은 잘 보내줬는데 응답에서 "This field is required"에러가 떳다. stack overflow에 같은 사례를 찾아보니 form으로 받아온 데이터만 post할수 있는 것을 알 수 있었다. 그래서 임시로 리액트에서 localstorage 카트담기 기능을 구현하였다.