2020.09.02_django_template 상속

2020.09.02_django_template 상속 정리노트

 

오늘은 CRUD 프로젝트와 이어지는 내용은 아니고, 새 프로젝트를 만들면서 생각한 내용!

 

혼자 프로젝트 생성하다가 너무 우당타앝ㅇ 이지만.. 생각보다 오늘 내용은 간단할 예정.. 내가 이해하는데 오래걸렸음... 코린이가 그렇지뭐.. 최대한 내가 이해한만큼 쉽게 정리해보려함!

 

 

먼저 template 상속이란?

 

 template 상속

란 우리가 html 을 만들면서 겹치는 내용들이 생긴다. 그럴때마다 복붙해서 똑같이 태그를 붙이지 않고, 아예 픽스 된 내용을 base.html ( 범용적으로 base 라고 이름 붙임. ) 에다가 저장해주고, 상속을 통해 쉽게 가져올 수 있는 기능.

 

 

템플릿 상속을 통해 코드를 정리할 수 있고 그때마다 유용하게 쓸 수 있다. 물론 상속할 내용은 전부 가져오되, 수정할 수도 있으니 유용한 기능이라고 할 수 있다! 

 

오늘 내가 상속할 내용은 바로 네비바다! 위에 카테고리를 적어놓는 바인데, 항상 띄워줘야하니 그때마다 html 태그를 복붙하기 보단 상속을 이용하면 쉽게 가져올 수 있다. 

 

일단 base.html 을 앱 안에 만들어주었다. ( 어떻게 보면 프로젝트 만들고, 앱 만들고... 여러모로 이어지는 내용이 생각보다 많네 열어분 모른다면  CRUD_1 포스팅으로 갑씨다.. ) 

 

 

 

 

이렇게 base.html 에서 네비바 작업을 해봤는데, 처음에 그냥 막 부트스트랩으로 가져오고 난리부르스를 추다가 그냥 간단하게 html 에서 만드는 방법이 나쁘지 않기도하고..^^ 예..제가 그냥 못불러와서 그런거 같으므로 나는 직접 ul 과 li 를 이용하고 a 태그로 링크를 걸어준 뒤 css 를 입혀주었다... 이것도 사실 오래걸렸다..... html , css 넘모 어려워..........

 

 

간단하게 nav 태그로 만들고 css 를 만져주었다 어케 생겼을까...

 

예...^^ 제가 오늘 만든 것은 이게 답니다... 어휴 어휴 다음에 css 제대로 배워서 오게씀... 그냥 무시하고 네비바가 어케 생긴지만 보고 우리는 저 네비바를 홈화면과 같이 다른 화면으로도 넘어갈 때마다 저걸 계속 복붙 안하고 상속을 통해 받아와보게씀미다 껄껄

밑의 내용들은 index 에서 따로 적어준 내용이고, 우리가 가져올 내용은 네비바만 임미다!

 

 

 

base.html 전체를 봅씨다

 

 

base.html

 

흠 .. 이렇게 보니 꽤나 복잡하다. 그냥 근데 딱 정리하자면, 우리가 base.html ( 다른 템플릿에서도 적용할 내용들) 을 부모 템플릿이라고 부르는 데, 이 부모 템플릿을 자식 템플릿 ( 여기서는 내가 적용해볼 index, create.html  ) 에다가 반영할 것들과, 수정해줄 내역을 정리해준 것이라고 볼 수 있다.

 

그것들을 지금 block 으로 감싸준 모습들인데, 보면  {% block title %} , {% block content %} 은 블럭 안에 내용이 비어 있고, 나머지는 가져올 기본 내용들이 채워져 있다. 사실 이미 기본으로 적어줄 내용들은 block 태그로 적어주지 않아도, 알아서 잘 가져온다.

하지만, 우리가 기본 내용들을 자식 템플릿에서 뽑아 쓸 수 있기 때문에 웬만하면 block 태그를 적어주는 것을 다들 추천하더라!!

그리고 우리가 끝낼 때 {% endblock %} 을 써주는 데, 뒤에다가 각자의 태그 이름을 적어준 것은 {% endblock title %} 처럼 그냥 나중에 내가 구별하기 쉬우라고 적어준 주석과 같다. 

 

 

이게 뭔말인가 싶겠지만 적용된 자식 템플릿인, index.html 로 가봅씨다

 

 

 

index.html

 

 

 

짝짝 이렇게 불러와줬는데요. 보면 많은 html 태그가 생략된 것이 보일 겝니다. 왜냐하면 우리가 이미 나머지 태그들은 base.html 에다가 적어줬기 때문이지

 

어떻게 불러와줬느냐면, 바로 최상단에 있는 {% extends 'base.html' %} 태그로 우리는 부모 템플릿을 자식 템플릿으로 불러와줄 수가 있다. 이 태그는 {% load static %} 보다도 위에 무조건 최상단에 써줘야 한다.

자 보면 우리가 아까 비워줬던 block title, block content 가 여기 자식 템플릿에서 채워줬다. 그리고 정 복잡하면 이렇게 보면 된다.

 

 

다시 base.html을 봐보자.

 

 

base.html

 

 

이렇게 가져올 내용들은 block 을 쓰지 않고, 자식 템플릿에서 써줄 내용들만 block을 써서 비워주면 된다는 것이다! 이렇게 하면 보기 편하겠다 아무래도!

하지만 위에서도 말했듯이 웬만하면 블록을 써주는 것이 나중에 뽑아서 들고 오기 편하다! 네비바 같은 경우는 부분적으로 들고 올 일이 없지만, 많은 것들이 들어있다면 각각 블록을 써주고 나중에 들고 오고 싶은 부분만 딱 들고와서 수정해줄 수도 있기 때문이다!! 

 

 

 

혹시나 헷갈릴 사람들을 위해 ( 나처럼..ㅎ )  수정할 수도 있다는 것을 보여주기 위해 title 부분을 채워줬다. 

 

base.html

 

 

title 을 저렇게 써주고 index로 가서

 

index.html

 

이렇게 타이틀 블럭을 들고와서 수정해주게 되면, 

 

 

 

 

이렇게 index 페이지에서는 이 제목이 뜨게 된다! 그러니 수정에 용이해지기 때문에 base 에는 많은 블럭을 적는 것을 추천한다!

 

 

뭔가 되게 길어졌지만 , 그냥 가져올 내용 부분 블록을 섞어서 써도 되고, 써도 되고, 안 써도 되는 경우들을 주욱 나열한 것 뿐이다. 

 

그래서 구글링을 할 때 처음 이해하기 어려웠다고..변명을... 왜 여기선 써주고 저기선 안 써주지.. 이런 변명...ㅎ...

 

참고로 전부 들고오고 싶다면, 그냥 자식 템플릿에 {{ block.super }} 를 써주고 통해 전부를 불러와 줄 수도 있다.

 

 

 

이렇게 여러 가지 방법으로 상속을 받아와줄 수 있는 데, 하나만 마지막으로 정리하자면,

 

 

1. 프로젝트 전체에 사용할 수 있는 부모 템플릿

 

settings.py

 

지금까지 우리는 프로젝트 전반적으로 모두 적용될 수 있는 부모템플릿을 만들어주고, 그걸 자식 템플릿에서 extends 를 해주었는 데, 이렇게 settings.py 에서 TEMPLATES 부분에서 DIRS 은 처음에 =[] 라고 비워져 있다. 이렇게 되면 우리는  순서대로 django는 DIRS를 뒤진 후, INSTALLEDAPPS에 등록된 순서대로 templates폴더를 뒤진다. 그래서 우리는 여기서 뒤져라! 라고 templates 를 써줘서 main/templates 의 경로로 찾을 수가 있다. 

 'DIRS': [os.path.join(BASE_DIR, 'templates')] 에서 os.path.join 은 우리가 스태틱 루트에도 써준 방법이다. 경로를 말해주는 함수여따!! 

 

 

 

2. 앱에서만 사용하는 부모 템플릿

 

이거는 우리가 앱 단위로 부모 템플릿을 써주고 싶을 때, 쓰는 방법이다! 이럴 떄는, 자식 템플릿에 {% 앱이름/ 'base.html' %} 이라고 앱 이름과 같이 써주고, 각 앱의 템플릿 폴더에 base.html 이라는 부모 템플릿을 적어주면 된다!!

 

 

 

 

짝짝 오늘은 정말 간단한 템플릿 상속을 해봤는데 물론 나는 간단하지 않았다... 설명해주시는 분마다 쓰는 방법이나, 블록 태그를 써주냐 안써주냐의 차이 때문에 나도 다 해보면서 정리한다고 포스팅이 또 길어짐... 물론 가장 큰 문제는 css 였지만...ㅎㅁㅎ.. 언젠가는 나도 프로젝트를 제대로 만들 수 있기를 바라며 오늘의 포스팅 끝!!!!