정적 파일 관리하기

Posted on 2021-08-25 by GKSRUDTN99
Django로 웹사이트 만들기 장고

장고의 MTV 구조

장고는 단순히 templates 폴더에 css를 넣는다고, css 파일을 불러오지 않는다.

html(template)는 동적인 파일이고, css와 js는 정적인 파일이므로 따로 관리한다.

앱 폴더 내에 static 폴더를 새로 만들고, 그 안에 정적 파일들을 넣는다.
예) blog/static/blog/bootstrap/ 안에 bootstrap.min.css를 넣는다.

template 파일에서 정적파일 사용하기

<!DOCTYPE html> 바로 아래에 {% load static %}을 넣어 정적 파일을 사용하겠음을 선언한다.
<link>태그의 href 속성을 다음과 같이 수정한다.
<link rel="stylesheet" href="{% static 'blog/bootstrap/bootstrap.min.css' %}" media="screen">

미디어 파일 관리하기

settings.py 수정하기

settings.py에 media 파일의 경로를 지정해 주어야 한다.

#settings.py
import os   # os 모듈을 사용하므로 import해야 한다.
from pathlib import Path
...
STATIC_URL = '/static/'

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

위와 같이 설정하면 프로젝트 폴더 아래 _media라는 이름의 폴더를 만들고 그 안에 저장하도록 한다.
또한, 도메인 뒤에 /media/라는 경로가 따라오면 미디어 파일을 사용하겠다는 의미

모델에 이미지 필드 추가하기

blog/models.py에 다음 내용을 추가한다.

#blog/models.py

class Post(models.Model):
    title = models.CharField(max_length=30)
    content = models.TextField()

    head_image = models.ImageField(upload_to='blog/images/%Y/%m/%d', blank=True)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return f'[{self.pk}]{self.title}'

    def get_absolute_url(self):
        return f'/blog/{self.pk}/'

    # author : 추후 작성 예정

upload_to에 이미지를 저장할 폴더의 경로 규칙을 지정한다.

여러 폴더를 거친 뒤 저장하는 이유는, 서버에서 파일을 찾아오는 시간을 단축시킬 수 있기 때문이다.
한 폴더 안에 너무 많은 파일이 있으면 그 파일을 찾는데 시간이 오래 걸리지만,
폴더를 여러 번 타고 들어가는 것은 시간에 큰 영향을 주지 않기 때문이다.
blank=True 옵션을 사용하면 해당 필드가 필수 항목이 아님을 표시할 수 있다.

위와 같이 모델을 수정한 뒤 migration을 시도하면, Pillow 모듈이 설치되지 않아 오류가 발생한다.
가상 환경을 확인하고, pip를 통해 Pillow 모듈을 설치한다.
Pillow 설치가 완료되면, migration을 진행한다.

미디어 파일을 위한 URL 지정하기

위의 과정만 진행하면, image 업로드는 정상적으로 진행되지만, image에 대한 접근은 제대로 이루어지지 않는다.
urls.py 파일에서 media URL에 대한 설정을 하지 않았기 때문이다.
static 폴더와 settings.py 파일을 사용해야 하므로 static과 settings를 새로 import 하고, urlpattern을 추가한다.

# do_it_django_prj/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('blog/', include('blog.urls')),
    path('', include('single_pages.urls')),
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

template 파일에서 img 태그의 src 속성에 {{ p.head_image.url }}을 통해 이미지를 불러온다.
_media폴더는 테스트를 위한 임시 폴더이므로 gitignore에 추가해준다.

# .gitignore
...

# PyCharm
.idea/
migrations/
_media/

Search