Skip to content

Latest commit

 

History

History
106 lines (86 loc) · 3.22 KB

5장.md

File metadata and controls

106 lines (86 loc) · 3.22 KB
Raw

5장 기존 앱 개선하기 - Bookmark 앱, Blog 앱

개요

  • 4장에서 프로젝트의 첫 페이지를 만들면서 사이트 전체의 윤곽을 잡음
  • GNB(Global Navigation Bar)에 해당하는 공통 메뉴도 만듦
  • 전체 윤곽을 잡기 위해 base.html을 만들었는데, 이를 이용하여 기존 앱 템플릿을 수정함

5.1 기존 앱 개선 설계하기

  • 첫 페이지의 메뉴에서 애플리케이션을 클릭해 해당 애플리케이션의 첫 페이지로 이동하는 기능을 만듦
  • base.html을 상속받아 첫 페이지의 룩앤필을 가져옴

5.1.1 화면 UI 설계

  • 첫 페이지에서 링크 클릭 시 해당 애플리케이션으로 이동함

5.1.2 테이블 설계

  • UI변경에 따른 템플릿 파일만 영향을 받고, 테이블 변경 사항은 없음

5.1.3 URL 설계

  • UI변경에 따른 템플릿 파일만 영향을 받고, URL 변경 사항은 없음

5.1.4 작업/코딩순서

  • 뼈대 만들기
    • startproject
    • settings.py
    • migrate
    • createsuperuser
    • startapp
    • settings.py
  • 모델 코딩하기
    • models.py
    • admin.py
    • makemigrations
    • migrate
  • URLconf 코딩하기
    • urls.py
  • 뷰 코딩하기
    • views.py
  • 템플릿 코딩하기
    • templates 디렉터리
      • base.html 파일의 메뉴 링크 수정
      • home.html 파일의 링크 수정
      • 북마크 앱의 템플릿 파일들 수정
      • 블로그 앱의 템플릿 파일들 수정
  • 그 외 코딩하기
    • 없음

5.2 개발 코딩하기

  • 템플릿 코딩 작업만 하면 됨

5.2.1 뼈대 만들기

  • 해당 없음

5.2.2 모델 코딩하기

  • 해당 없음

5.2.3 URLconf 코딩하기

  • 해당 없음

5.2.4 뷰 코딩하기

  • 해당 없음

5.2.5 템플릿 코딩하기

base.html 수정

  • 모든 페이지에 공통으로 나타나는 파일임
  • a tag의 href 속성을 수정하여 클릭 시 적절한 링크로 이동하도록 수정

home.html 수정

  • 테이블에서 a tag의 href 속성을 수정하여 클릭 시 적절한 링크로 이동하도록 수정

bookmark_list.html 수정

{% extends "base.html" %}

{% block title %}Django Bookmark List{% endblock %}

{% block content %}
<div id="content">
    <h1>Bookmark List</h1>

    <ul>
        {% for bookmark in object_list %}
            <li><a href="{% url 'bookmark:detail' bookmark.id %}">{{ bookmark }}</a></li>
        {% endfor %}
    </ul>
</div>
{% endblock %}
  • {% extends "base.html" %}: base.html 템플릿 파일을 상속 받음 {% extends %} 템플릿 태그는 반드시 첫줄에 와야함
  • {% block title %}: title 블록을 재정의함
  • {% block content %}: content 블록을 재정의함

다음 파일들도 이와 같이 base.html을 상속받아 수정함

  • bookmark_detail.html
  • post_all.html
  • post_detail.html
  • post_archive.html
  • post_archive_year.html
  • post_archive_month.html
  • post_archive_day.html

5.3 지금까지의 작업 확인하기

  • 링크 클릭 시 애플리케이션 링크로 이동 됨
  • Admin 사이트 첫 페이지가 다르게 나오는 이유
  • Admin 사이트의 템플릿은 우리가 작성한 base.html 템플릿을 상속받지 않음
  • 장고가 제공하는 Admin 사이트의 base.html을 상속받음