15. 템플릿 모듈화

  웹사이트의 디자인을 일관적으로 유지하거나 수정하고자 할 때 반복적인 요소들을 관리하기 용이하게 하고자 할 때 모듈화를 사용하게 된다. 웹 사이트에서 유지되어야 하는 요소들을 모듈화 해보도록 하겠다.

 

● 메인 영역 모듈화

 

post_list.html 모듈화

 

base.html 추가

  blog 폴더에 base.html 파일을 추가하고 main_area의 div 요소들을 삭제한 후 main_area 라는 이름의 block블록을 선언하고 endblock으로 블록의 끝을 설정해 준다. 

 

base.html을 확장해 post_list.html 넣기

  사이드 바, 푸터 등은 어느 페이지 에서나 쓰일 것이고 base.html에 관련 코드가 있으므로 중복을 방지하기 위해 post_list.html파일에서 main-area를 제외한 코드를 삭제하고 extends로 base.html의 main-area를 제외한 부분을 담당하도록 하고 main-area라는 이름의 block을 선언하고 endblock으로 범위를 정한다.

post_list.html 파일에서의 {% block main-area %} 부터 {% endblock %}의 범위에 속한 코드들이 base.html에서 입력한 {% block main-area %} 부터 {% endblock %} 부분에 들어가게 된다고 이해하면 된다. 

 

수정 결과 확인

  어째서? 실패? 

  내비게이션 바의 Blog를 찾지 못했다고 하는데 이미 삭제해서 당연히 없어야 하고 내비게이션과 관련된 코드들은 전부 base.html에 있으므로 뭔가 잘못된 입력으로 base.html에서 부터 extends 가 제대로 안 된 모양이다... 한참을 눈빠지게 잘못 입력된 부분을 찾아 봤더니 역시나 오타로 인한 헤프닝 이였다. 

  작은 따옴표가 잘 못 입력되어서 base.html을 인식하지 못 한 모양이다. 

편-안

 

 

post_detail.html 모듈화

 

base.html을 확장해 post_detail.html 넣기

  post_list 와 같이 post_detail의 주요 부분만 남겨두고 나머지는 삭제 후 extends 명령어로 주요 부분 이외의 부분을 불러오고 block 과 endblock으로 범위를 지정해 준다.

 

제목 블록을 따로 만들기

  test 돌리면 tests.py파일의 72번 째 줄인  self.assertIn(post_001.title, soup.title.text)의 코드 테스트를 통과하지 못했다고 한다. 당연하게도 웹 브라우저의 위쪽 탭에 첫 번째 포스트의 제목이 나오도록 한 적이 없기 때문에 생긴 일이다. 먼저 post_detail에 다음의 코드를 추가한다.

 

  그 후 base.html에 다음의 코드를 추가한다.

 

 

post_detail.html에 포스트 영역과 댓글 영역 구분

  이전에 아직 구현하지 못한 테스트 코드 2.6번을 구현하여 포스트 영역과 댓글 영역을 구분해 테스트를 통과 할 수 있도록

id="post-area", id="comment-area"로 영역을 나눈다.

 

  무사히 테스트가 통과된다. 

 

 

● 네비게이션 바와 푸터 모듈화

 

내비게이션 바 버튼에 링크 추가

 

테스트 코드 작성

  내비게이션 바 버튼에 링크를 추가하기 전에 TDD의 방식에 따라 먼저 테스트 코드를 작성한다. 내비게이션 바를 테스트 하는 함수명은 navbar-test로 하고 beautifulsoup에 의해 파싱된 html 효소를 navbar_test() 함수에 받아내기 위해 함수의 매개변수를 soup로 한다.

 

  간결한 코드를 위해 중복되는 요소를 삭제하고 self.navbar_test(soup)입력으로 해당 함수에서 테스트를 진행하도록 한다.

 

 

내비게이션 바 버튼의 href 링크 테스트 코드 입력

  navbar_test() 함수에 내비게이션의 href 링크가 정상적으로 동작하는지 확인을 위한 테스트 코드를 만들어본다. logo_btn, home_btn, blog_btn, about_me_btn에 navbar.find를 이용하여 각각 Do It Django Home과 같은 문구를 가진 'a'

라는 요소를 찾아 각각의 변수에 담는다. 또한 a 요소에서 href 속성값이 '/' 혹은 '/blog' 인지 확인 후 일치하면 테스트를 통과하도록 한다. 

 

  테스트 코드를 통과 할 수 있도록 post_list 와 post_detail의 공통적 요소를 담고 있는 base.html파일의 navbar 요소를 알맞게 수정하도록 한다.

 

include로 내비게이션 바와 푸터 모듈화

  디자인의 통일성을 위해 base.html 파일의 <nav>, <footer> 같은 태그를 따로 관리할 수 있도록 Django에서 제공하는 include를 사용하여 HTML을 요소별로 분할해 관리하고 불러오도록 한다.

 

내비게이션 바를 navbar.html로 모듈화

  기존의 main-area 영역을 제외한 전 영역을 base.html 파일에다가 모듈화 하였지만 여기서 navbar, footer 요소들을 또 따로 navbar.html파일을 만들어 모듈화 한다. 

 

  bast.html파일에서 nav 영역과 modal 영역을 navbar.html로 옮긴 후 삭제하고 {% include 'blog/navbar.html' %}로 navbar.html에서 해당 코드를 불러올 수 있도록 한다.

 

푸터를 footer.html로 모듈화

  footer를 모듈화 하여 관리하기 위해 별도의 footer.html파일을 만든 후 관련된 코드를 옮긴다. base.html파일에는 {% include 'blog/fooster.html' %}로 필요시 모듈화된 footer.html을 불러온다.