TIL#10

아직·2022년 8월 24일
0

Django Toy Project

목록 보기
10/13
post-thumbnail

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>

0개의 댓글