Static 파일

파일의 종류

• 정적파일(static) : 내용이 고정되어 응답을 할 때 별도의 처리 없이 보내는 파일
• 동적파일(dynamic) : 내용을 가공해서 제공해야 하는 파일 ex) 단어 수 세기에서 단어를 잘라서 개수를 출력한다.

 

정적파일의 종류

• static : 개발자가 이미 정한 파일, Javascript, CSS, Image가 이에 해당한다.
• media : 이용자가 업로드하는 파일

 

django에서 처리하는 방법

 분산되어 저장되어 있는 정적파일을 static파일로 만들어서 사용해야 한다. 또한, django의 manage.py에서는 정적파일을 한 곳에 모아서 처리하는 기능도 제공하고 있다.

 

 

1. 자신의 컴퓨터 내에서 실행시킬 때

<img src = "상대 or 절대 주소" alt="로드 실패 시 띄울 메시지" />

 아무 위치에 저장해놓고 주소만 맞춰서 적어주면 된다. 다른 처리는 필요 없다. 

 

 

2. 서버에서 실행시킬 때

 Django는 기본적으로 runserver라는 서버를 제공한다. runserver는 static 파일을 불러올 때 staticfiles 앱을 실행시켜서 정적파일을 처리한다. 서버는 여러 클라이언트의 요청을 받는 입장으로, 요청 하나를 빨리 처리해야 한다. 정적파일은 고정되어 있는 파일이므로 위치를 지정해놓을 수 있다. 따라서 서버가 위치를 빨리 찾아 처리할 수 있도록 하기 위해 추가적인 처리가 필요하다.

*settings.py에 INSTALLED_APP에 등록되어 있음

 

[Django 정적파일 처리 순서]

1) 클라이언트가 URL을 포함한 웹 요청을 서버에 보낸다.

2) Django는 웹 요청 URL이 STATIC_URL로 시작하는지 검사한다.

3) staticfiles 앱은 STATICFILES_FINDERS에 지정된 파인더로 정적 파일을 검색한다.

4) 정적 파일을 찾으면 해당 파일을 클라이언트에게 응답해준다.

 

 

---

 

[실습(1) static 파일 올리기 (이미지)-서버X]

staticapp/templates/home.html

 자신의 컴퓨터 내에 있는 파일로 실행할 때 이 부분만 추가해서 실행시키면 된다. 

아무 폴더에 이미지를 넣고 html 파일 기준으로 상대 주소를 지정해준다. (절대 주소도 O)

웹 사이트의 이미지는 이미지 경로만 바꿔주면 된다.

alt : 이미지 로딩 실패 시 띄울 문구 지정

 

 

 

[실습(2) static 폴더 생성해서 모으기-서버O]

1) static 폴더 생성 (생략 O)

staticproject/staticapp/static(폴더생성)

 static폴더의 이름은 원하는 이름으로 설정한다.

 

 

2) static 파일 경로 설정

#setting.py
import os
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'staticapp', 'static'),
]

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

STATICFLES_DIRS : static 파일들의 경로 알려주기

BASE_DIR에서 staticapp안에 있는 static이라는 폴더를 staicfile로 사용한다고 등록

os.path.join(BASE_DIR, '앱 이름', '앱 안에 static폴더로 지정한 이름')

*BASE_DIR : 프로젝트 주소

STATIC_ROOT : static 파일들을 한 곳에 모을 위치

 

 

3) static 파일 모으는 terminal 명령어 입력

$ python manage.py collectstatic

STATICFILES_DIRS에 정리된 주소들에 있는 정적파일을 복사해서 STATIC_ROOT로 모은다.

 

 

4) 정적파일을 사용할 html 파일에 등록

#home.html
{% load static %}

 

 

5) html 파일에 사용하기

#home.html
<img src="{% static '원하는 이미지.jpg' %}" alt="이미지가 없을 때">

 

 

 

[실습(3) media 폴더 생성해서 모으기-서버O]

1) media 폴더 경로 설정

#settings.py
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

 

 

2) URL에 media 주소 추가

#urls.py
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', staticapp.views.home, name='home'),
]+static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

media 파일 요청이 오면 MEDIA_ROOT 경로에서 찾기

 

 

3) 이미지를 담을 틀 class 만들기

#models.py
class Animal(models.Model):
    title = models.CharField(max_length=255, null=True)
    image = models.ImageField(upload_to='images/')
    #media 폴더의 하위 폴더인 images에 업로드
    description = models.CharField(max_length=500, null=True, default="")
    
    def __str__(self):
        return self.title

$ pip install Pillow

이미지 처리를 위한 명령어

$ python manage.py makemigrations
$ python manage.py migrate

모델 생성하기

 

 

4) admin에서 이미지 추가할 수 있도록 설정(생략 O)

#admin.py
from .models import Animal (models.py의 모델 이름)

admin.site.register(Animal)

python manage.py runserver >> /admin 페이지에서 사진 추가

 

 

5) View 함수에서 모델 처리하는 방법 정의

#views.py
from .models import Animal
 
def home(request):
    animals = Animal.objects
    return render(request, 'home.html', {'animals': animals})

 

 

6) Html 파일에서 보여주기

#home.html
{% for animal in animals.all %}
        <img src="{{ animal.image.url }}" alt="실패">
        <br>
{% endfor %}

*br = 개행