React와 Django로 만드는 블로그-글작성(3)

cmong·2021년 2월 9일
0
post-thumbnail

이 블로그는 https://objective-blackwell-219591.netlify.app 입니다
현재 프로젝트의 기술 스택은 https://github.com/wnsdudSoftkim/Tech_Blog 에서 확인 할 수 있습니다.

DRF, CODEMIRROR

저번까지 통신 작업을 했는데요. 통신작업은 DRF 즉 django rest framework 를 쓰지 않아도 잘 주고 받고 합니다. 그러면 굳이 DRF 를 쓰는 이유와 그게 무엇인지 알아보아야 합니다.

DRF(Django Rest Framework) 란 Django 안에 RESTful 서버를 쉽게 구축할 수 있도록 도와주는 라이브러리 입니다. 제가 느낀 장점 중 가장 큰 장점은 Serialize 입니다. 안드로이드 개발을 하던 , 웹 개발을 하던 JSON 형태로 데이터를 교환하는 경우가 많은데요. DRF 에 Serialize 기능은 DB에 있는 데이터를 JSON 형태로 바꿔서 보여줍니다.

pip install djangorestframework

그다음 Setting.py 들어가셔서

INSTALLED_APP =[
      ...
    'rest_framework',
]
REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
    ]
}

를 추가해 줍니다. 이제 Serialize를 추가해 줘야 하는데요. 내가 쓰는 app에 Serialize.py 를 생성후

from rest_framework import generics,serializers
from rest_framework.response import Response
from .models import *
class PostListSerializer(serializers.ModelSerializer):
    class Meta:
        model = Post
        fields = ('내','가','쓰','는','필드이름')
class PostListView(generics.ListAPIView):
    queryset = Post.objects.all()
    print("Post Work",queryset)
    serializer_class = PostListSerializer
    def list(self,request):
        queryset = self.get_queryset()
        serializer_class = self.get_serializer_class()
        serializer = serializer_class(queryset,many=True)

        page = self.paginate_queryset(queryset)
        print("Post Work",page)
        if page is not None:
            serializer = self.get_serializer(page,many=True)
            return self.get_paginated_response(serializer.data)
        return Response(serializer.data)

코드를 보면 Django의 Model은 QuerySet으로 저장됩니다. 막연히 print를 찍어봐도 QuerySet이 나오는걸 볼 수 있어요. 이부분은 QuerySet을 Json으로 바꾸어주는 작업이며 데이터가 이미 들어있던 말던 상관없는 부분입니다. 보여지는 부분을 수정하는 작업이니까요. 이제 , localhost:3000/Post로 접속하면 내 POST 데이터가 보여지게 되겠죠?

뭔가 이상하지 않나요? 제가 접속한 url은 localhost:3000이라서 그렇습니다. 본래 localhost:8000/Post 로 접속하게 되면 이렇게 보여지는게 맞겟죠. Proxy연결을 통해 접속할때 css 속성은 안넘어가는 것 같습니다.

다시 복습해보면 우리는 프론트와 백엔드의 통신을 위해 프론트에서 Axios 라이브러리를 사용했고 프론트에서 Proxy 연결을 해주어 CORS 에러를 회피했고 백엔드에서 CSRF 토큰을 해제해주어 방화벽을 없애주었습니다. 또한 백엔드에서 DRF 를 사용함에 더욱 용이한 개발 환경을 만들어 주었습니다.

CodeMirror

프론트와 백엔드가 통신이 됬다면 우린 다시 프론트 작업으로 돌아가야 됩니다. Preview 작업은 끝냈으니 실제 글작성 시 어떤 기능을 넣어야 할지 판단해야합니다. 우리는 코드용 텍스트편집기인 CodeMirror을 사용할 겁니다. 왜냐하면 CodeMirror은 이미지 DragDrop 기능도 지원하며 내가 H3 텍스트를 쓰고 싶으면

이렇게

쓸 수 있는 장점이 있죠.

npm i codemirror

저번 글에서 LeftBlock 에 있는 CodeEditor가 현재 작업할 코드 입니다.

    const codeMirror = CodeMirror(editor,{
                mode:'markdown',
                theme:'default',
                dragDrop:true,
                linenumbers:true,
                lineWrapping:true,
                scrollbarStyle:'overlay',
                placeholder:'마크다운 형식으로 작성됩니다.',

        })
        return (
            <>
                <div className="CodeEditor">
                    <div className="editor" id="editor"  >

                    </div>
                </div>
            </>



        )

CodeMirror 안에 있는 저 옵션들은 https://codemirror.net/ 로 접속하시면 쉽게 학습할 수 있습니다. 저는 마크다운 모드로 글을 작성하고 싶기에 markdown으로 하게 되었습니다.

 const state ={
        cursor:"",
        body:"",
        thumbnail:[],
   }
  codeMirror.on('change',onChange)
  const onChange = (doc) => {

        state.cursor = doc.getCursor()
        state.body = doc.getValue()



    }

이렇게 하면 state 변수에는 내가 원하는 데이터가 다 들어가게 되겠죠? 저는 사실 여기까지 하는데도 엄청 오랜 시간이 걸렸습니다. 실제 코드를 짤 땐 console.log 로 내가 원하는 데이터가 오는지, 하나하나 확인 해주어야 하니까요. 여기까지 했는데, 또 문제가 발생합니다.

이전에 Body부분을 Write와 Preview 부분으로 나누었죠. 현재 작업하는 구간은 Codeeditor니까 Write 부분입니다. 뭐가 문제일까요?
내 데이터는 CodeEditor의 state라는 변수에 존재하는데 실제 서버로 통신을 보낼땐 그 상위 컴포넌트에 데이터가 전달 되어야 한다는 것이죠.

우리가 원하는 React안에서 데이터 전달 구조는 하위 -> 상위 가 되는겁니다.
상위에서 하위로 보내는 건 props로 보내는 건 알겠으나 하위에서 상위로 보내는 건 쉽지 않을 거 같습니다. 그래서 redux를 써보기로 했습니다.

다음은 redux를 써보겠습니다.

관심 있을 만한 포스트

0개의 댓글