화면단에서 이루어질 작업은, 즉 요청에 필요한 post_data 구축은 끝났다. 이것을 back-end에 보내주기 위해 POST과정을 거친다.
POST과정을 코딩하기전에 생각해야할 것이 라이프사이클을 설계해야한다. 웹에서 브라우져의 선택으로 하여금 데이터를 보내고 GET을 통해 데이터는 백엔드에서 활용되어 프론트엔드에서 활용 되어질 맵 데이터를 생성하고 점수를 계산해서 프론트엔드로 다시 Response해야한다.
요청 데이터는 두 가지로 나뉜다. 로그로 하여금 로그파일에 쌓이도록 하나, 다른 하나는 캐시에 저장되어 POST~GET동안 캐시에 저장되었다가 GET이 끝나면 캐시를 비우도록 한다. POST한 데이터를 DB에 저장하는 것에 필요성을 느끼지 못했고 계속해서 누적되는 것을 피하려고 한다.
캐시에는 여러 종류가 존재하는데, 다들 Redis를 사용하길래 그대로 따라하기로 한다.
1) pip(conda) install django-redis
2) setting.py에 cache정보 추가하기
# settings.py
# Cache
CACHES = {
"default": {
"BACKEND": "django_redis.cache.RedisCache",
"LOCATION": "redis://127.0.0.1:6379/1", # 1번 DB
"OPTIONS": {
"CLIENT_CLASS": "django_redis.client.DefaultClient",
}
}
}Redis Cache
Redis는 데이터베이스의 하나이며, 일반적인 RDBMS(관계형 데이터베이스)들과는 다르다. No-SQL이라고 말하는 비관계형 데이터베이스에 속하는 데이터베이스이다.
No-SQL에도 여러 분류에 따라서 데이터베이스를 나눌 수 있지만 Redis는 그중에서도 Key-Value Type 데이터베이스에 속한다.
저장할 때, Key를 지정해서 Value를 저장하게 되며 저장된 데이터를 사용할 때에는 지정된 Key를 통해서 저장된 데이터를 사용하게 된다.
POST를 쏴주기 위해 Vue에서 메서드를 정의한다. 리스트를 전달하기 위해 JSON형식으로 바꾸어 전달하기 위해 JSON.stringify를 사용한다.
### script ###
sendDataToServer() {
axios
.post(`http://localhost:8000/api/test`, {
address: this.post_data.address,
selected: JSON.stringify(this.post_data.selected),
})
.then((res) => {
console.log("---axios Post 성공---- ");
this.data = res.data;
})
.catch((res) => {
console.error(res);
});
},django의 view에도 post를 정의해준다. DataView 클래스안의 메서드로 작성해주면 된다. 파이썬 문법이 괜시리 반갑다..
class DataView(APIView):
def get(self, request,
address='팔달구 권광로 243 래미안노블클래스2단지아파트 202동',
shop_lst=['스타벅스', '메가MGC', '올리브영', '크린토피아', '맥도날드', 'GS25'],
minutes=30,
first=True):
score = score_accesibility(address,shop_lst)
scorebox = {'score':score}
return Response(scorebox)
def post(self, request):
# POST 데이터를 JSON 형식으로 받아옵니다.
data = request.data
# 필요한 데이터 추출
address = data.get("address")
selected = data.get("selected", [])
# 이제 `address`와 `selected`를 활용하여 원하는 작업 수행
print(address)
print(selected)
# 결과 데이터를 응답으로 반환
response_data = {"message": "Data received successfully."}
return Response(response_data)print로 하여금 데이터가 잘 들어오는지 우선 확인해본다. Vue의 START버튼에 클릭이벤트로 sendDataToServer()로 주고 데이터를 구성해서 백엔드로 POST해본 결과
잘 들어오는 것을 확인했다. 이제 들어온 데이터를 캐시에 저장하는 코드를 POST과정에 작성해보도록 한다.
redis 서버를 까는 것을 깜빡했다. 터미널에 brew install redis로 설치후에 redis-server로 서버를 실행시킨다.
다음과 같이 나오면 성공
캐시결과 캐시가 잘 들어옴을 확인했다. set으로 데이터를 넣고(key : value 형식으로 담김) get으로 꺼낼 수 있다.
다음은 로그를 데이터베이스에 집어넣도록 해보겠다.
일단 로그를 보낼 POST 메서드를 VUE에서 작성한다
이 메서드를 원래의 POST메서드가 실행될 때 함께 실행한다. 그리고 장고에서 로그를 받을 모델을 만든다.
# models.py
from django.db import models
class LogEntry(models.Model):
timestamp = models.DateTimeField(auto_now_add=True)
address = models.CharField(max_length=255)
selected = models.JSONField()
# serializers.py
from rest_framework import serializers
from .models import LogEntry
class LogEntrySerializer(serializers.ModelSerializer):
class Meta:
model = LogEntry
fields = '__all__'
# views.py
from rest_framework import status
from rest_framework.response import Response
from rest_framework.views import APIView
from .models import LogEntry
from .serializers import LogEntrySerializer
class LogEntryView(APIView):
def post(self, request):
data = request.data
serializer = LogEntrySerializer(data=data)
if serializer.is_valid():
serializer.save()
return Response(serializer.data, status=status.HTTP_201_CREATED)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
# urls.py
from django.urls import path
from .views import LogEntryView
urlpatterns = [
path('log', LogEntryView.as_view()),
]
이렇게 해서 다시 post를 날려주면
log가 잘 쌓이는 것을 볼 수 있다.
