[TIL] 2022.07.01 (DRF 유화 제작 프로젝트, My Little Shoes 3)

API 설계에 맞춰서 모델링을 진행하고, views.py를 수정해주었다.

 

이번에 views.py를 구성하는 도중에 여러 가지 생각이 겹쳐서 혼란이 조금 왔었다.

그래서 팀 내에서 팀장님에게 많은 조언을 받으면서 정리를 하는 시간을 가질 수 있었다.

 

# upload/views.py

class ImageUploadView(APIView):
    # 이미지 등록 : 이미지 저장
    def post(self, request):
        image_one = request.FILES.get("image_one", "")
        image_two = request.FILES.get("image_two", "")

	# ↓ 해당 부분에 image one,two를 넣어서 새로운 이미지를 생성하는 모델 사용
        image_result = model(image_one, image_two)

        return Response(image_result ,status=status.HTTP_200_OK)

# 이미지 결과 페이지
class ImageResultView(APIView):
    # 저장하기 버튼 클릭 : 이미지 저장
    def post(self, request):
        img_serializer = ImageSerializer(data=request.data)

        if img_serializer.is_valid():
            img_serializer.save()
            return Response(img_serializer.data, status=status.HTTP_200_OK)

 

확실히 혼자서 고민하던 것이 팀장님의 도움으로 빠르게 정리가 되었다.

 

원래는 ImageUploadView의 post에 있던 것을 ImageResultView의 post로 옮겨주고 바뀐 부분이 있었기에 Postman을 통해서 API 통신이 잘 되는지 확인해주었다.

 

Postman Backend 통신

 

잘 넘어오는 것을 볼 수 있었다.

 

그리고 API를 건드리다가 고민으로 인해 조금씩 막힐 때마다 프로젝트 와이어프레임을 보면서 이미지 업로드/결과 페이지 Frontend html을 만들어보기로 하였다.

 

이미지 업로드/결과 페이지 와이어프레임

 

해당 와이어프레임과 유사하게 만들어보고자 하였다.

 

이미지 업로드 페이지

이미지 결과 페이지

 

아직은 html과 css 설정만 해주었기 때문에 동작하는 것은 구현하지 못하였다.

미구현 단계이기 때문에 남은 시간에 기능들을 추가하고 나중에는 Backend와 연결해주어야 한다.

 

현재는 Select Image 버튼을 누르고 이미지 파일을 업로드할 수 있도록 만들어주려고 한다.

 

-

 

API는 얼추 완성된 상태여서 웹 페이지를 만들어주고 있었다.

 

아직은 원하는 기능 구현도 되지 않았고, Backend와 연결해주지 않은 상태이다.

 

현재는 Javascript에서 이미지 파일을 등록하고 등록한 이미지를 해당 구역 내에서 보여주는 것을 목표로 코드를 만들어보고 있다.

아직은 원하는 대로 잘 되지 않는 편이지만 이것저것 찾아보면서 보완을 해야 할 것 같다

 

:P