지난 포스트까지 구현했던 서평 작성 기능들은 장고 기본 기능을 이용해서 구현했다.
그러나 우리 프로젝트가 프론트와 백엔드가 나눠져있기 때문에
프론트와 백엔드를 연결하는 방법을 여러 방면으로 모색했다.
그러면서 최종적으로 장고 레스트 프레임워크 (DRF: Django REST Framework) 라이브러리를 사용하여
프론트인 리액트와 백엔드인 장고를 연결하고자 하였다.
그러던 중 오늘 드디어!! 프론트인 리액트 페이지에서 작성한 서평의 내용을
백엔드인 장고 모델에 저장하고 불러오는 것을 완성해서 그 과정을 간단하게 포스팅해보려고 한다.
(1) 장고 : review/urls.py
urls.py 파일에서는 장고 서버의 url 들을 views.py 의 함수들과 연결하는 내용을 담고 있다.
path('', views.ReviewView.as_view()), # 서평 목록
path('write/', views.ReviewView.as_view()), # 서평 작성
path('<int:reviewId>/', views.ReviewView.as_view()), # 서평 세부내용
다음 내용을 추가해서 views.py 의 ReviewView 클래스를 호출한다.
(2) 장고 : review/views.py
views.py 의 ReviewView 클래스 내용이다.
해당 구조는 장고 스터디 카테고리에 작성했던 글에 자세히 설명해두었다.
class ReviewView(APIView):
...
def post(self, request):
data = request.data
r : Review = Review (
bookId = data.get('bid'),
userId = User.objects.get(id=data.get('uid')),
reviewTitle = data.get('rtitle'),
reviewDate = date.today(),
reviewRate = 0, # 추후에 평점 받아와서 저장
reviewTxt = data.get('text')
)
r.save()
return Response({'message':'서평 등록이 완료되었습니다.'}, status=status.HTTP_200_OK)
def get(self, request, **kwargs):
if kwargs.get('reviewId') is None: # 특정리뷰 지정되지 않았을 때 : 전체 목록 반환
review_qr_serializer = ReviewSerializer(Review.objects.all(), many=True)
return Response(review_qr_serializer.data, status=status.HTTP_200_OK)
else: # 특정리뷰 지정되었을 때 : 해당 리뷰 반환
reviewId = kwargs.get('reviewId')
review_serializer = ReviewSerializer(Review.objects.get(reviewId=reviewId))
return Response(review_serializer.data, status=status.HTTP_200_OK)
...
post 함수에서는 review 앱의 모델인 Review 에 들어갈 데이터를 지정해서 모델에 저장하고 Response() 로 결과를 반환한다.
get 함수에서는 미리 작성했던 Serializer 를 통해 모델의 데이터를 불러오고 전체 목록과 상세 내용을 보여준다.
서평을 작성하는 웹페이지의 모습은 다음과 같다.
책 이름과 저자는 외부 API를 사용해서 얻어온 데이터로 미리 채워놓고 서평 제목과 내용을 작성한다.
해당하는 책의 ISBN을 bid 로, 작성하는 사용자의 id를 uid로, 서평의 제목을 rtitle로, 서평 내용을 text 로 받아서 장고로 넘겨주게 된다.
(4) 결과화면
위의 과정을 거치고 나면 서평을 작성하고 등록 버튼을 눌렀을 때,
다음 메세지가 띄워지고 장고 모델에 정상적으로 데이터가 저장된다.
모델에 저장된 데이터는 장고 서버에서 확인했다.
그리고 서평의 전체 목록 화면과 상세페이지는 다음처럼 나타난다.
(사진첨부예정)
기능을 구현하는 데는 성공했지만 한 가지 아쉬운 점은 Serializer를 제대로 활용하지 못한 것이다.
이전에 포스팅하면서 공부했던 내용을 활용해서 REST API를 좀 더 적합하게 활용하는 방법도 계속 고민해보겠다.
'프로젝트 > [Web] 서평 작성 사이트' 카테고리의 다른 글
서평 작성 기능을 마치며 (0) | 2022.02.17 |
---|---|
서평 작성 (5) - 서평 수정하고 삭제하기 (PUT, DELETE) (0) | 2022.02.13 |
프론트와 연결하기 (2) - Axios 활용 (0) | 2022.01.25 |
프론트와 연결하기 (1) - 장고/리액트 연동 (0) | 2022.01.18 |
서평 작성 (3) - 서평 상세보기 (0) | 2022.01.14 |