Django Static & Media

Django Static & Media

 

개념 설명

 

 

STATIC_URL

• static 파일을 참조할 때 사용할 url
  • 개발 단계에서는 app/static 경로 및 settings의 STATICFILES_DIRS 에 정의된 경로 참조
  • 실제 디렉토리 경로가 아님! URL로만 존재하는 경로이다.

STATIC_ROOT

• 배포를 위해 정적 파일을 수집하는 디렉토리의 절대경로
• django 프로젝트에서 사용하는 모든 정적 파일을 이곳으로 모아서 적용
  • 단, DEBUG=True 인 경우 동작 X (개발 단계)
• 추후 배포시 모든 정적파일을 다른 웹 서버가 직접 제공하기 위함

 

collectstatic

 

모든 경로를 다 뒤져서, 한 곳에 모아두는 명령어 

python manage.py collectstatic

• STATIC_ROOT에 모든 정적 파일을 수집하는 명령어
• 배포 과정에서 사용

 

각 앱의 static 디렉토리

• <app_name>/static/<app_name>

 

템플릿에서 정적파일 사용하기

• {% load static %}
• {% static ‘file_path’ %}

---

 

직접 사용해보자!

 

vs code 

 

settings.py 열어서 맨 밑 부분에

 

추가해주고

STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / "static"]
STATIC_ROOT = BASE_DIR / "staticfiles"

 

 

 

 

 

 

 

 

static 폴더와 resources 폴더도 만들어주고

 

 

 

 

 

 

 

 

ㅇ

   

 

 

 

 

 

articles 폴더 안에, static 폴더 만들어주고 그 안에 또 articles 폴더 만들어준다. 그리고 

articles/static/articles 안에 이미지 하나 가져오기

 

 

 

 

 

 

 

 

그리고 index.html 코드도 수정해주고

{% extends "base.html" %}
{% load static %}

{% block content %}
    <h1>INDEX</h1>

    <img src="{% static 'articles/drawing_django.png' %}">

    <a href="{% url 'articles:data_throw' %}">Throw로 이동</a><br><br>
    <a href="{% url 'users:users' %}">Users로 이동</a><br><br>
    <a href="{% url 'articles:articles' %}">글 목록으로 이동</a>

    {% endblock content %}

 

서버 실행했는데 이미지가 안 뜬다...

 

하.. 정말 쉬운게 없네...

완강하려면 시간도 얼마 없는데ㅠㅠㅠㅠㅠㅠㅠ

 

다 뒤졌다ㅠㅠㅠ . 또 뭐가 문제니ㅠ 다른 건 이거 하나밖에 없었다.  

 

여기서 'static/' 작은 따옴표를 → "static/" 큰 따옴표로 바꿨더니 해결이 됐다..

STATIC_URL = "static/"

 

 

ㅋㅋㅋㅋ 근데 진짜 이미지가 너무 큼ㅋㅋㅋㅋ

 

 

자 이렇게 전체 폴더에서 > static 폴더 안에 > css 폴더를 하나 만들고 > 그 안에 style.css 파일을 하나 만들어주자.

 

이 style.css 열어서

img {
  width: 200px;
}

 

base.html

<link rel="stylesheet" href="{% static 'css/style.css' %}">

 

그 다음에 확인해보면, ㅎㅎ 귀엽게 잘 반영됐다.

---

 

Media Files

• 유저가 웹에서 업로드한 모든 파일을 말한다. (static file을 제외 모든 파일)

 

settings.py

# Media files
MEDIA_URL = "/media/"
MEDIA_ROOT = BASE_DIR / "media"

 

 

project app / 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 파일 사용하는 방법

 

 

articles/models.py

image = models.ImageField(upload_to="images/", blank=True)

 

 

pillow 설치

pip install pillow

 

pip freeze

pip freeze > requirements.txt

 

 

💡 null 과 blank의 차이

• blank → form에서 해당 값을 입력하지 않아도 괜찮다.
• null → DB에 null을 저장해도 된다.

DB에서 null값은 빈값이라기보다는 정의되지 않은 값을 뜻한다.

즉, 빈 값을 주고 싶으면 null이 아니라 "" 이렇게 빈 문자열 값을 주는게 좋다.

 

 

자, 이미지 라는 속성값을 추가했기 때문에 migration을 진행해야 한다.

python manage.py makemigrations

python manage.py migrate

 

잘 추가 됨

 

 

create.html 수정

{% extends 'base.html' %}

{% block content %}
<h1>New Article</h1>

<form action="{% url 'articles:create' %}" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">저장</button>
</form><br>
<a href="{% url 'articles:articles' %}">목록으로</a>

{% endblock content %}

 

• form의 enctype 속성
  • form의 데이터 전송 형식을 지정하는 것으로 기본적으로는 텍스트 형식의 데이터 교환이 이루어진다.
  • multipart/form-data
    • 전송 형식을 지정하는 것으로 file, image 전송시 사용한다.
    • <input> 의 type=file 사용시 application/x-www-form-urlencoded 가 기본값이다.

 

articles/views.py 변경하기

@login_required
def create(request):
    if request.method == "POST":
        form = ArticleForm(request.POST, request.FILES)
        if form.is_valid():
            article = form.save()
            return redirect("articles:article_detail", article.id)
    else:
        form = ArticleForm()

    context = {"form": form}
    return render(request, "articles/create.html", context)

 

article_detail.html

{% if article.image %}
		<img src="{{ article.image.url }}">
{% endif %}

 

 

서버 실행해서 사진 업로드 해보면 잘 된다. 휴..

---

 

runserver의 비밀

 

✔️ runserver는 사실….

• 우리가 사용하는 runserver 는 ‘개발용’ 서버를 실행하는 용도일 뿐이다.
• 순수 python으로 작성되었으며 django에 포함되어있어 개발을 편하게 도와주는 역할을 합니다.
• 절대로 개발 서버를 운영 환경에서 사용해서는 안된다.
  • 만약 python [manage.py](<http://manage.py>) runserver를 이용해서 배포한다면 문제가 생긴다.
  • 동시 접속 20개의 연결 정도면 펑! 하고 서버가 터질 수 있다.
• Django는 Web Framework이며 실제 운영시에는 웹 서버를 앞쪽에 달아줘야 한다.
• 관련 내용은 추후 배포 공부할 때 에서 다룰 예정..

 

 

끝.. 🫠