📒 [ TIL ] 2022.07.20_65일차 # 최종 프로젝트 (7)

[ 2022-07-20 (수) 오늘의 TIL ]

[ Today Project ]

drf 백엔드개발 + 프론트개발
: 이번 프로젝트는 팀프로젝트로 시작합니다.

[ Today Learn ]

• 게시물 포스팅 및 게시물 디테일 사진파일 출력 구현

✏️ 내가 배운것, 얻은것

* 게시물 포스팅 및 게시물 디테일 사진파일 출력 구현
프론트와 백엔드 레포지가 따로 있을때, 프론트에서 백엔드에 저장된 이미지 파일을 불러와서 출력하는 방법.

settings.py

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

media 폴더에 저장될 수 있도록 경로를 설정해준다.

article.urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    #article/
    path('', views.ArticleView.as_view()),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

게시물 관련된 urls.py에 static이하 부분을 추가해준다.

<메인>.urls.py

#레포지 메인 urls.py에 다음을 추가해준다.
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('user/', include('user.urls')),
    path('article/', include('article.urls')),
] 
if settings.DEBUG: 
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

if 이하 부분을 추가해준다.

이렇게 되면 이제 프론트에서 백엔드 레포지의 media에 있는 파일들을 자유롭게 가져올 수 있게 된다.

다음은 프론트

<img src="http://127.0.0.1:8000${image}" alt="" />

이제 백엔드 경로를 링크를 걸어 가져오면 된다.