[Django] clone instagram #5

브라우저에서 클라이언트가 이미지, 글, 사용자 id, 사용자 프로필사진을 올리면 장고서버인 vies.py에서 처리를 하고 데이터를 모아 디비에 저장할 것이다.

이때 이미지, 글, 사용자id, 사용자 프로필사진과 같은 데이터를 한번에 업로드 하는 것이 조금 어려울 수 있다.

우선 피드 생성을 위해 데이터 처리는 비동기 방식으로 만들어줄 것이다.

여기서 동기, 비동기란 무엇일까?

데이터를 처리하는 방식에는 동기(synchronous), 비동기(asynchronous) 처리가 있다.

클라이언트가 서버한테 어떤 요청을 하면 서버는 응답을 주게된다.

이때 동기 방식은 클라이언트가 요청을 보냈을 때 응답을 줄때까지 기다리는 방식이며, 응답이 돌아와야 다음 동작을 수행할 수 있기 때문에 A작업이 모두 진행 될때까지 B작업은 대기해야한다.

반면에 비동기 방식은 클라이언트가 요청을 보냈을때 응답을 기다리지 않는 방식이다. 응답 상태와 상관없이 다음동작을 수행할 수 있으며, A작업이 시작하면 동시에 B작업이 실행된다.
A작업은 결과값이 나오는대로 출력된다.

이 그림을 보니까 단번에 이해가 되었다..ㅎ

서버로 파일 업로드하는 API 만들기

---

공유하기 버튼을 누르면 위에서 말했던 이미지, 글, 사용자id, 사용자 프로필사진을 서버로 보내 줘 실제로 피드가 생성될 수 있도록 해야한다.

공유하기 버튼 클릭 이벤트 만들기

우선, 공유하기 버튼을 눌렀을 때 이벤트가 발생하는 코드를 작성해주도록 하겠다.

html

...
<textarea id = "modal-input-txt" class="modal-text-textarea form-control col-sm-5" rows="10" placeholder="문구 입력..."></textarea>
...
<button id = "modal-create-btn" type="button" class="btn btn-primary" style="width: 268px">공유하기</button>
...

jquery

let files;  // 전역변수 설정
...
...
function uploadFiles(e){
    ...
    files =  e.dataTransfer.files; 

$('#modal-create-btn').click(function(){ 
    alert("공유하기 클릭!");

    let file = files[0];
    let image = files[0].name;
    let content =  $('#modal-input-txt').val();
    let user_id = "jollyn";
    let profile = "https://pbs.twimg.com/profile_images/1324185005883486208/gOBh4kKR_400x400.jpg";
});

id값을 설정해 준뒤, 제이쿼리를 사용하여 버튼을 클릭했을 때 데이터를 가져올 수 있도록 만들어 주었다.

이때 image를 가져오기 위해서
상단에 files를 전역변수로 선언해주고 files를 사용해준다.

여기서 files를 전역변수로 왜 설정해주는가?

기존에 files는 function uploadFiles(e) 함수 안에서 선언되어 있는 상태였다. 이 files라는 변수를 다른 곳에서도 사용하기 위해 상단에 전역변수로 설정해줘야 한다.

데이터 서버로 보내주기

이제 담은 데이터를 ajax를 사용하여 서버를 보내주도록 하겠다.

먼저 파일형식의 데이터를 보내주기 위해서는 formdata를 하나 만들어줘야 한다.

jquery

let fd = new FormData();
fd.append('file', file);
fd.append('image', image);
fd.append('content', content);
fd.append('user_id', user_id);
fd.append('profile', profile);

만들어 준 뒤, ajax 호출을 만들어 주도록 하겠다.

$.ajax({
    url: "/content/upload",
    data: fd,
    method: "POST",
    processData: false,
    contentType: false,
    success: function (data) {
      console.log("성공");
    },
    error: function (request, status, error) {
      console.log("에러");
    },
    complete: function() {
      console.log("완료");
    }
})

코드를 해석해보자면,

이 ajax를 통해서 /content/upload url로 fd 데이터를 가지고 post호출을 하며,

성공하면 console.log("성공")를
실패하면 console.log("에러")를
성공이든 실패든 console.log("완료")를 무조건 실행하라는 의미이다.

하지만 이 상태에서는 /content/upload이라는 url을 만들어주지 않았기 때문에 에러가 난다.

서버에서 데이터 처리하기

그럼 이제 서버쪽에서 코드를 작성해줄 차례이다.

content/view.py

class UploadFeed(APIView):
    def post(self, request):
        file = request.data.get('file')  
        image = request.data.get('image')
        content = request.data.get('content')
        user_id = request.data.get('user_id')
        profile = request.data.get('profile')

        return Response(status=200)

instagram/urls.py

from content.views import Main, UploadFeed


urlpatterns = [
    path('admin/', admin.site.urls),
    path('main/', Main.as_view()),
    path('content/upload', UploadFeed.as_view())
]

서버는 ajax로부터 fd 데이터를 받아와 새로운 피드를 만들어줘야한다.

views.py에서 받아온 데이터를 담아주고 클라이언트에게 status=200인 응답을 주는 함수를 만들어준다.

또한 views.py에 함수를 만들었기 때문에 urls.py에서 해당 함수에 대해 url을 할당시켜준다.

url을 할당시켜 주면 content/upload로 접속할 경우 content.views의 UploadFeed를 실행시킬 것이다.

DB에 데이터 저장하기

이제 담아준 데이터를 디비에 저장시켜줘야 한다.

이때 기억해야 할 것은,
디비에는 파일이 실제로 저장되지 않는다는 것이다

실제파일은 파일,이미지 서버에 저장되고, 그 주소만 디비에 저장해줄 것이다.

그렇다면 실제파일은 어디에 저장할까?

장고에서는 midea라는 기능을 사용하면 장고 프로젝트 서버에 파일을 저장시킬 수 있다.

이 midea를 사용하기 위해서는 setting.py에 다음 코드를 작성해줘야 한다.

instagram/settings.py

import os

...

MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

위 코드를 작성해주면,
장고에서 사용자가 서비스에서 올리는 미디어파일들이 미디어 폴더에 저장해준다.

추가로 사용자들이 업로드한 이미지를 사용할 수 있도록 media에 대한 url도 작성해줘야 한다.

instagram/urls.py

from .settings import MEDIA_ROOT, MEDIA_URL
from django.conf.urls.static import static


urlpatterns += static(MEDIA_URL, document_root=MEDIA_ROOT)

이 코드를 추가해줘야 media에 이미지파일이 저장되면 미디어 파일에 접근해서 조회할 수 있다.

추가해주지 않으면 이미지 파일을 넣어도 나중에 조회할수 없음 !!

그럼 이제 이미지파일이 저장 될 media라는 폴더를 만들어주도록 하겠다.

instagram/
    content/
    instagram/
    venv/
    templates/
    user/
    media/    미디어 폴더 생성
    manage.py

데이터를 저장하기 위해 content/views.py를 수정해주도록 하겠다.

content/views.py

import os
from instagram.settings import MEDIA_ROOT
from uuid import uuid4


class UploadFeed(APIView):
    def post(self, request):
    	file = request.FILES['file']
        
        uuid_name = uuid4().hex
        save_path = os.path.join(MEDIA_ROOT, uuid_name)
        with open(save_path, 'wb+') as destination:
            for chunk in file.chunks():
                destination.write(chunk)

	image = request.data.get('image')
        content = request.data.get('content')
        user_id = request.data.get('user_id')
        profile = request.data.get('profile')

	Feed.objects.create(image=image, content=content, user_id=user_id, profile=profile)

        return Response(status=200)

코드를 해석해보자면, 다음과 같다

• uuid_name = uuid4().hex

이미지 파일의 이름에는 한글이나 특수문자들이 들어갈 수 있다. 그럴경우 서버에서 이름을 읽을때 에러가 날 수 있기 때문에 이미지 파일을 저장할 때는 랜덤으로 영어와 숫자로 이루어진 고유한 id값을 넣어서 저장한다.

이때 고유한 id값을 주기 위해 uuid4()라는 함수를 사용한다.

• save_path = os.path.join(MEDIA_ROOT, uuid_name)

저장경로를 MEDIA_ROOT에 uuid_name을 쓰겠다는 의미이다.

이때 MEDIA_ROOT = os.path.join(BASE_DIR, 'media')이므로
BASE_DIR 즉 현재 프로젝트 경로에 media를 붙이고, uuid이름을 붙여서 저장하겠다는 것이다.

실제로 파일이 저장되는 위치는 instagram/media/uuid4sjdkfsffdn 이런 형태가 된다.

•     with open(save_path, 'wb+') as destination:
        for chunk in file.chunks():
            destination.write(chunk)
            

실제로 파일을 midea에 저장시켜 주는 부분이다.

• Feed.objects.create(image=image, content=content, user_id=user_id, profile=profile)

가져온 데이터를 가지고 피드를 만들어준다.

서버를 실행해 실제로 사진파일을 업로드 시키면 피드가 생성되나 확인해 보도록 하겠다

위처럼 사진이 들어오지 않는다는 것을 확인 할 수 있다.
왜냐하면 현재 디비에 저장된 이미지 주소가 http로 시작하는 풀네임이 아닌 파일네임만 있기 때문이다.

따라서 미디어 파일네임을 자동으로 읽을 수 있도록 해줘야한다.
main.html을 열고 디비의 feed.image데이터를 불러오는 부분을 수정해주도록 하겠다.

templates/instagram/main.html

{% load static %}  



{% for feed in feeds %}
...
...
  <div class="feed-img">
      <img id="feed-img"
           src="{% get_media_prefix %}{{ feed.image }} ">
  </div>

{% get_media_prefix %}를 넣어줌으로써 파일네임을 자동으로 읽어올 수 있게 된다.

이때 반드시 {% load static %}을 해줘야 settings.py에서 설정해줬던 MEDIA_ROOT를 읽어올 수 있다

수정 후 서버를 실행해보면 아래와 같이 이미지파일이 잘 들어오는 것을 확인할 수 있다

피드 업로드 완료 후 모달 닫기

업로드가 완료되면 모달이 닫히도록 코드를 수정해주도록 하겠다.

templates/instagram/main.html

$.ajax({
      url: "/content/upload",
      data: fd,
      method: "POST",
      processData: false,
      contentType: false,
      success: function (data) {
        console.log("성공");
      },
      error: function (request, status, error) {
        console.log("에러");
      },
      complete: function() {
        console.log("완료");
        // 업로드 완료하면 main페이지로 새로고침
        location.replace("/main");  
      }
    })

• location.replace("/main");
  : 업로드가 완료되면 메인페이지로 돌아가게 된다.

🔎 참고

강의
강의자료
동기, 비동기 처리방식