티스토리 뷰
static 파일, 미디어 파일
static 파일은 .css, .js, a.jpg와 같은 게 static 파일이다.
media 파일이란
from이 있고 input type에 file이 되어 있으면 업로드가 되어 있다.
서버쪽에 업로드한 파일을 부를 때 장고에서는 이걸 media 파일이라고 부른다.
static file은 쓰려면 환경 세딩을 해야 한다.
static 파일의 위치
1 앱/static에 있거나
2. setting.py 모듈의 STAICFILE_DIRS 속성에 지정한 곳에 있어야 한다.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'mysite', 'static'),
]
서비스시 위치에는
STATIC_ROOT = os.path.join(BASE_DIR, 'static')이어야 한다.
static 파일을 복사하려면 python manage.py collectstatic하면 장고 개발 웹서버로 연동된다.
Static 파일 URL은 STATIC_URL = '/static/'으로 지정되어 있다.
그래서 전체를 세팅하면
<img src ='/static/a.jpg' 와 같이 써줘야 한다.
import os
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'mysite', 'static'), #해당 static 디렉토리는 장고밖에 모른다.
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static') #장고 웹서버가 아닌, 실제 웹서버가 사용하는 루트실제로 웹 서비스를 할 때는 각 앱의 static 디렉토리에 있는 게 아닌, 실제 웹서버에서 접근하는 스토리지에 옮겨놔야 한다.
python manage.py collectstatic그렇게 옮겨 놓고, STATIC_ROOT를 이용해서 서비스해야 한다.
실습
gallery 앱을 만든다.
python manage.py startapp gallerygallery에 static 폴더를 만들고, css에 base.css,
images에 아무 이미지나 .jpg로 10장 집어넣는다.
그러면, gallery/static에는 앱별로 사용되는 static 파일이 위치하고,
mysite.static에는 모든 앱들이 공통으로 사용하는 static 파일이 위치(STATICFILE_DIRS에서 쓰는 위치)
그리고 마지막으로, 최상위 ROOT 폴더, 즉, 앱과 똑같은 디렉토리 위치에 있는 static 폴더는 STATIC_ROOT이다.
즉, collect static을 하면, 최상위 ROOT 폴더에 있는 static으로 이동하는 것이다.
그리고 gallery 앱을 setting.py에 등록하면 된다.
gallery 앱 URL 등록
mysite/urls.py
path("gallery/", include('gallery.urls')),갤러리에 대한 url을 추가한다.
gallery/urls.py
from django.urls import path
from django.views.generic import *
from .models import Image
app_name = 'gallery'
urlpatterns = [
path('', TemplateView.as_view(template_name='gallery/gallery_list.html'), name='list'),
path('list/', ListView.as_view(model=Image), name='image_list'),
path('detail/<pk>/', DetailView.as_view(model=Image), name='image_detail'),
path('add/', CreateView.as_view(model=Image, fields='__all__'), name='image_add'),
]
그리고 gallery 앱 URL 템플릿을 만든다.
gallery/template/gallery/gallery_list.html
<html>
<head>
<link rel="stylesheet" href="/static/css/base.css" />
</head>
<body>
<div class="wrapper">
<img src="/static/images/01.jpg" />
<img src="/static/images/02.jpg" />
<img src="/static/images/03.jpg" />
<img src="/static/images/04.jpg" />
<img src="/static/images/05.jpg" />
<img src="/static/images/06.jpg" />
<img src="/static/images/07.jpg" />
<img src="/static/images/08.jpg" />
<img src="/static/images/09.jpg" />
<img src="/static/images/10.jpg" />
</div>
</body>
</html>
이렇게 되면, 해당 갤러리에 있는 image 폴더 안의 사진들이 보여지게 된다.
다음과 같이 고치면, 상대 경로로 사용할 수 있다.
css를 적용하면, 해당 css 때문에 팝업 효과나 이런 게 나온다.
{% load static %}
<html>
<head>
<link rel="stylesheet" href="{% static 'css/base.css' %}" />
</head>
<body>
<div class="wrapper">
<img src="{% static 'images/01.jpg' %}" />
<img src="{% static 'images/02.jpg' %}" />
<img src="{% static 'images/03.jpg' %}" />
<img src="{% static 'images/04.jpg' %}" />
<img src="{% static 'images/05.jpg' %}" />
<img src="{% static 'images/06.jpg' %}" />
<img src="{% static 'images/07.jpg' %}" />
<img src="{% static 'images/08.jpg' %}" />
<img src="{% static 'images/09.jpg' %}" />
<img src="{% static 'images/10.jpg' %}" />
</div>
</body>
</html>load static이라는 태그로 static을 먼저 불러온다.
그리고 나서 href에 해당 경로를 주면 된다.
Media 파일 실습
mysite/settings.py
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
Media 파일의 경로 설정
urls.py에서 다음과 같은 사항을 추가
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)/media라는 요청이 들어왔을 때, 처리해주는 모듈이다.
gallery/models.py
from django.db import models
from django.db import models
from django.urls import reverse
class Image(models.Model):
title = models.CharField(max_length=200)
photo = models.ImageField(upload_to='gallery/%Y/%m/%d/')
def __str__(self):
return self.title
def get_absolute_url(self):
return reverse('gallery:image_list')그리고 나서, 커맨드 창에서 pip install pillow를 한다.
아마 파이썬을 오래 사용 했다면 이미 있을 것이다.
gallery 앱도 마이그레이트 해준다.
python manage.py makemigrations gallery
python manage.py migrate gallery
gallery 앱 url을 또 등록해준다.
gallery/urls.py
from django.urls import path
from django.views.generic import *
from .models import Image
app_name = 'gallery'
urlpatterns = [
path('', TemplateView.as_view(template_name='gallery/gallery_list.html'), name='list'),
path('list/', ListView.as_view(model=Image), name='image_list'),
path('detail/<pk>/', DetailView.as_view(model=Image), name='image_detail'),
path('add/', CreateView.as_view(model=Image, fields='__all__'), name='image_add'),
]정확히는 add path를 추가해준다.
이미지 등록 템플릿도 만들어주고,
gallery/templates/gallery/image_form.html
<html>
<head></head>
<body>
<h1>이미지 등록</h1>
<form action="" method="post" enctype="multipart/form-data">
{{ form.as_p }}
{% csrf_token %}
<p><input type="submit" value="등록"></p>
</form>
</body>
</html>image 목록 템플릿도 만들어준다.
이미지 목록을 표시해준다.
gallery/templates/gallery/image_list.html
<html>
<head></head>
<body>
<h1> 이미지 목록 </h1>
{% for image in image_list %}
<li><a href="{% url 'gallery:image_detail' image.id %}">{{image}}</a></li>
{% endfor %}
</body>
</html>
상세보기 템플릿도 만든다.
gallery/templates/gallery/image_detail.html
<html>
<head></head>
<body>
<h1> {{image.title}} </h1>
<img src={{image.photo.url}} />
</body>
</html>
전부 보면, generic view에서 넘어온 것들을 활용해서 표시하고 있다.
그러면 gallery/add에서 등록 버튼을 누르면, gallery/list로 넘어간다.
upload 파일 저장 위치를 지정하려면, gallery/models.py에서 다음과 같은 모델이 처리해주는 것이다.
from django.db import models
from django.db import models
from django.urls import reverse
class Image(models.Model):
title = models.CharField(max_length=200)
photo = models.ImageField(upload_to='gallery/%Y/%m/%d/')
def __str__(self):
return self.title
def get_absolute_url(self):
return reverse('gallery:image_list')models.ImageField에는 파일의 경로값이 들어가 있다.
이렇게 하면, upload 저장 위치가 media 아래의 해당 년/월/일 아래에 저장된다.
