일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- db
- SSAFY
- 플로이드워셜
- 알고리즘
- 싸피셜
- PWA
- Python
- VITE
- TypeScript
- vitepwa
- Javascript
- queryset
- unionfind
- 셀프넘버
- Django
- react
- 리액트
- 머신러닝종류
- SQL
- SSAFYcial
- QuerySetAPI
- pwa적용하기
- git
- 싸피
- 싸피10기
- sqld
- 14658
- js
- 백준
- 데코레이터
- Today
- Total
Meme's IT
[Django] Static Files & Media Files 본문
# Static Files란? = 정적 파일
서버 측에서 변경되지 않고, 고정적으로 제공되는 파일 (이미지, JS, CSS 파일 등)
# Static Files을 제공하는 방법
1. 기본 경로에서 제공하기
Static files의 기본 경로 = app폴더/static/
→ app폴더에 static이라는 이름의 폴더를 만들어주고, 그 안에 app이름과 같은 이름의 폴더 안에 이미지 파일 배치
html 파일에서 static tag를 이용해 이미지 파일에 대한 url을 제공
<!-- articles/index.html -->
{% load static %}
<img src="{% static "articles/bok1.jpg" %}" alt="img">
이미지가 들어간 것을 확인할 수 있음
F12를 통해 개발자 도구로 들어가서 이미지의 경로를 확인하면
다음과 같이 '/static/articles/파일명'의 url으로 바뀌는데 이것을 STATIC_URL이라고 한다
STATIC URL이란?
▷ 기본 경로 및 추가 경로에 위치한 정적 파일을 참조하기 위한 URL,
▷ 실제 파일이나 디렉토리가 아니며, URL로만 존재한다.
settings.py에서 기본으로 설적되어 있는 것을 확인할 수 있다.
2. 추가 경로에서 제공하기
기본 경로 외의 경로를 설정하기 위해선 STATICFILES_DIRS에 문자열 값으로 추가 경로를 설정해 줄 수 있다.
# settings.py
STATICFILES_DIRS = [
BASE_DIR / 'static',
]
다음과 같이 BASE_DIR, 즉 최상위 폴더에 있는 static폴더를 추가 경로로 지정해 줄 수 있다.
그러므로 static폴더를 app안이 아닌 최상위 폴더에 만들어 준후,
index.html에는 바로 파일 이름을 url로 해주면 된다.
<!-- articles/index.html -->
{% load static %}
<img src="{% static "bok2.jpg" %}" alt="img">
이미지 확인 가능!
이때는 이미지 경로가
'static/파일명'으로 바뀐다.
결론 = 정적 파일을 제공하려면, 요청에 응답하기 위한 URL이 필요하다.
# Media Files
사용자가 웹에서 업로드하는 정적 파일
이미지를 업로드하려면 ImageField()라는 모델 필드를 사용한다
이때 이미지 객체가 직접 저장되는 것이 아니라 '이미지 파일의 경로'가 문자열로 DB에 저장된다.
# 사전 준비
1. settings.py에 MEDIA_ROOT(미디어 파일들이 위치하는 디렉토리의 절대 경로), MEDIA_URL(MEDIA_ROOT에서 제공되는 미디어 파일에 대한 주소를 생성해줌) 설정
# settings.py
MEDIA_ROOT = BASE_DIR / 'media'
MEDIA_URL = 'media/'
2. 작성한 MEDIA_ROOT와 MEDIA_URL에 대한 url 지정
여기서 업로드 된 파일의 url은 settings.MEDIA_URL / 파일의 실제 위치 = settings.MEDIA_ROOT
# project폴더/urls.py
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('articles/', include('articles.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
# Media files를 업로드해보기
1. model에 image를 추가해줌
# articles/models.py
from django.db import models
class Article(models.Model):
title = models.CharField(max_length=10)
content = models.TextField()
image = models.ImageField(blank=True) # 추가
created_at = models.DateTimeField(auto_now_add=True)
updated_at = models.DateTimeField(auto_now=True)
2. migration 진행
이때, imagefield를 사용하기 위해서는 pillow라는 라이브러리를 설치해줘야함
pip install pillow
python manage.py makemigrations
python manage.py migrate
3. create.html의 form항목에 enctype추가
<form action="{% url "articles:create" %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{form.as_p}}
<input type="submit">
</form>
4. views.py 업데이트
# articles/views.py
def create(request):
form = ArticleForm(request.POST, request.FILES)
\
38 페이지부터
'BackEnd > Django' 카테고리의 다른 글
[Django] 로그인(1) 로그인, 로그아웃 (0) | 2023.10.04 |
---|---|
[Django] 쿠키와 세션 (0) | 2023.10.04 |
[Django] view 함수 update (0) | 2023.10.04 |
[Django] ModelForm (0) | 2023.10.04 |
[Django] Form (0) | 2023.09.27 |