Chapter6 실전 프로젝트! Django REST Framework + React.js 게시판 만들기 -2

이 게시글은 멋쟁이 사자처럼 동아리의 장고 스터디를 위해 만들어졌습니다. 

 

- 책 백엔드를 위한 DJANGO REST FRAMEWORK with 파이썬 - 권태형 저자 의 책을 참고하여 실습을 진행했습니다.

백엔드를 위한 Django REST Framework with 파이썬

 

 

6.2.7 (TIP) 리액트와 연동하기

CORS는 어떤 개념일까? -> 쉽게 단어 뜻을 풀어보면, 

다른 출처끼리 자원을 공유하는 것

 

같은 출처라는 것은 주소값이 포트 번호까지 동일한 경우를 뜻합니다. 

즉, 리액트 프로젝트와 Django 프로젝트를 연동하려는 경우 

리액트는 http://127.0.0.1:3000, Django 프로젝트는 http://127.0.0.1:8000이므로 

 

-> 포트번호가 달라 다른 출처가 됩니다. 

리액트에서 다른 출처인 Django 로부터 데이터(리소스)를 가져오려는데

이것이 SOP(Same Origin Policy)_경찰?에 의해

차단 되는 것입니다. 

 

이에 대한 예외 조항이 CORS 입니다. 

 

CORS에 대한 자세한 내용은 아래 링크 참고

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

 

 

---

즉, 서버에서 (백엔드에서 ) CORS 정책을 준수하도록 설정해두면

SOP의 예외 조항인 CORS 정책을 준수하여

다른 출처끼리도 자원 공유가 가능하게 되는 것입니다.

 

(프론트엔드에서 발생하는 에러지만 백엔드에서 정책을 지켜야 한다는 것이 조금 아이러니한 부분임다)

 

자 그럼 이제, 이 문제를 해결해보겠습니다.

1. 패키지 설치 

2. 앱에 등록

 

3. 미들웨어에 등록

이제 백엔드가 할 일은 없습니다. 

 

프론트엔드에서 어떻게 우리의 백엔드 API를 가져다 쓰는지 확인해보겠습니다. 

리액트의 핵심적인 부분의 코드만 살펴보고 적용된 결과 화면을 함께 살펴보며 마무리 하겠습니다. 

 

 

6.3 앱 : 게시글

게시글 앱을 만들고 게시글 관련 기능을 개발하겠습니다.

 

6.3.1 게시글 기능 정리

사실 앞서 진행한 회원 관련 기능이 프로젝트에서 제일 어렵고 낮선 부분입니다. 

 

6.3.2 게시글 모델 만들기 & 마이그레이션

posts 라는 이름의 앱을 만들겠습니다.

그리고 모델을 작성합니다. 

저자, 저자 프로필, 제목, 카테고리, 본문, 이미지, 좋아요 누른 사람들, 글이 올라간 시간

 

마이그레이션에 성공함

 

6.3.3 시리얼라이저

모델의 다음 단계를 시리얼라이저입니다.

같은 모델에 대해 두 개의 시리얼라이저를 만들 것

일단 작성하고, 왜 그렇게 했는지 이해해보겠습니다.

-> 각자 용도가 다르기 때문 

-> 게시글을 작성할 때, 유저가 입력해주는 정보는 제목, 카테고리, 본문, 이미지 정도 뿐,,, 나머지 데이터는 우리의 코드가 알아서  채워주거나, 처음에는 빈칸으로 두게 되는 경우도 있습니다. 

-> 이런 경우 해당 게시글에 대한 모든 정보를 역으로 JSON으로 변환하여 전달해야 하는 시리얼라이저와는 분명 다를 필요가 있습니다.

-> 따라서 일반 PostSerializer와 PostCreateSerializer를 나눠 작성했습니다. 

 

 

6.3.4 뷰(CRUD) + 권한

다음은 뷰 입니다. 게시글은 모든 CRUD기능이 다 있기 때문에 아주 편한 마음으로 ViewSet을 사용할 수 있습니다. 

대신 앞서 선언한대로 각기 다른 시리얼라이저를 적재 적소에 활용할 수 있도록 하는 코드를 작성해 주면 되겠습니다. 

 

+ 또한 게시글을 생성할 때 유저가 입력해주지 않는 저자 정보를 같이 넣을 수 있도록 합니다. 

+ 각 상황에 따라 필요한 권한이 다르기 때문에 우리는 앞서 작성했던 것처럼 permission.py 파일을 posts앱 내에 작성하여 사용

이렇게 정의된 CustomReadOnly 권한 클래스는 Django REST Framework의 인증과 권한 시스템과 함께 사용됩니다. 뷰의 permission_classes 속성에 CustomReadOnly를 지정함으로써 해당 뷰에서 정의한 권한 검사를 수행할 수 있습니다. 이 경우, 글 조회(GET) 요청은 누구나 허용되고, 글 생성(POST) 요청은 로그인한 사용자만 허용되며, 편집(PUT, PATCH, DELETE) 요청은 해당 글의 작성자만 허용됩니다.

위의 PostViewSet 클래스는 ModelViewSet을 상속받았기 때문에 list, retrieve, create, update, partial_update, destroy 등의 기본적인 CRUD 기능을 제공합니다. 이를 통해 Post 모델에 대한 조회, 생성, 업데이트, 삭제 작업을 수행할 수 있습니다. 또한 CustomReadOnly 권한 클래스를 통해 읽기 전용 요청에 대한 권한 제어를 수행합니다.

 

 

6.3.5 URL

뷰셋을 사용하니 라우터도 함께 따라옵니다. 

앞서 배웠던 대로 라우터를 활용해 posts/urls.py 를 설정하겠습니다. 

 

myboard/urls.py 

 

6.3.6 실행

게시글이 잘 생성되었습니다. 

 

6.3.7. 필터링

필터링은 게시글들 전체를 가져오려 할 때 조거능ㄹ 걸어 가져오게끔 하는 기능

pip install django-filter

 

6.3.8 페이징

전체 조회 페이지를 여러 페이지로 나누거나 한 번에 모든 글을 가져오기 부담스러울 경우 한 번의 API 요청으로 가져올 수 있는 데이터 수를 제한하는 기능입니다. 

'DEFAULT_PAGINATION_CLASS':
    'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE':
    3,

 

 

6.3.9 좋아요

마지막 기능은 대망의 좋아요 기능입니다.

좋아요 기능은 오직 likes 필드에만 영향을 주고 간단한 GET 요청 하나로 처리할 수 있습니다. 

@api_view(['GET'])
@permission_classes([IsAuthenticated])
def like_post(request, pk):
    post = get_object_or_404(Post, pk=pk)
    if request.user in post.likes.all():
        post.likes.remove(request.user)
    else:
        post.likes.add(request.user)

    return Response({'status': 'ok'})

 

 

 

6.4 앱: 댓글

 

6.4.3 시리얼라이저

from rest_framework import serializers

from users.serializers import ProfileSerializer
from .models import Post, Comment


class CommentSerializer(serializers.ModelSerializer):
    profile = ProfileSerializer(read_only=True)

    class Meta:
        model = Comment
        fields = ("pk", "profile", "post", "text")


class CommentCreateSerializer(serializers.ModelSerializer):
    class Meta:
        model = Comment
        fields = ("post", "text")


class PostSerializer(serializers.ModelSerializer):
    profile = ProfileSerializer(read_only=True)
    comments = CommentSerializer(many=True, read_only=True)

    class Meta:
        model = Post
        fields = ("pk", "profile", "title", "body", "image", "published_date",
                  "likes", "comments")


class PostCreateSerializer(serializers.ModelSerializer):
    # image = serializers.ImageField(use_url=True, required=False)

    class Meta:
        model = Post
        fields = ("title", "category", "body", "image")

 

6.4.4 뷰

 

6.4.5 URL

에러 없이 응답이 옵니다.

좋아 요 기능이 잘 작동했는지 확인하기 위해 1번 게시글을 조회해 보았습니다. 

게시글을 확인해보면 비어있던 likes에 4번 유저가 추가된 것을 확인할 수 있습니다. 

 

다시 좋아요 요청을 보내면 좋아요가 취소되면서 4번 유저가 삭제된 것을 확인할 수 있습니다. 

 

앱 : 댓글

댓글 앱을 만들고 댓글 관련 기능을 개발하겠습니다. 

 

6.4.2 댓글 모델 & 마이그레이션

우선 모델부터 만들겠습니다. 

댓글과 같은 경우 게시글과 아주 밀접한 연관이 있다보니 굳이 앱을 따로 만들지 않아도 될 것 같습니다. 

class Comment(models.Model):
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    profile = models.ForeignKey(Profile, on_delete=models.CASCADE)
    post = models.ForeignKey(Post,
                             related_name='comments',
                             on_delete=models.CASCADE)
    text = models.TextField()

 

6.4.3 시리얼라이저

 

 

 

 

6.4.6 실행

 

 

 

6.5 배포하기

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."