Static Files (정적 파일)
서버 측에서 변경되지 않고 고정적으로 제공되는 파일
- 이미지, JS, CSS 파일 등
웹 서버와 정적 파일
- 웹 서버의 기본 동작은 특정 위치(URL)에 있는 자원을 요청(HTTP request) 받아서 응답(HTTP response)을 처리하고 제공하는 것
- 이는 '자원에 접근 가능한 주소가 있다.' 라는 의미이다.
- 웹 서버는 요청 받은 URL로 서버에 존재하는 정적 자원을 제공한다.
▷ 정적 파일을 제공하기 위한 경로(URL)이 필요!!!
Static files 기본 경로
app폴더/static(약속)/ app이름과 동일한 이름의 폴더 경로(권장) 에 이미지 파일을 배치
- 약속
- app폴더/static
- 권장
- app폴더/static/ app이름과 동일한 이름의 폴더 경로
- 나중에 다른 앱이 생기고 어플리케이션 많아지면 이름이 겹치면 경로 비교가 어려워 중간에 앱의 이름과 동일한 이름의 폴더를 중간 경로에 섞는게 권장사항이다
Django에서 기본 경로 static file 제공하기
장고에서 template 파일을 기준으로 봤을 때 이미지 파일의 경로를 절대 경로로 해야하는지 상대경로로 해야하는지 애매한 경우들이 많기 때문에 Static tag을 사용한다.
- Static fils 경로는 DTL의 static tag을 사용
- built-in tag가 아니기 때문에 load tag를 사용해 import 후 사용 할 수 있다.
template/articles/index.html
{% load static %}
<img src="{% static "articles/sample-1.png" %}" alt="sample-image">- {% load static %}
- {% static "" %}
- 정적파일의 약속된 경로 이후의 경로를 작성(확장자명까지 쓸 것)
주의사항
- extend 태그는 모든 태그들보다 최상단에 있어야 하므로 load 태그가 맨위로 가지 않게 해야한다.
- base.html에서 load static을 해도 자식 템플릿에서는 적용 안된다.
STATIC_URL 확인
STATIC_URL은 기본 경로 및 추가 경로에 위치한 정적 파일을 참조하기 위한 URL
실제로 물리적인 주소는 아니고 웹상에 제공하기 위해 장고가 만든 URL
STATIC_URL = URL + STATIC_URL + 정적 파일 경로
- http://127.0.0.1:8000/static/articles/sample-1.png
Static files 추가 경로
STATICFILES_DIRS 에 문자열 값으로 추가 경로 설정
STATICFILES_DIRS
- STATICFILES_DIRS 은 정적 파일의 기본 경로 외에 추가적인 경로 목록을 정의 하는 리스트
- settings에 추가 경로 저장
- BASE_DIR은 장고 프로젝트를 가지고 있는 최상단 폴더
Media files
사용자가 웹에서 직접 업로드하는 정적 파일(user-uploaded)
ImageField() 사용해야한다.
이미지 업로드에 사용하는 모델 필드
- 이미지 객체가 직접 DB에 저장된는 것이 아닌 '이미지 파일의 경로' 문자열에 저장됨
Media files 사용하기 전에 준비사항
- settings.py에 MEDIA_ROOT, MEDIA_URL 설정
- 작성한 MEDIA_ROOT와 MEDIA_URL에 대한 URL 지정(urls.py에 등록)
사전 준비 1단계
MEDIA_ROOT
- 미디어 파일들이 위치하는 디렉토리의 절대경로
- 사용자가 이미지를 업로드 했을 때 이미지 파일을 보관되는 경로
- 리스트로 못하고 하나만 넣을 수 있음
MEDIA_URL
MEDIA_ROOT에서 제공되는 미디어 파일에 대한 주소 생성(STATIC_URL과 동일한 역할)
사전 준비 2단계
- 일반적인 path함수 형태로 되어있지 않아 + 로 빼서 작성하는게 일반적으로 많이 활용하는 방식
- + static(URL 주소, 미디어 파일의 실제 위치)
- 업로드 된 파일 URL == settings.MEDIA_URL
- MEDIA_URL을 통해 참조하는 파일 실제 위치 == settings.MEDIA_ROOT
https://docs.djangoproject.com/en/5.1/howto/static-files/#serving-static-files-during-development
How to manage static files (e.g. images, JavaScript, CSS) | Django documentation
The web framework for perfectionists with deadlines.
docs.djangoproject.com
이미지 업로드 하기
1. 모델에 이미지 URL이 들어갈 컬럼을 추가
blank= True 속성을 작성해 빈 문자열이 저장될 수 있도록 제약 조건 설정
- 게시글 작성 시 이미지 업로드 없이도 작성 할 수 있도록 하기 위해서!!
- 기존 필드 사이에 작성해도 실제 테이블 생성시 가장 우측(뒤) 에 추가됨
2. Pillow 라이브러리 설치
파일이나 이미지 같은 경우 추가적인 기능이 있어서 라이브러리의 힘을 빌려야 한다.
$ pip install pillow
$ python manage.py makemigrations
$ python manage.py migrate
$ pip freeze > requirements.txt
3. form 요소의 entype 속성 추가
form에는 기본적으로 텍스트 형태의 데이터만 보낼 수 있도록 설정되어 있다.
따라서 추가적인 설정이 필요하다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/form
<form> - HTML: Hypertext Markup Language | MDN
HTML <form> 요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다.
developer.mozilla.org
4. create view 함수 수정
ModelForm의 2번째 인자로 요청 받은 파일 데이터 작성
- ModelForm의 상위 클래스 BaseModelForm의 생성자 함수의 2번째 위치 인자로 파일을 받도록 설정되어 있음
업로드 하기
media 폴더가 만들어 지면서 사진이 들어간다.
데이터베이스에도 드디어 경로(MEDIA_ROOT 이후)가 들어간다!!
업로드 이미지 제공하기
1. 출력할 페이지 html 수정
- 'url' 속성을 통해 업로드 파일의 경로 값을 얻을 수 있다
- article.image.url
- 업로드 파일의 경로
- article.image
- 업로드 파일의 파일 이름
2. 업로드 이미지 출력 확인 및 MEDIA_URL 확인
만약 같은 이름의 이미지 업로드시 임의의 해쉬 문자열을 섞어서 겹치지 않도록 해준다!! 편리하다!!
3. 이미지 업로드하지 않은 게시글 detail 페이지 렌더링 오류 수정
- 이미지를 업로드하지 않은 게시글은 detail 템플릿을 렌더링 할 수 없음
- 이미지 데이터가 있는 경우만 이미지를 출력할 수 있도록 처리
업로드 이미지 수정하기
1. 수정페이지 form 요소에 enctype 속성 추가
2. update view 함수에서 업로드 파일에 대한 추가 코드 작성
수정 시 form의 형태가 바뀜
- Clear 체크시 이미지 비워줌
- 파일 선택에 다시 선택해서 바꿔주면 바
- 과거 이미지들이 폴더에서 지워지지는 않는다.
참고
미디어 파일 추가 경로
1. 'upload_to' argument 을 활용한 방법
- ImageField()의 upload_to 속성을 사용해 다양한 추가 경로 설정
BaseModelForm
request.FILES 가 두번째 위치 인지인 이유
- ModelForm의 상위 클래스 BaseModelForm의 생성자 함수 키워드 인자 참고
'Django' 카테고리의 다른 글
| Authentication System 01 [Django] (0) | 2024.09.30 |
|---|---|
| Django Template & URLs [Django] (0) | 2024.09.29 |
| Django Form [Django] (0) | 2024.09.25 |
| Django ORM with view [Django] (0) | 2024.09.24 |
| Django ORM [Django] (3) | 2024.09.23 |