[Django] 튜토리얼6. 정적 파일(Static files)

이 글은 장고 공식 홈페이지의 튜토리얼을 번역하고, 직접 실습하는 과정을 정리합니다.

다섯 번째 튜토리얼(https://scshim.tistory.com/598)과 이어지는 여섯 번째 글입니다.

 

서버에서 생성한 HTML 외에도 웹 애플리케이션은 일반적으로 전체 웹 페이지를 렌더링하는 데 필요한 추가 파일(이미지, 자바스크립트, css 등)을 제공해야 한다. 장고에서는 이러한 파일을 정적 파일(static file)이라고 한다.

 

소규모 프로젝트의 경우 웹 서버가 찾을 수 있는 위치에 정적 파일을 보관할 수 있기 때문에 큰 문제가 없다. 그러나 여러 앱으로 구성된 더 큰 프로젝트에서는 각 애플리케이션에서 제공하는 여러 정적 파일 세트를 처리하는 것이 까다로워진다.

 

django.contrib.staticfiles로 이 문제를 해결할 수 있다. 서로 다른 위치에 있는 각 애플리케이션은 정적 파일을 프로덕션에서 쉽게 제공할 수 있는 단일 위치로 수집할 수 있게 된다.

 

앱 수정하기

먼저 polls 디렉터리에 static이라는 디렉터리를 만든다. 장고는 polls/templates/ 내부에서 템플릿을 찾는 것과 유사하게 정적 파일을 찾는다.

 

장고의 STATICFILES_FINDERS 설정에는 다양한 소스에서 정적 파일을 검색하는 방법을 알고 있는 파인더 목록이 포함되어 있다. 기본값 중 하나는 앞서 생성한 polls 앱에서와 같이 각 INSTALLED_APPS에서 정적 하위 디렉토리를 찾는 AppDirectoriesFinder이다. 어드민 사이트는 정적 파일에 대해 동일한 디렉토리 구조를 사용한다.

 

방금 만든 static 디렉터리 내에 polls라는 다른 디렉터리를 만들고 그 안에 style.css라는 파일을 만든다. 즉, 스타일시티는 polls/static/polls/style.css에 존재한다.

AppDirectoriesFinder 정적파일 파인더가 작동하는 방식 때문에 템플릿 경로를 참조하는 방법과 유사하게 장고에서 정적 파일을 polls/style.css로 참조할 수 있다.

 

장고와 정적 파일 네임스페이스 템플릿 처럼 또 다른 polls 하위 디렉터리를 생성하는 대신에 정적 파일을 poll/static에 직접 넣을 수 있지만, 이는 나쁜 방법이다. 장고는 이름이 일치하는 첫 번째 정적 파일을 선택한다. 즉, 다른 애플리케이션에 같은 이름의 정적 파일이 있는 경우 장고는 이 파일을 구별할 수 없다. 장고가 올바른 정적 파일을 가리킬 수 있어야 하며 이를 보장하는 가장 좋은 방법은 네임스페이스를 지정하는 것이다. 즉, 정적 파일을 응용 프로그램 자체에 대해 명명된 다른 디렉터리에 넣는다.

 

스타일 시트(polls/static/polls/style.css)에 다음 코드를 입력한다.

li a {
    color: green;
}

 

다음으로 polls/templates/polls/index.html 파일 상단에 다음 코드를 추가한다.

{% load static %}

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

 

 

- {% static %} 템플릿 태그는 정적 파일의 절대 URL을 생성한다.

 

다음으로 서버를 재실행한다.

$ python manage.py runserver

 

http://127.0.0.1:8000/polls/를 다시 로드하면, 질문 링크가 녹색으로 표시되어 스타일시트가 제대로 로드되었음을 의미한다.

 

백 그라운드 이미지 더하기

 

이미지를 위한 하위 디렉터리를 생성한다. polls/static/polls/ 디렉터리에 images 서브디렉터리를 생성하고, background.gif라는 이름의 이미지를 넣는다.

 

다음으로 스타일 시트(polls/static/polls/style.css)에 다음 코드를 입력한다.

body {
    background: white url("images/background.gif") no-repeat;
}

 

http://127.0.0.1:8000/polls/를 다시 로드하면, 백그라운드가 스크린 상단 왼쪽에 로드된걸 확인할 수 있다.

주의사항 {% static %} 템플릿 태그는 스타일시트와 같이 장고에서 생성되지 않은 정적 파일에서 사용할 수 없다. 정적 파일의 여러 경로를 수정하지 않고도 STATIC_URL을 변경할 수 있기 때문에 항상 상대 경로를 사용하여 정적 파일을 서로 연결해야한다. - STATIC_URL: 정적 템플릿 태그가 URL을 생성하는데 사용

 

TODO: 심화 학습 내용

- the static files howto

- the staticfiles reference

- Deploying static files