TIL(25일차)

오늘은 django 인스타 클론코딩 팀 프로젝트를 진행하면서 코드 리뷰를 통해 다른 팀원이 구현한 모달창에서 게시물 포스팅하는 코드의 동작원리를 이해할 수 있었다.

$('#feed_create_button').click(function (){
            alert("공유 완료!")
            location.reload();

            let file = files[0]; 
            let tweet_img = files[0].name;
            let content = $('#input_feed_content').val();
            let username = '{{ user }}'
            let user_img = "https://t1.daumcdn.net/cafeattach/aVeZ/96bb985f315f63a2fe16120d8b0fec4b589ac4e9";
            let tag = $('#input_feed_tags').val();

            let fd = new FormData();

            fd.append('file', file);
            fd.append('tweet_img', tweet_img);
            fd.append('content', content);
            fd.append('username', username);
            fd.append('user_img', user_img);
            fd.append('tag', tag);

            var $crf_token = $('[name="csrfmiddlewaretoken"]').attr('value');
            $.ajax({
                url: "/main/tweet_post", 
                headers:{"X-CSRFToken": $crf_token},
                data: fd,
                method: "POST",
                processData: false,
                contentType: false,

                success: function(data){  // 콜백 함수들(success, error, compile)
                    console.log("성공");
                },
                error: function(request, status, error){
                    console.log("에러");
                },
                complete: function(){
                    console.log("완료");
                }
            })
        });

우선 게시물을 작성하는 버튼이 nav바에 있어서 nav.html에서 사용자로부터 데이터를 입력받아 fd라는 변수에 FormData()를 만들어 입력받은 값들을 fd에 추가한 후 main/tweet_post의 url로 fd에 담긴 데이터를 전달하고 해당 url에서 UploadTweet.as_view() 함수가 실행된다.

class UploadTweet(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)
        
        tweet_img = uuid_name
        content = request.data.get('content')
        username = request.user
        # user_img = request.data.get('user_img')
        tags = request.data.get('tag', '').split()
        write_no = request.data.get('write_no')
        
        current_tweet = TweetModel.objects.create(tweet_img=tweet_img, content=content,
        username=username, write_no=write_no)
        # user_img=user_img, # like_count=0,
        if tags:
            for tag in tags:
                tag = tag.strip()
                if tag != '':
                    current_tweet.tags.add(tag)
        current_tweet.save()
        
        return Response(status=200), redirect('/main')

nav.html에서 ajax로 전달받은 데이터 중 file을 uuid4().hex로 고유한 식별자로 바꿔주고 file 저장 경로인 media_root에 uuid를 합쳐 save_path를 만든 다음 open함수로 save_path를 열어 chunk 함수로 file을 나누어 destination에 담는다.

그리고 다시 ajax로 사용자에게 전달받은 데이터를 TweetModel 인스턴스를 생성하여 current_tweet에 저장하고 main url로 이동시켜준다.

file 형식을 db에 저장하는 과정에서 이해하는데 다소 어려움이 있었지만 이번에 이해함으로써 다음에는 더욱 쉽게 다가갈 수 있을 것 같다.