🌝 본 포스트는 리액트와 함께 장고 시작하기 Complete + 별도로 공부한 내용으로 이루어져있습니다
🎈 Static 파일
- 개발자가 준비해두는 파일
- css, js, image...
- 개발 리소스로서의 정적인 파일
- 앱/프로젝트 단위로 저장
static file 처리하기
app폴더에 static 폴더/app폴더 만들기
app/static/app 경로에 두기
프로젝트 전반적으로 사용되는 static파일은 settings.STATICFILES_DIRS에 두기
import os
STATICFILES_DIRS = [
os.path.join(BASE_DIR, <app_이름>, 'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')STATIC_URL / STATIC_DIRS / STATIC_ROOT
STATIC_URL
- static 파일을 제공할 url
- 템플릿 태그 {% static "경로" %}에 의해 참조되는 설정
STATIC_URL = '/static/'STATICFILES_DIRS
- File System Loader에 의해 참조되는 설정
- 프로젝트 전반적으로 사용되는 static 파일
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'myproject', 'static'),
]STATIC_ROOT
- static 파일들을 복사하여 모아 놓을 경로
py manage.py collectstatic명령이 참조되는 설정- 배포 시에만 의미가 있음
STATOC_ROOT = os.path.join(BASE_DIR, 'staticfiles')템플릿에서 static URL 처리
{% load static %}
<img src = "{% static 'blog/title.png' %}"/>collectstatic
실 서비스 배포 전 여러 디렉토리에 나눠져 있는 static 파일을 한 곳(settings.STATIC_ROOT 경로)으로 모아줌
Bootstrap 직접 서빙해보기
1. Bootstrap 다운 후 압축 풀기
Bootstrap 다운
2. STATICFILES_DIRS에서 언급한 경로에 압축 푼 Bootstrap 폴더 넣기
- settings.py
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'myproject', 'static'),
]
3.layout.html 변경
{% load static %}
<head>
<link rel="stylesheet" href="{% static 'bootstrap-5.0.1-dist/css/bootstrap.css'%}">
<script src="{% static 'bootstrap-5.0.1-dist/js/bootstrap.js' %}"></script>
</head>🎈 media 파일
- 이용자가 업로드하는 파일
- FileField, ImageField를 통해 저장한 모든 파일
- 실제로 문자열을 저장하는 필드
- 프로젝트 단위로 저장
media 파일 처리 순서
- HTTPRequest.FILES를 통해 파일 전달
- 뷰 로직/폼 로직을 통해 유효성 검증 수행
- FileField/ImageField 필드에 경로 저장
- settings.MEDIA_ROOT에 파일 저장
MEDIA_URL과 MEDIA_ROOT
MEDIA_URL
- 파일 접근할 때 사용
MEDIA_URL = '/media/'MEDIA_ROOT
- 업로드된 파일이 저장되는 공간
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')project/urls.py에 MEDIA_URL, MEDIA_ROOT 추가하기
from django.conf import settings
from django.conf.urls.static import static
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)FileField와 ImageField
FileField
- File Storage API를 통해 파일 저장
ImageField
- FileField 상속
- Pillow를 통해 이미지 width/height 획득
- Pillow를 설치하지 않으면 ImageField를 추가한 makemigrations 수행에 실패
파일 저장 경로 커스텀
upload_to 옵션 사용하기
예시)
photo = models.ImageField(upload_to='app1/%Y/%m/%d)