Flutter-Django-toy) quiz_app (ver.Mongle)

Mongle·2020년 8월 21일

🎈 Quiz app 개발동기

django를 활용해 백엔드 개발을 하던 중 문제가 발생했다. Django로 만든 프론트엔드가 너무 이쁘지 않은 것 😐 (쿠궁)
Django의 Template에 html과 css, bootstrap으로 열심히 화면을 만들어보았지만...

만족스럽지 않았다..

즉, 개발동기는 이쁜 화면에 Django를 연결하고싶다!!😡 라는 마음때문이었다.

그동안에는 HTML에 정보를 송수신하는 데 Main 클래스만 활용됐다. 한 페이지 당 하나의 클래스 혹은 함수를 할당하여 정보를 주고받을 것이다.
그러면 이 방식의 문제는 무엇인가? 바로 코드의 재활용성이 떨어진다는 것이다. 한 페이지에 하나의 클래스나 함수를 할당하게 되면 같은 정보를 보내더라도 코드를 반복할 수밖에 없다.

👉 자세한 코드는 여기를 참고하세요.

언뜻 보더라도 비슷한 코드가 계속해서 반복된다는 것을 알 수 있다.

이를 위해 Django Rest Framwork에 대해서 좀 알아보아야한다.
Django Rest Framework를 사용하면 데이터를 json형식으로 주고받아 코드를 간결하게 만들고, 백엔드와 프론트엔드를 완벽하게 분리하여 작업할 수 있다.

👩‍💻 개발 과정

먼저, flutter를 이용해서 UI를 만든 후,

👉 플러터(프론트엔드) 코드 레포

Django rest framework를 사용해서 백엔드를 만든다.
rest_framework의 serializers를 통해서 데이터를 json형식으로 변환할 수 있다.
serializers.py

from rest_framework import serializers
from .models import Quiz

# serializer를 통해서 Quizmodel에 있는 데이터를 
# title, body, answer를 담고있는 json타입의 데이터로 변환해준다.
class QuizSerializer(serializers.ModelSerializer):
    class Meta:
        model = Quiz
        fields = ('title', 'body', 'answer')

views.py 에서는 id로 들어온 개수만큼 데이터베이스에 있는 퀴즈를 랜덤하게 반환한다.
views.py

from rest_framework.response import Response
from rest_framework.decorators import api_view
from .models import Quiz
from .serializers import QuizSerializer
import random


@api_view(['GET']) #주어진 개수만큼 랜덤한 퀴즈를 반환
def randomQuiz(request, id):
    totalQuizs = Quiz.objects.all()
    randomQuizs = random.sample(list(totalQuizs), id)
    serializer = QuizSerializer(randomQuizs, many=True)
    return Response(serializer.data)