django의 template 작성하기

클라이언트(웹 브라우저)에서 우리에게 보여주는 화면은 무엇으로 구성되어 있나요?

우리가 클라이언트를 통해서 보는 화면은 html 태그로 만들어져 있습니다. 웹브라우저는 html을 사용하기 때문이죠. 그러니 우리가 만드는 웹 어플리케이션의 응답도 이러한 html로 구성되어야 합니다. 그래서 이 응답을 받은 클라이언트가 받은 응답을 해석해서 우리에게 보여주는 것입니다. 

템플릿 폴더 생성하기

위의 상황처럼 응답에 사용할 html 파일을 템플릿이라고 합니다. 이러한 템플릿은 어디에 위치해야할까요?

"앱폴더 > templates > 앱폴더 > 템플릿 파일" 형태로 되어야 합니다. 

즉 우리 튜토리얼의 경우엔 reading 폴더 밑에 templates라는 폴더를 만들고, 다시 templates 폴더 안에 reading이라는 폴더를 만든 후에 템플릿 파일들을 만드는 것입니다. 이렇게 만드는 이유는 장고의 경우에 각 앱들의 템플릿 폴더들을 모으는 행동을 하는데 이 때 이렇게 폴더이름으로 구분하지 않으면 사용해야할 템플릿 파일을 헷갈릴 수 있기 때문입니다. 그래서 앱 폴더 이름으로 구분해주는 것입니다.

base.html 만들기

템플릿의 경우 중복되는 부분이 많이 있습니다. head 태그 사이의 내용이나 네비게이션의 경우엔 다 똑같은 코드로 구성되어 있을 가능성이 많죠. 그러한 부분은 공통적으로 작성하고, 바꿔야 될 부분만 고쳐가며 바꿀 수 있다면 시간도 줄이고, 코드고 줄이고, 눈에 보기도 쉽고, 수정도 쉬울 것입니다. 그래서 base.html 같은 기본 템플릿이 있고, 이를 확장해서 내용만 바꿀 수 있습니다.

공통적으로 적어야하는 부분들을 정의했습니다. 주의할 점은 {% block title %}{% endblock %}과 {% block content%}{% endblock %} 입니다. 이것은 블록을 형성해서 base.html을 확장한 템플릿을 경우에 이 블럭 부분만 바꿔서 작성할수 있게 해줍니다. 

블럭 사이에 내용이 있으면 기본값입니다. 만약 블럭을 정의하지 않으면 기본값으로 보여집니다.

템플릿 확장하기

템플릿을 확장할 때는 {% extends %}를 사용하면 됩니다.

base.html의 위치를 'reading/base.html' 이라고 지정한 것을 잊지마세요. 앱 폴더 안에 템플릿 폴더를 만들고, 다시 앱 이름의 폴더를 만든 뒤에 base.html을 넣었었습니다.

{% block content %}{% endblock %} 사이에 바꿀 내용을 넣으면 블럭이 교체되서 나타납니다. 타이틀 블럭의 경우 따로 지정하지 않았기 때문에 기본값이 들어가게 됩니다. 템플릿 문법은 간단합니다. html 태그의 경우 그대로 사용하시고, 전달된 변수 값을 사용할 때는 {{ }} 사이에 넣어주시면 됩니다. {{data.book_num}}과 {{data.Wisesaying_num}}을 사용한 형태처럼 말이죠. 기본적으로는 {% %} 사이에 템플릿 문법을 정의합니다. 파이쎤 문법과 비슷하지만 ()을 붙이지 않는 다는 것도 잊지마세요.

{% url 'url name' %} 형태 더 알아보기

{% url %} 형태는 아주 많이 보여지는 형태로 url 링크를 가져옵니다. 링크니 <a> 태그와 함께 많이 사용하겠죠? 좀 더 형태를 풀어서 설명하면, {% url %}은 url의 절대주소를 갖고 옵니다. 그리고는 url의 이름을 써줍니다. url을 정의할 때 path에 name='url 이름'을 정했었습니다. 그 이름을 사용하는 것입니다. 위의 코드에서 "보러가기"는 "localhost:8000/reading/book"로 연결합니다. "reading:" 부분은 앱의 이름을 나타냅니다. urls.py 파일을 보시면 app_name = "reading"이라고 작성해둔 것이 보이시나요? 그 부분을 넣어준 것입니다. app_name을 지정해두면 네임 스페이스가 형성된다고 이전 포스팅에 언급한 적이 있었습니다. 네임 스페이스를 형성했기 때문에 다른 url들과 헷갈리지 않고 잘 찾아갈 수 있는 것입니다.

book_list.html 만들기

책의 리스트를 보여주는 템플릿 코드를 우선 봐주세요.

우선 {% url %} 형태를 다시보시면 content.pk가 추가되었습니다. 이는 해당 url에 <int:pk>의 형태로 값을 전달 받아야 하기 때문입니다. 그래서 content에 있는 pk값을 전달한 것입니다. 

두번째로는 {% for content in book.wisesaying_set.all %}을 봐주세요.

book과 wisesaying은 1:N의 관계를 맺고 있습니다. wisesaying에서 책의 정보를 보려면 어떻게 해야할까요? book이라는 속성이 정의되어 있으니 wisesaying.book 이라고 하면 그 글귀가 어떤 책에 있는 지 알 수 있습니다. 하지만 Book 클래스의 경우엔 어떤가요? 그 책에 어떤 글귀들이 있는 지 속성으로 따로 정의하지 않았기 때문에 확인할 방법이 없습니다. 그래서 장고는 이럴 경우에 확인할 수 있도록 편의를 제공해줍니다. 그게 "book.wisesaying_set"의 형태인 것이죠.

관계가 있는 모델의 경우 "모델_set"의 형태로 데이터를 확인할 수 있습니다.

해당 템플릿의 경우엔 변수의 이름(컨텍스트), 파일의 이름 등은 뷰에서 정의하지 않고 자동으로 정해졌습니다. {{ object_list }}를 사용할 수 있는 이유는 그 때문이죠.

템플릿 필터

코드에 {{ content|truncatechars:30 }} 부분이 보이시나요? 이는 템플릿 필터를 사용한 모습입니다. content의 글자수를 파악해서 30자 이상이면 "..."으로 나머지 부분을 나타내도록 만들었습니다.

템플릿 필터 부분 확인하기

긴 텍스트의 경우 ...으로 표현된 것이 보이시나요? 이처럼 템플릿 필터를 통해서 여러가지 기능을 실행할 수 있습니다.

장고 문서에서 템플릿 필터 더 보러가기

{{ 변수|템플릿 필터 }}의 형태로 보통 사용하며 |은 보통 키보드에서 백스페이스와 엔터 사이에 있습니다. \을 컨트롤과 함께 누르면 "|"이 됩니다.

wisesaying_detail.html 파일의 경우엔 아주 간단해서 코드가 공유하겠습니다. 템플릿을 만들 때 자주 사용하는 부분들을 다 설명하니 내용이 조금 길어졌습니다. 혹시 이해가 되지 않는 부분이 있다면 꼭 댓글 남겨주세요.

템플릿을 만들고 템플릿이 보이지 않으면 ctrl + c를 눌러서 장고를 다시 실행해주세요.