1)
{% load bootstrap4 %}
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title> Instagram / Item List </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>bootstrap4 javascript cdn 버전을 css 아래 추가해주었다.
"Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript."
위와 같이 bootstrap의 javascript는 jquery가 필요하다는 문구가 발생하므로 jquery cdn 버전 역시 css와 js 사이에 넣어주었다.셋 중 css 같은 경우는 bootswatch 등에서 테마를 변경할 수 있다.
2)
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>
{% block title %}
{% endblock title %}
</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous">
</script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous">
</script>
</head>
<body>
{% block content %}
{% endblock content %}
</body>
<html>"item_list.html"의 html, css, javascript 환경을 "item_detail.html"에서는 사용할 수 없기 때문에 상속을 위한 "layout.html"을 만들어주고 하위 템플릿에서 {% extends "gallery/layout.html" %} 명령어로 상속해주고 {% load bootstrap4 %}, {% block %}/{% endblock %} 등 공통되지 않는 부분을 처리해주었다.
3)
static 파일을 관리하기 위해서 gallery 앱/ static/gallery 구조를 만들어주었다.
프로젝트 차원에서 사용하는 bootstrap 같은 static 파일은 settings.STATICFIELS_DIRS와 위치시킨다. 템플릿의 경우와 유사하다고 볼 수 있다.
STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') STATICFIELS_DIRS = [ os.path.join(BASE_DIR, 'opengallery', 'static'), ]기존 STATIC_URL만 있던 부분에 STATIC_ROOT와 STATICFILES_DIRS를 추가해주고 opengallery 앱 아래 static 폴더를 만들어주었다.
4)
STATIC_ROOT 부분이 주목할만한데 media에는 없던 "python manage.py collectstatic" 명령어가 핵심이다. 프로젝트와 앱의 static 폴더에 나눠져있는 파일들은 한 곳에 모아주기 때문이다.(그렇지 않고 django에서만 기억한다면 서비스가 곤란할 것이다.) 그러므로 개발시가 아닌 배포시에 의미있는 명령어이다.
5)
템플릿에서 bootstrap을 사용할 때처럼 {% load static %} 명령어로 STATIC_URL 주소를 가져올 수 있다.
<img src="/static/blog/title.png" />와 같은 하드코딩이 필요 없는 것이다.
개발 환경에서만 제공되는 static 파일 서빙은 예를 들면
opengallery/static/main.css해당 경로일 때 "localhost:8000/static/main.css"로 접근이 가능한데 전자는 STATICFILES_DIRS의 설정값인 반면, 후자는 STATIC_URL의 설정값이다.
그러므로 URL을 통해 파일 시스템에 직접 접근하는 것이 아니라, 지정 이름의 static 파일을 finder로 추적해서 응답을 읽어오는 것이다.
6)
컴파일된 css, js 폴더와 jquery STATICFIELS_DIRS에 정의된 static 폴더 아래로 옮겨주고 'layout.html'의 cdn 부분은 지워주고 다음으로 대체했다.
<link rel="stylesheet" href="{% static 'bootstrap-4.4.1-dist/bootstrap-4.4.1-dist/css/bootstrap.css' %}"> <script src="{% static 'jquery-3.6.0.min.js' %}"></script> <script src="{% static 'bootstrap-4.4.1-dist/bootstrap-4.4.1-dist/js/bootstrap.js' %}"></script>
