본문 바로가기

매일 TIL

[내일배움캠프 7-5일] context, 템플릿 필터, 템플릿 태그, 템플릿 상속, 커스텀 템플릿

context, 템플릿 변수 사용

우선 원래 하던 방식으로 context를 사용하지 않고 만들어 봄.

urls에서 hello 경로를 추가.

views에서 함수형 view인 hello를 정의.

hello.html 생성.


 

이번에는 views에서 context를 사용하고, html에서 변수를 가져와 사용하는 방식으로 해봄.

context는 딕셔너리 형태로 구성.

여기서 name이라는 키 값이 변수로 사용되는 것.

html에서 템플릿 변수로써 name을 사용한다.

형식은 {{ 변수이름 }}


템플릿 필터 & 태그 사용

views에서 특정 값이나 리스트를 변수에 저장하고, context에 딕셔너리 형태로 각각 name, tags, books를 저장.

여기서 tags라는 리스트의 첫번째 인덱스 값인 python을 가져오기 위해 {{ tags.0 }}을 사용한 것.

 

이번에는 템플릿 필터를 적용해 봄.

'|' 를 사용하여 필터 조건을 입력해주기만 하면 끝.

여기서는 전부 대문자로 출력하는 필터인 upper를 사용함.


books 안의 인자들을 하나씩 출력하기 위해 템플릿 태그를 사용함.

템플릿 태그의 역할은 반복문 또는 논리, 조건문을 수행하여 제어 흐름을 만들거나 특수한 기능을 수행하는 것.

여기서는 반복문을 사용하기 위해 태그를 사용했다.

{ % 태그 논리식 % } 형태로 구성됨.

{ % 태그 종료 %} 라는 종료태그가 필요한 경우가 있음.


템플릿 상속

지금은 필요한 html을 사용할 때마다 계속해서 뼈대를 만들고 body안을 채우고 있음.

파일이 많아진다면? -> 계속 만들수는 없다.

공유하는 부분을 저장하는 base.html을 만든 뒤 하위 템플릿에서 상속받아 사용한다는 개념.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {% block content %}
    {% endblock content %}
</body>
</html>

이게 base.html

중복되는 뼈대 형식을 저장하고, body 부분에 block을 사용하여 구멍을 뚫는다는 개념으로 이해하자.

나중에 다른 html 파일에서 base.html을 상속하여 구멍뚫린 부분만 바꿔가며 사용한다는 것.

구멍은 다음과 같이 뚫으면 됨. 여기서는 content라는 이름의 블록.

{% block content %}

{% endblock content %}

 

{% extends 'base.html' %}

{% block content %}
    <h1>hello, Django!</h1>
    <div>This is my first Django PJT</div>
{% endblock content %}

index.html에서 상속받아 사용하는 부분.

상속받을 때는 {% extends 'base.html' %}로 어떤 템플릿을 상속받는지 명시하고,

구멍만 가져와 채워주면 된다.

{% block content %}

       바꾸고 싶은 양식 작성

{% endblock content %}


커스텀 템플릿

지금은 articles라는 앱만 있으니 문제 없지만, 만약 앱이 많아진다면?

articles 안에 있는 base.html을 다른 앱에서 꺼내 써야함 -> 구조적으로 이상하다.

더 큰 상위 폴더에 base.html이 존재하고, 그 하위에서 여러 앱들이 가져다 쓰는 것이 더 바람직한 구조.

즉 base.html을 옮겨야 한다.

우선 상위 폴더인 my_first_pjt 안에 templates 폴더를 새로 만들고,

그 안에 base.html을 옮겨준다.

그런데 이대로 실행시키면 오류가 발생함.

-> 우리가 설정해놓은 settings.py는 앱 안쪽을 뒤적거리도록 설정되어 있는데 현재 base.html은 상위 폴더에 있기 때문.

'DIRS' : [ ] 부분을 설정해줘야 한다.

'DIRS' : [BASE_DIR / 'templates'] 로 수정하면 됨.

BASE_DIR이란 현재 최고 상위 폴더인 my_first_pjt 안의 위치를 말하고 있는 것.


오늘의 회고

조금 쉬고 열심히 했는데도 10강까지 실패했다.

주말에 쉬면서 공부좀 해야할듯.

 

내일의 목표는

쉬다가 장고 강의 2개 듣기 + 지금까지 실습한 my_first_pjt 리셋하고 처음부터 혼자 다시해보기