1. Static의 개념
웹 서비스 내부 데이터는 Static과 Media로 이루어진다.
Static은 미리 준비된 데이터를 의미한다.
css, javascript, image file 등
Media는 사용자에 의한 데이터.
예를 들어 Google 검색창의 Google 이미지나 검색창 위치 등은 Static file이다.
장고에서는 settings.py에서 3가지 부분을 통해 static file을 관리한다.
1) STATICFILES_DIRS
static file들의 경로를 작성하는 부분
2) STATIC_URL
웹서비스를 배포할 때,특정 폴더에 static파일들을 복사하여 모아두는 경로.
STATIC_ROOT = os.path.join(BASE_DIR, 'statifiles')이렇게 작성하면 static file들은 모조리 staticfiles라는 폴더 안에 들어가게 되는 것.
참고로 배표를 할 때 static file들을 한 폴더에 모으는 편리한 명령어도 있다.
python manage.py collectstatic3) STATIC_ROOT
static file을 제공할 url을 적는 부분.
2. Static 실습
1) static 사용을 위한 기본설정
staticapp이라는 새 app을 만들고 settings.py에 추가한 다음, 전체 urls.py에 from staticapp import views를 넣고, path를 추가하고('static/') 함수 home을 실행시키도록 하며, staticapp의 views.py에 들어가 home이라는 함수를 만들고, 그 Home이라는 함수는 home.html을 렌더하게 만들고, 실제로 staticapp에 templates 폴더를 만들어 그 안에 home.html 파일을 생성하였다. 그 안에는 html-5을 탭을 이용해 자동완성하였고 head태그와 body태그만 조금 바꾸어 두었다.
이후로는 settings.py에서 세부설정을 진행한다.
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / 'static'
]*참고로 장고에서 최상단에 위치한 폴더를 베이스 디렉토리라고 함.
베이스 디렉토리 밑에 있는 static이란 이름의 폴더가 staticfiles의 directory가 되겠다는 뜻이다.
물론 나중에는 static 폴더 안에 또다시 Img, css, javascript 폴더들을 더 만들어서 구분해 담곤 한다.
2) static file들을 html문서로 불러오기
(1) CSS 적용하기
다음은, static file들을 html로 불러오는 방법이다.
다음의 코드로 우리는 static 파일들을 불러올 수가 있으며, 중괄호와 퍼센트로 감싸진 부분들을 장고에선 템플릿 언어라 한다. html 문서에서도 장고의 기능을 작동시키려 할 때 쓰인다.
{% load static %}다음으로 head태그에 css와의 연동이 필요하다. 원래 html이었으면 그냥 썼어도 되겠지만, static에 있는 것을 들고 와야 하기 때문에 템플릿 언어로 감싸서 사용한다고 보면 된다. static폴더 아래에 있는 css폴더 아래에 있는 style.css 파일을 사용한다는 의미.
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">[발생한 첫 번째 오류]
되게 중요한 오류 하나를 발견했는데, 강의에서는 새로 뒤엎고 staticapp만 만들어서 진행하지만, 나는 원래 하던데에다 staticapp을 추가해서 진행하려다가 생긴 오류이다. 아무래도 무조건적으로 include를 사용하는 것이 좋을 듯 한데, 그 이유는 import views가 두개이기 때문이다. 하나는 Myapp에서, 나머지 하나는 staticapp에서 불러오는데 이게 충돌을 일으키는지 자꾸만 다음과 같은 오류가 났다.
AttributeError: module 'staticapp.views' has no attribute 'first'<오류버전>
from django.contrib import admin
from django.urls import path, include
from myapp import views
from staticapp import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.first),
path('second/', views.second),
path('products/', include('product.urls')),
path('boards/', include('board.urls')),
path('static/', views.home),
]<오류 수정버전>
from django.contrib import admin
from django.urls import path, include
from myapp import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.first),
path('second/', views.second),
path('products/', include('product.urls')),
path('boards/', include('board.urls')),
path('static/', include('staticapp.urls')),
][발생한 두 번째 오류]
수행하다가 또 하나의 오류로 고생을 좀 했는데, 'static/'이란 경로를 써 놓으니 아마 BASE_DIR 바로 밑에 있는 static 폴더와 혼동이라도 되는 걸까요...? static을 statics로 고치자 문제가 말끔히 해결되었습니다. 참고로 오류 메시지는 다음과 같습니다.
<오류버전>
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.first),
path('second/', views.second),
path('products/', include('product.urls')),
path('boards/', include('board.urls')),
path('static/', include('staticapp.urls')),
]<오류 수정 버전>
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.first),
path('second/', views.second),
path('products/', include('product.urls')),
path('boards/', include('board.urls')),
path('statics/', include('staticapp.urls')),
](2) 이미지 파일 불러오기
전체 home.html 문서의 코드는 다음과 같다.
img태그를 잘 보면 템플릿 언어로 작성된 것을 볼 수 있다.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
<title>Static Practice</title>
</head>
<body>
<div>Hello Static!!</div>
<img src="{% static 'img/DSC02739.jpg' %}" width="50%">
</body>
</html>코드가 실행된 결과를 보면, CSS가 잘 적용되어 Hello Static!!이 가운데 정렬되어 있고, 이미지도 잘 띄워져 있는 것을 알 수 있다.
그런데, 한 가지 app 안에서만 사용할 static file들을 앱 내부에서 관리하면 안되는 걸까??
아닙니다. 가능합니다.
예를 들어 staticapp 내부에 static이라는 폴더를 만들었다면 다음의 코드를 통해 실현가능합니다. 우선 os를 import해준 후에, os.path.joing을 이용하면 됩니다. 1년 전까지만 하더라도 장고는 후자의 방식을 훨씬 더 많이 사용했었다. 다른 사람의 장고 파일을 보더라도 당황치 말라고 적어 둔다.
import os
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / 'static',
os.path.join(BASE_DIR, 'staticapp', 'static'),
]마지막으로 STATIC_ROOT에 관한 이야기.
다음의 코드와 같이 적어두고
STATIC_ROOT = os.path.join('staticfiles')다음의 코드를 터미널에 적어넣으면 자동으로 staticfiles라는 폴더가 형성되며 안에 모든 static file들이 담긴다.
python3 manage.py collectstatic