템플릿을 모듈화하는 이유

위의 이미지는 2월 21일 기준 제 블로그의 헤더 부분입니다. 이 블로그의 어떤 포스트로 들어가던, 위의 헤더 부분은 변함없이 유지됩니다.

만약, 제가 위의 로고 사진을 변경하고 싶다면 어떻게 하면 될까요? 첫 번째로 떠오르는 아이디어는, 포스트의 헤더 부분을 담당하는 html 코드 부분을 수정하는 것입니다. 현재 기준으로 저의 블로그에는 약 80개 가량의 포스트가 있는데, 홈 페이지를 비롯한 모든 포스트의 html 코드를 하나하나 수정하는 것은 바보같은 짓이겠죠. 만약 포스트가 더 늘어난 시점, 예컨대 1천 개의 포스트가 있었다면 모든 html 코드를 수정하는 것은 더 오래 걸릴 것이고, 그것보다 더 큰 규모의 사이트라면 훨신 더 오래 걸릴 겁니다.

그렇기에 우리는 템플릿 모듈화라는 방법을 사용할 것입니다. “헤더” 부분을 담당하는 코드를 작성해 두고, 각각 변하는 내용만 제외하고 (예컨대, 포스트의 내용은 포스트마다 모두 다르죠.) 모든 포스트에 “헤더” 를 추가해 주는 방식을 사용하면 됩니다. 이런 방식을 사용한다면 공통 부분을 담당하는 “헤더” 부분만 수정해 주면 1천 개의 모든 포스트에, 더 많이 나아가 포스트가 1억 개가 된다 하더라도 모든 헤더 부분이 바뀔 겁니다.

base.html 만들고 블록 지정하기

{% block main_area %}
{% endblock %}

첫째로, base.html 을 만들고 그 안에 공통 부분이 될 것들을 채워넣습니다. 그 후 바뀔 부분을 main_area 라는 블록으로 지정해 주었습니다. 공통 부분을 제외하고 바뀔 부분이 들어갈 공간에 위의 코드를 작성해 주면 됩니다.

위의 이미지에서 중간에 블록 코드({% block main_area %} {% endblock %})가 들어간 부분에 포스트의 내용, 혹은 포스트 리스트 등의 내용이 들어갈 겁니다.

base.html 을 확장해 list,detail 페이지 만들기

토대가 되는 base.html 을 만들었으므로 그것을 확장해서 페이지를 완성시켜 봅니다. base.html 안에 있는 main_area 라는 블록이 페이지의 내용을 결정하겠죠. 그러면 리스트, 디테일 페이지에서 base.html 을 확장해 만들었다는 것을 알려주고, main_area 블록의 내용이 무엇인지 알려주면 됩니다. 그것을 템플릿에 코드로 작성해 보겠습니다.

먼저, list,detail 페이지 템플릿의 첫 줄에

{% extends 'blog/base.html' %}

을 작성해 줍니다. “base.html을 확장해 만든 템플릿이다” 라는 것을 알려줍니다.

둘째로, 내용이 될 부분을 {% block main_area %} 와 {% endblock %} 으로 감싸 줍니다. “main_area 가 될 부분은 바로 이 부분이다” 라는 것을 알려줍니다.

위의 작업을 통하여 템플릿 모듈화를 할 수 있습니다. 예컨대 또 다른 모듈화를 제목 부분에서 해 보겠습니다.

<title>{% block head_title %}Blog{% endblock %}</title>

base.html 의 위의 부분을 {% block head_title %} 이라는 템플릿 태그로 감싸 주었는데, 이 경우에는 base.html 을 확장해 만든 템플릿에서 head_title 라는 블록이 없을 경우 기본값이 감싸진 값으로 정해지게 됩니다.

navbar, footer 분리

마찬가지로 푸터와 네비게이션 바를 모듈화했습니다. base.html에 각각 {% include 'blog/navbar.html' %} , {% include 'blog/footer.html' %} 코드를 삽입함으로서 모듈화한 헤더와 푸터를 사용할 수 있습니다.