이 블로그는 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를 써보기로 했습니다.
