[TIL] #DAY - 024 - 프로젝트 진행중! (4) (내일배움캠프AI 3기)

---

---

프로젝트 마지막! 클론코딩!

오.. 드디어 완벽하진 않지만 그래도.. 정말루...

완성이라고 말은 할순없지만 완성해간다

다들 열심히 프로젝트를 하고있지만 나는 잔소리 듣지않게 TIL 짬내서 쓰는중

정말 이번 프로젝트는 팀원들의 희생이있어서 완성할수있었다고 생각한다..

내가 뭔가 메인 페이지를 맡아서 베이스를 잘못 가져간거같아서 미안하다...

이번 실수를 경험으로 다음프로젝트는 정말 잘하고싶다,,!

우리팀 싸지방팀

화.이.팅!

 

---

---

---

오늘 추가로 서술하고싶은 내용은 장고 템플릿 문법이다!

{% extends "base_generic.html" %}

{% block title %}{{ section.title }}{% endblock %}

{% block content %}
<h1>{{ section.title }}</h1>

{% for story in story_list %}
<h2>
  <a href="{{ story.get_absolute_url }}">
      {{ story.headline|upper }}

  </a>
</h2>
<p>{{ story.tease|truncatewords:"100" }}</p>
{% endfor %}
{% endblock %}

• {{}}두개는 변수.
• 뷰에서 탬플릿으로 context전달이 가능하다.
  • 함수에서 html문서로 객체의 전달이 가능하다.
  • sectin.title은 뷰에서section이라는 객체를 html문서로 보냈다는 뜻이고 그 안에 title속성을 전달했다는 뜻.(.은 변수속성에 접근)
• 장고 탬플릿 변수를 사용해 html문서상에서도 어떤 객체의 속성들에 접근할 수 있고, 이를 출력할 수 있도록 지원함.

---

템플릿 필터

• 템플릿 변수의 값을 특정 형식으로 변환할 때 사용
• 템플릿 변수 다음에 바('|')를 그은 다음 적용하고자 하는 필터를 명시
• {{ story.headline | upper }}의 'upper'
  • 'upper'라고 명시하였으므로, 'story.headline'의 값을 대문자 형식으로 변환
• default : {{ value|default:"nothing" }} 변수가 false또는 비어있는경우 default값을 사용한다.
• length : 값의 길이를 반환한다.
• truncatewords:30 : 변수값중 앞에서 30개 단어만 보여주고 줄바꿈 문자는 모두 없애줌.
• join:"//" : //로 인자 전부 묶어줌.
• ...필터는 커스텀할수도 있음

---

탬플릿 태그

• {% %}
• load static, for, if 흐름 제어가 가능. html상에서 프로그래밍 적 로직의 구현을 위함.
• for태그 loop에 사용할 수 있는 변수(i같은거)
  • forloop.counter : 현재까지 루프 실행한 loopcounter(1부터)
  • forloop.counter0 (0부터)
  • forloop.recounter : loop끝에서 현재가 몇번째인지 카운트한 숫자(1부터)
  • forloop.recounter0
  • forloop.first :첫번째 실행이면 true
  • forloop.last : 마지막실행이면 true
  • forloop.parentloop : 중첩된 루프에서 현재의 루프 바로 상위의 루프값.
• if뒤 변수가 True만 아래문장 실행. 필터, 연산자 사용가능. 필터가 스트링반환시에 산술연산은 불가.
  • and, or, not, and not, > >=, < <= ,in, not in 등 비교연산 가능
• {% csrf_token %} CSRF 공격 방지를 위한 태그, 장고 내부적으로 CSRF 토큰값의 유효성을 검증.
  • form태그 바로 첫줄에 넣음.
• {% url %} url하드코딩을 방지.
  • {% url'namespace:view-name' arg1 arg2 %}
• {% with %} : eith ~ endwith 내에 특정값을 변수에 저장해두는 기능.
  • {% with call = store.owner.count %}{% endwith %}
  • ​ {{ call }} people in store
• {% load %} : 필터 및 사용자 정의 태그를 로딩해줌.
• block, extends : 중복되는 html파일 반복해서 작성 해야하는 번거로움을 줄여준다.(탬플릿 상속)
  • 상속하는 부모 템플릿에는 {% block %} {% endblock %}
  • 상속 받는 자식 템플릿은 {% extends %}를 ''최상단''에 표시.(무조건 첫번째 탬플릿태그여야함.)
  • 즉 extends 가 탬플릿 상단에 있으면 템플릿 세스템은 부모 템플릿부터 찾게됨.
  • 태그에 가독성을 위한 이름 부여 가능. {% block aa %} {% endblock aa %}

---

탬플릿 코멘트

• 주석. 출력되지 않음.
• {# #}
• {% comment %}
• {% endcomment %}

---

장고 템플릿 문법만 잘알아둬 프로젝트 반은 성공이라고 생각할정도로 잘써야하고 잘알아야하는거같다!

템플릿 문법 숙지하기위해 적어보았다.