[Django] DRF : 장고 모델을 json 객체로 추출하기

장고로 프로젝트를 진행하다 보면 프론트와 연동하게 될 때가 있다.

이 방법들은 이전 포스트(link)에서 자세히 설명했고,

이 포스트에서는 그 중 장고에서 만든 모델을 json 객체로 추출해서 접근하는 방법을 알아보도록 하겠다.

 

Django REST Framework(DRF)는 웹에서 REST API 서버를 구축할 수 있도록 도와주는 오픈소스 라이브러리이다.

다양한 기기와 플랫폼이 만들어지면서 데이터를 다룰 때 기존의 방법에 한계가 생겼고,

이를 해결하기 위해 등장한 도구가 REST API이다.

 

 

(1) 준비하기

먼저, DRF 를 사용하기 위해 터미널에서 다음 명령어를 입력해 DRF를 설치한다.

pip install djangorestframework

다음으로 리액트에서 장고가 만드는 api에 접근할 수 있도록 CORS-HEADERS 를 설치한다.

리액트 개발서버 주소가 'http://localhost:3000' 이므로

타 서버에서 장고 서버로 접근할 수 있도록 이를 관리하는 라이브러리를 설치하는 것이다.

pip install corsheaders

 

 

 

(2) settings.py 수정

...
INSTALLED_APPS = [
    ...

    # DRF
    'rest_framework',
    'corsheaders',
]
...

설치한 라이브러리를 사용하기 위해 settings.py 파일을 수정해주었다.

 

이어서 CORS-HEADERS 가 리액트 개발서버를 차단하지 않도록 관련 부분을 작성한다.

...
# corsheaders
CORS_ORIGIN_ALLOW_ALL = False

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000',
]
...

 

 

 

(3) serializer 생성

장고 모델을 json 객체로 만들기 위해 모델의 데이터를 serializer 로 받는 과정이 필요하다.

 

app/serializer.py 파일 생성

from rest_framework import serializers
from .models import *


class ReviewSerializer(serializers.ModelSerializer):
    class Meta:
        model = Review
        fields = '__all__'

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = '__all__'

 

 

 

(4) app/views.py 파일 수정

api url 을 요청했을 때 수행할 내용을 views.py 파일에 작성한다.

from .serializers import *
from rest_framework import viewsets

...

class ReviewView(viewsets.ModelViewSet):
    serializer_class = ReviewSerializer
    queryset = Review.objects.all()

class UserView(viewsets.ModelViewSet):
    serializer_class = UserSerializer
    queryset = User.objects.all()
    
...

 

 

 

(5) app/urls.py 파일 수정

from django.urls import path, include
from . import views
from rest_framework import routers

# DB api 보기
router = routers.DefaultRouter()
router.register('review', views.ReviewView, 'Review')
router.register('user', views.UserView, 'User')

urlpatterns = [
    ...
    path('api/', include(router.urls))
]

 

 

 

위 과정을 거치면 다음 화면처럼 장고 모델 데이터를 json 형식으로 웹페이지에서 볼 수 있다.