Django당

(5) Django 인스타그램 피드 api연결

이히당 2024. 6. 24. 15:06

 

사용자가 피드에 들어갈 내용을 저장하면, 서버가 해당 데이터를 받아 잘 저장해주어야 한다.

 

 

위의 과정을 위해, ajax로 url 연결을 시도했지만 아직 서버에서 처리하는 코드를 작성하지 않았다.
그렇기에, 파일이 존재하지 않는다고 404 error가 난 것이다.

 

이제 이 부분을 만들어 보자.

클라에서 넘어온 데이터를 데이터베이스에 넣어줄건데,
파일데이터는 그 실체(?)가 들어가는 것이 아니다.

 

즉, 파일데이터는 다른 데이터와 저장 형식이 다르므로 주소로만 넣어주어야 한다.

django내에서는 이미지를 처리할 수 있는 media라는 것을 제공한다.


이것을 활용해 이미지를 처리해보자.

우선 settings.py에 아래의 코드를 추가하자

MEDIA_URL = '/media/' 
MEDIA_ROOT = os.path.join(BASE_DIR, 'media') #사용자가 업로드한 파일 관리

 

(os밑에 빨간줄이 생길텐데, alt + enter로 os를 임포트 해주면 해결된다.)

 

 

urls.py도 수정하자

from django.contrib import admin  
from django.urls import path,include  
from django.conf.urls.static import static  
from Content.views import Main, UploadFeed  
from django.conf import settings  

# from Content.views import UploadFeed  

# url list를 두면된다.  
# admin/ 은 default로 제공주는 것이다.  
urlpatterns = [  
    path('admin/', admin.site.urls),  
    # path('', Sub.as_view()),  
    path('main/', Main.as_view()),  
    path('content/upload', UploadFeed.as_view()),  # post로 호출할 때는 마지막 /를 빼야한다.  
]  

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)  # 미디어 파일을 조회할 수 있게 해준다.

 

 

이렇게 이미지 파일이름이 잘 뜨는 것을 확인할 수 있다.

이제 데이터가 제대로 저장되었는지 확인해보자

 

 

이미지를 첨부하고 글을 쓴 후 공유하기버튼을 누르자.

화면 상으로는 변화가 없어보이지 몰라도,
pycharm내 서버관련 터미널에 들어가면 데이터가 생성된 것을 확인할 수 있다.

 

 

media폴더에 uuid4형식의 랜덤으로 생성된 값으로 된 이미지 정보가 들어간다.
또한 Content_feed에 여러 개의 데이터가 새로 생성된 것을 확인할 수 있다.

(처음에 안되는 줄 알고 계속 공유하기 버튼을 눌렀더니 저렇게 많이 생성되었다..ㅡㅡ;;)

 

 

문제가 이미지 정보가 just하게 uuid4문자열이기 때문에 화면 단에서 이미지가 누락되어 보인다. 이 문제를 해결해주기 위해서는 uuid4로 만든 이미지 주소 앞에 https://를 붙여주어야한다.

 

여기에서 직접 쓰면서 하드코딩하는게 아니라 django에서 제공하는 기능을 활용하면 된다.

<img class="feed_img" src={% get_media_prefix %}{{ feed.image }}>

 

{% get_media_prefix %}이런 접두어를 추가하면 된다.

 

<!doctype html>  
<html lang="en">  
<head>  
  <!-- Required meta tags -->  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  

    {%load static%}  // 이 코드를 추가해준다.

 

다시 클라쪽 코드로 넘어와서 저장된 데이터를 불러오자.

{%load static%} 코드를 추가해주어야지만, settings.py에서 작성한 media_url을 불러올 수 있다고 한다.

 

이렇게하니 정상적으로 이미지가 출력된다 ㅎㅎ!

 

 정리하면 이렇다.
브라우저에서 파일이랑 정보(사용자 이름, 프로필, 내용)을 ajax를 통해 views.py에 보내면 UPloadFeed클래스가 받고 Feed의 DB에 추가하고 갱신을 힌다.(replace) 그렇게 서버에 올리면 리로드되면서 브라우저에서 새로운 피드가 보이게 된다.

728x90