Statics

Static

Static Files 정적 파일

서버 츨에서 변경되지 않고 고정적으로 제공되는 파일 (이미지, JS, CSS 파일 등)

웹 서버와 정적 파일

• 웹 서버의 기본 동작은 특정 위치(URL)에 있는 자원을 요청(HTTP request) 받아서 응답(HTTP response)을 처리하고 제공하는 것
• == “자원에 접근 가능한 주소가 있다” 라는 의미
• 웹 서버는 요청 받은 URL로 서버에 존재하는 정적 자원을 제공함
• ⇒ 정적 파일을 제공하기 위한 경로(URL)가 있어야 함

Static files 제공하기

1. 기본 경로에서 제공하기
2. 추가 경로에서 제공하기

1. 기본 경로로 제공하기

기본 경로 : app폴더/static/

이미지 파일을 기본 경로에 배치

HTML 파일에 이미지 파일에 대한 경로 제공

<!-- index.html -->
{% load static %}

<img src="{% static "articles/sample-1.png" %}" alt="사진">

STATIC_URL

기본 경로 및 추가 경로에 위치한 정적 파일을 참조하기 위한 URL

⇒ 실제 파일이나 디렉토리가 아니며, URL로만 존재

# settings.py
STATIC_URL = 'static/'

URL + STATIC_URL + 정적 파일 경로

http://127.0.0.1:8000/static/articles/sample-1.png

2. 추가 경로로 제공하기

STATICFILES_DIRS에 문자열 값으로 추가 경로 제공 설정

STATICFILES_DIRS

정적 파일의 기본 경로 외에 추가적인 경로 목록을 정의하는 리스트

#setting.py

STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

{% load static %} 주의할 점

1. extends 보다는 밑에 있어야 된다.
2. 상속개념이 아니라서, 필요한 템플릿마다 다 설정해줘야된다.

Media files

사용자가 웹에서 업로드 하는 정적 파일 (user-uploaded)

이미지 업로드

ImageField()

이미지 업로드에 사용하는 모델 필드

이미지 객체가 직접 저장되는 것이 아닌 ‘이미지 파일의 경로’가 문자열로 DB에 저장

미디어 파일 제공을 위한 사전 준비

1. settings.py에 MEDIA_ROOT, MEDIA_URL 설정
2. 작성한 MEDIA_ROOT 와 MEDIA_URL에 대한 url 지정

1.

MEDIA_ROOT : 실제 미디어 파일들이 위치하는 디렉토리 절대 경로

MEDIA_URL : MEDIA_ROOT에서 제공되는 미디어 파일에 대한 주소를 생성

(=STATIC_URL 과 동일한 역할)

# settings.py
MEDIA_ROOT = BASE_DIR / 'media'
MEDIA_URL = 'media/'

2.

MEDIA_ROOT 와 MEDIA_URL에 대한 url 지정

업로드 된 파일을 제공하는 URL == settings.MEDIA_URL

위 urL을 통해 참조하는 파일의 실제 위치 == settings.MEDIA_ROOT

# project_name/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)

이미지 업로드

1. models에 추가

# app/models.py
# Create your models here.
class Article(models.Model):
    title = models.CharField(max_length=10)
    content = models.TextField()
    image = models.ImageField(blank=True)

blank=True == 빈 문자열 저장 가능한 제약 조건 == 이미지 없이 게시글 작성 가능

2. migration 진행

ImageField를 사용하려면 PIllow 라이브러리가 필요

pip install pillow 해줘야지 migrate 할 수 있음

3. form 요소의 enctype 속성 추가

<!-- app/create.html -->
<h1>Create</h1>
  <form action="" method="" enctype="multipart/form-data">
  내용
  </form>

4. view 함수에서 업로드 파일에 대한 추가 코드 작성

# app/views.py
def create(request):
	if request.method == 'POST':
		form = ArticleForm(request.POST, request.FILES)

업로드 이미지 제공하기

1. url 속성을 통해 업로드 파일의 경로 값을 얻을 수 있음

<!-- app/detail.html -->
<img src="{{article.image.url }}">

model 의 컬럼 명을 image로 뒀기 때문

• article.image.url : 업로드 파일의 경로
• article.image : 업로드 파일의 파일 이름

2. update view 함수에서 업로드 파일에 대한 추가 코드 작성

# app/views.py
def update(request, pk):
	  form = ArticleForm(request.POST, request.FILES, instance=article)

참고

ImageField() 의 upload_to 인자를 사용해 미디어 파일 추가 경로 설정

# app / models.py

def articles_image_path(instance, filename):
	return f'images/{instance.user.username}/{filename}'
	
class Article(models.Model):
	1. 기본 경로 설정
    image = models.ImageField(blank=True, upload_to='images') # media/images 폴더로 저장됨
	2. 업로드 날짜로 경로 설정
    image = models.ImageField(blank=True, upload_to='%Y/%m/%d') # media/날짜 폴더로 저장
  3. 함수 형식으로 경로 설정
	  image = models.ImageField(blank=True, upload_to='articles_image_path') # media/사용자/파일이름 로 저장