1. Frontend에 맞게 백엔드를 고치자
1.1 Product 수정
- Frontend에서 명시된 Data를 보고 Product Model을 추가/수정 한다
- Image를 넣기 위해 media 구현
- 경로 지정하고, 폴더를 생성하여 url을 구현한다
- img class와 요소 추가
- 1:N이므로 image는 product를 상속받는다
- 이미지와 사용자에 대한 serializer 추가
- serializer를 재정의를 통해 수정한다. Frontend에서 요청하는 값을 줘야하므로 받아온 response에 새 이름을 추가해 instance (model)값을 통해 값을 설정한다. response['이름'] = 값으로 추가나 수정할 수 있다
- review_set = ReviewSerializers를 통해 상속 받는 review의 내용을 가져온다. serializers없이 field에 review_set만 적게되면 prefetch_related를 실행은 하지만 review의 id만 불러온다
- 잘 나온다
- image도 관리할 수 있게 추가해야한다
- image를 추가해주자
2. Frontend 수정
- 다운 받은 수정 파일을 해당 폴더에 덮어쓰기 한다
- cros문제를 설정을 통해 error 해결 : 출발지가 다른 누군가 자원을 요청했을때 발생하는 오류
- 프론트와 백을 나눌때 생기는 error로 프론트가 믿을만한 서버라고 설정해야한다
- 라이브러리 설치
- MIDDLEWARE는 보안관련 설정이다. 이 설정에 추가해준다
- WHITELIST를 통해 프론트엔드에서 사용하는 주소를 추가한다. 이 두 주소에서만 백엔드에 자원요청을 할 수 있게한다
- 설정 추가
- 실행하면 웹 페이지가 잘 뜬다
- 리엑트는 포트번호가 3000번이기에 3000이 뜬다
3. 상품과 배달
- 상품과 배달은 1:1 관계이다
멋진 엔지니어가 될 때까지