📂 applications

🔷 admin.py
🔷 apps.py
🔷 models.py
🔷 tests.py
🔷 views.py

📁 my_project

🔷 __init__.py
🔷 settings.py
🔷 urls.py
🔷 wsgi.py
🔷 asgi.py

1. 🔷urls.py - 🔷views.py - 🟥template 연결

## my_project/urls.py
...
>>from articles import views
...
urlpatterns = [
...
  >>path('index/', views.index),
]

## articles/views.py
>>def index(request):
  >>return render(request, 'index.html')

<!-- articles/templates/index.html-->
<h1>거북이반 화이팅!</h1>

💡from "" import "" 는 기존에 모듈을 불러올 때 주로 쓰였는데 articles란 이름의 앱폴더는 __init__.py이 작성되어 있기 때문에 Python이 모듈로 인식합니다.
💡articles는 라이브러리, views는 모듈, .index는 함수처럼 사용할 수 있습니다
💡request는 반드시 첫번째 인자로 주어야 합니다.

정리

1. urls.py에 연결할 모듈을 import해두면 index주소로 접속시 views.py에 정의한 내용에 따라서views.index를 실행합니다.
   (views는 articles로부터 불러온 모듈로 인식)

2. views.py에서 http request를 render하고 response를 return하기 위해 index.html 템플릿을 사용합니다. render 인자에 index.html을 추가해줍니다.

3. 템플릿에 index.html 만들고 웹에 보여줄 내용의 문법을 작성합니다.

2. 🟥템플릿 기본 출력

## my_project/urls.py
urlpatterns = [
...
  >>path('dinner/', views.dinner),
]

## articles/views.py
>>def dinner(request):
# 메뉴데이터를 리스트에 딕셔너리 형태로 담는 menus 만들기 
    >>menus = ['족발', '햄버거', '치킨', '초밥']
    # munues를 인자로받아 랜덤하게 고르는 pick 만들기
    >>pick = random.choice(menus)
    # 메뉴데이터를 views.py -> dinner.html 보내기 위해 context 사용
    >>context = {
        'pick': pick, # 키 pick안에 랜덤하게 고른 메뉴 변수 저장
    }
    return render(request, 'dinner.html', >>context)

<!--articles/templates/dinner.html-->
<h1>오늘 저녁은 {{pick}} 입니다.</h1>

- 랜덤하게 고른 메뉴들이 나오는 모습

3. 🔗변수형url

주소자체를 변수처럼 사용해서 동적으로 사용하는 것을 변수형 url이라 합니다.
주로 유저 개인 페이지에 유저명이 주소로 들어간 경우가 대표적입니다.

## my_project/urls.py
urlpatterns = [
...
  >>path('dinner/<str:name>/', views.dinner),
]

## articles/views.py
def dinner(request, >>name):
    ...
    context = {
        'pick': pick,
      >>'name': name,
    }
    ...

<!--articles/templates/dinner.html-->
<h1>오늘 {{name}}님의 저녁은 {{pick}} 입니다.</h1>

이런식으로 장고 템플릿에서 사용자가 입력하는 주소값이나 서버 데이터를 어떻게 HTML로 출력할 수 있는지 확인해봤습니다.

4. Django templates language(DTL)

장고의 템플릿이 어떤건지 템플릿에서 사용할 수 있는 태그가 어떤건지 장고: 템플릿 공식 문서에 설명되어 있습니다. 나중에는 쓰지 않겠지만 처음에 장고를 이해하기 위해서 템플릿을 어느정도 익혀야 합니다. 장고: 내장 템플릿 태그와 필터들중 가장 많이 쓰일만한 for와 if를 연습해보겠습니다.

1. DTL for

for 반복문을 사용해 저녁 키값과 메뉴리스트에서 메뉴의 키값을 연결해보겠습니다.

## articles/views.py
def dinner(request, name):
    ...
    context = {
        'pick': pick,
        'name': name,
      >>'menus': menus
    }
    return render(request, 'dinner.html', context)

<h1>오늘 {{name}}님의 저녁은 {{pick}} 입니다.</h1>
<h1>메뉴 리스트</h1>
<ul> <!-- ● 표시 -->
    {% for menu in menus %}
    <li>{{ menu }}</li>
    {% endfor %}
</ul>

def dinner(request, name):
  >>menus = [{"name":'족발',"price":30000}, {"name":'햄버거',"price":5000}, {"name":'치킨',"price":20000}, {"name":'초밥',"price":15000}]
...

- 저녁 키값 연결되지 않음
- 메뉴 리스트의 name 키값 연결되지 않음

<h1>오늘 {{name}}님의 저녁은 {{pick.name}} 입니다.</h1>
<h1>메뉴 리스트</h1>
<ul>
    {% for menu in menus %}
    <li>{{ menu.name }} {{ menu.price }}원</li>
    {% endfor %}
</ul>

- 저녁 키값 연결
- 메뉴 리스트의 name 키값, price 키값 연결

2. DTL if

if 조건문을 사용해 특정 가격대를 기준으로 고민하는 반응을 출력해보겠습니다.

<h1>...</h1>
<ul>...</ul>

{% if pick.price > 20000 %}
<p>비싸다</p>
{% elif pick.price > 10000 %}
<p>그럭저럭</p>
{% else %}
<p>너무좋아!</p>
{% endif %}

- 조건에 설정한 20000원초과, 10000원초과 메뉴가 아닌 햄버거가 pick되었다
- else조건 <p>너무좋아!</p> 출력