🤵🏼얕고 얕은 개발자의 포트폴리오 만들기 3🤵🏼

🎈 DRF 구성하기

서버 만들 때 DRF 는 정말 편리하다. 말그대로 뚝-딱 만들 수 있다. 우선 모델을 만들어보자.

class Item(models.Model): 
    id = models.IntegerField(primary_key=True)
    category = models.CharField(max_length=30)
    title = models.CharField(max_length=30)
    stack = models.CharField(max_length=200)
    markdown_content = models.TextField()
    created_date = models.DateTimeField(default=timezone.now)
    
    def set_stack(self, x):
        self.stack = json.dumps(x)

    def get_stack(self):
        return json.loads(self.stack)
    
    def __str__(self):
        return self.title

    class Meta:
        db_table = "item"

from rest_framework import serializers 


class ItemSerializer(serializers.ModelSerializer): 
    class Meta:
         model = Item
         fields = ('id','category','title','stack','markdown_content','created_date')

하나의 파일에 모델과 Serializer를 정의했다. Serializer는 모델 object를 front에서 꺼내쓰기 쉽게 가공해주는 놈이다. Item class의 set_stack, get_stack 은 List 형태의 Column을 가공해주기위해 썼다. SQL에서 List를 가공해쓰는 것은 우아하지는 않지만 말그대로 토이 프로젝트니까.

이제 View를 만들어 보자

class ItemViewSet(APIView):    

    def get(request,**kwargs):
        qs = Item.objects.all()
        sc = ItemSerializer

        category = kwargs.get('category')

        qs = qs.filter(category=category)
        sc = sc(qs,many=True)
        sc = (json.dumps(sc.data))
        
        return HttpResponse(sc)

카테고리 별로 data를 가져오는 부분이다. react에서 요청한 카테고리를 **kwargs로 받는다. **kwargs 는 요청한 값을 dict로 받아주는 놈인데 보통 예측 '불'가능한 값이 올 때 써주면 유연하게 작동한다. all() 부분에서 바로 filter로 한 줄로 작성하는 것도 물론 가능하지만 점점 기능이 추가되다 보니 일단 수정을 미루고 있다. Serializer 객체를 만들고 json.dumps로 json 형태로 가공 후 바로 Json을 react에게 보내준다.

path('item/<str:category>/',ItemViewSet.get)

react에서는 상기 path와 같이 example.com/item/categoryA/ 로 데이터를 요청하고 json을 리턴받는다. 참고로 양쪽 다 맨 끝에 / 를 붙여야 함에 주의하자. 포트폴리오의 Admin을 만들어서 새로운 카테고리를 넣으면 카테고리 탭이 자동으로 추가되어 선택할 수 있도록 만들 예정이다. Velog의 태그 처럼.

🤢🤢🤢

API 서버를 붙여 heroku에 배포하여 url로 접근을 해보니 장고가 나온다. 즉 API 서버가 클라이언트 사이드에 노출이 되는 것이다. 노출이 되는 것이 문제가 아니라 heroku에서 react의 router보다 django의 url을 우선으로 두어 react가 보이지 않는다. react가 나와도 refresh를 하면 다시 api 서버(장고) 가 나온다.

다시 생각해보자. 개발 환경에서는 react 를 5000번 포트, django 를 8000번 포트로 사용하고 이들과의 통신은 axios 로 포트 번호를 지정해서 한다.

 return await axios
    .get('http://127.0.0.1:8000/project/');
   
}

heroku는 어떨까. ec2와 같은 laas에 배포를 했다고 하면 apache 설정에 각기 다른 포트로 설정하여 이들과의 충돌을 막을 수 있다. (충돌을 막는다는게 이상한 표현이긴 하다. 애초에 서버&클라이언트 url, port 충돌 따위의 개념은 있지도 않다.) 하지만 heroku에 단일 app으로 장고,리액트 조합을 배포하다 보니 예상과는 다르게 동작한다. 포트를 따로 설정할 방법도 없다. 그래서 프론트에서 사용하는 url이 장고로 들어왔을때 프론트로 보내줄 필요가 있다.

react_views_regex = r'\/|\b'.join([

    # List all your react routes here
    'Select',
    'skills',
    'projects',
    'experience'

]) + r'\/'

urlpatterns = [
    #path('',include(router.urls)),
    #path('item/',ItemViewSet)
    path('item/<str:category>/',ItemViewSet.get),
    re_path('admin/', admin.site.urls),
     re_path(react_views_regex,index),
     re_path(r'^media/(?P<path>.*)$', serve, {
    "document_root": settings.MEDIA_ROOT
}),
    re_path(r'^static/(?P<path>.*)$', serve,
        {'document_root': settings.STATIC_ROOT}),
 ]

react_views_regex 에 프론트에서 사용하는 url을 등록해 놓았다. 모든 url을 맵핑할 필요는 없고 프론트 url 패턴에서 공통되는 루트 부분만 가져오면 된다. 루트인 '/' 를 설정해버리면 장고 어드민, API 서버 url 까지 프론트로 가버리기 때문에 프론트에 사용되는 공통 url 부분이 있으면 좋다. 저런식으로 urls.py에 등록해주면 아까와 같은 충돌은 일어나지 않는다.

https://whoami-moonseok.herokuapp.com/