[Django] Debug = True 환경에서 static 활용하여 웹에 이미지 띄우기

장고 웹에 img 태그를 통해 이미지를 띄우려면 장고의 자동 경로 설정을 잘... 이해해야... 경로 연결을 하고 성공적으로 목적을 이룰 수 있다.

배포 환경에서는 정적 파일만 있는 것도 아니고, 항상 동일한 폴더에서만 자원을 활용하는 것도 무리이기 때문에 별도의 포스트가 필요할 것 같다.

배포 단계가 아니라는 가정 하에 테스트 차원에서 이미지를 띄우는 방법은 6가지 단계로 요약할 수 있다. 각각settings.py 설정 2개, static 폴더 위치 설정, 이미지 저장하기, html 스크립트에서 절절히 참조하기, urls에 static 연결하기이다.

1) Settings.py에서 staticfile 관련 앱 넣어주기

사실 요즘 장고에서는 왠만하면 알아서 넣어주지만, django.contrib.staticfiles가 설치된 앱 목록에 들어가 있는지 꼭 확인해주어야 한다.
static()함수를 이용해 urls에서 static 파일들의 위치를 경로로 전달해주는 과정을 담은 애플리케이션으로 static 폴더의 위치 설정의 키가 된다.

2) static 폴더 만들기

위치는 프로젝트 폴더의 root에 만들어줘야 한다.

ProjectFolder/
-> static/
-> ProjectFolder/
-> -> settings.py
-> -> wsgi.py
-> -> asgi.py
-> -> urls.py

그리고 애플리케이션마다 static 폴더 안에 폴더를 만들어줘야 나중에 같은 이름의 파일이 있어도 구분하여 사용할 수 있다.

static/
-> app_name1/
-> app_name2/

js, css, img와 같은 자산들을 static에 넣어 관리하게 되는데 이 파일들을 따로 묶어 관리하고 싶다면 앱 이름으로 된 폴더마다 또 폴더를 구분하면 된다.

app_name1/
-> js/
-> css/
-> img/

3) STATIC_URL, STATICFILES_DIRS, STATIC_ROOT 변수를 settings.py에 만들어주기

• STATIC_URL : 장고는 개발자가 static 폴더를 여러개 쓴다 하여도 사용자에게 보일 때는 하나의 폴더에서 나온 것처럼 보이도록 추상화를 진행한다. 이 때 사용자에게 보이는 url의 모습을 말한다. 대게 /static/으로 자동 설정되어있다.
• STATIC_ROOT : 장고가 static 폴더를 찾기 시작하는 위치를 말한다. 설정하지 않으면 그냥 staticfiles 애플리케이션이 알아서 프로젝트 root부터 static file을 찾아나선다. (즉 settings.py에 변수 선언 안해도 무방!)
• STATICFILES_DIRS : 장고가 static 파일을 찾기 위해 들여다볼 디렉토리를 목록지어 놓은 리스트 변수이다. STATIC_ROOT와 겹치면 안된다.

4) 이미지를 적절한 위치에 저장하기

나는 css, js를 따로 만들지 않고 애플리케이션별로만 폴더를 나누어 놓았다.
그래서 구조가 아래와 같다

ProjectFolder
-> static
-> -> app_name1
-> -> -> test_img.jpg

5) html template 파일에서 저장 위치를 참조하여 img 태그로 이미지를 불러오기

<img src="{% static 'app_name1/test_img.jpg' %}" alt="원하는 대체 이름">

6) my_project/urls.py에 static 연결하기

기본

urlpatterns = urlpatterns + static(settings.STATIC_URL)

STATIC_ROOT을 설정했을 경우

urlpatterns = urlpatterns + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

그렇게 완료했다면...

python manage.py collectstatic
python manage.py runserver

를 터미널에 쳐서 제대로 돌아가는지 확인하시면 된다.

다음에 다룰 토픽

• static 폴더에 있는 자산들은 통상적인 middleware chain을 거치지 않고 wsgi에 의해 핸들링된다고 한다. middleware chain이 무엇인지 알아보면 좋을 것 같다.

• 원래 STATICFILES_DIRS와 STATIC_ROOT는 공존 가능한데, 나는 STATIC_ROOT을 설정하면 얘가 갑자기 이미지를 못 찾는다.

  혹시 STATICFILES_DIRS가 STATIC_ROOT부터 시작해서 목록으로 이름들을 상대경로 삼아

  STATIC_ROOT + (STATICFILES_DIRS의 원소로 저장된 경로 이름)

  이걸 찾게 되나? 싶어서

  STATIC_ROOT = BASE_DIR + '/static/'
  STATICFILES_DIRS = [ 'Rank' ] 도 해보고, 

  그냥 아예 STATICFILES_DIRS와 STATIC_ROOT은 관계 없어야 하나? 싶어서

  STATICFILES_DIRS = [BASE_DIR + '/external_static/']

  으로 두고 프로젝트 root에 external_static이라는 폴더도 만들어줘봤는데 이미지 증발 현상은 여전했다.
  이론적인 원인을 찾아봐야 할듯.