본문 바로가기
Develop/Django(Exercise)_v1

3. Django Template / View

by 보보트레인 2023. 9. 14.

Django에서 템플릿은 사용자에게 보이는 부분을 의미한다.

Django만의 장점은 템플릿 태그(Template tag)를 제공한다는 점이다.

 

템플릿 태그는 아주 편하게도 파이썬으로부터 바로 데이터를 넘겨받아 정적인 html을 동적으로 전환시키는데

주요한 역할을 한다.

 

1. 사진 목록 화면 만들기

1-1) 템플릿 만들기

앱마다 템플릿을 정의할 것이기 때문에 photo 폴더 내에 templates라는 폴더를 만들면 된다.

→ 나중에 템플릿 파일을 불러 올 때 'my_template.html'과 같은 이름으로 불러오게 된다.

 

photo 안에 templates라는 폴더를 만들고 그 안에 photo파일을 만든 후, photo_list.html을 생성

다음과 같은 기본적인 코드를 작성한다.

<html>
    <head>
        <title>Photo App</title>
    </head>
    <body>
        <h1><a href=""">사진 목록 페이지</a></h1>
        <section>
            <div>
                <h2>
                    <a href="">푸른 언덕</a>"
                </h2>
                <img
                    src="https://wallpapercave.com/wp/wp2754864.jpg"
                    alt="푸른언덕"
                    width="300"
                />
                <p>마이크로소프트, 1000원</p>    
            </div>
            <div>
                <h2>
                    <a href="">푸른 언덕 2</a>
                </h2>
                <img
                src="https://wallpapercave.com/wp/wp2754864.jpg"
                alt="푸른언덕"
                width="300"
            />
            <p>마이크로소프트, 1000원</p>
            </div>
        </section>
    </body>
</html>

1-2) 뷰 만들기

뷰는 데이터베이스에서 데이터를 꺼내 템플릿으로 전달하기도 하지만, 템플릿을 보이게 하는 역할도 수행한다.

photo/views.py 안에 다음과 같은 코드를 작성.

from django.shortcuts import render

# Create your views here.
def photo_list(request):
    return render(request, 'photo/photo_list.html', {})

우리는 photo_list라는 함수를 만들었다. 이 함수는 render를 사용해 photo/photo_list.html을 랜더링 한다.

쉽게 말해 웹에 보여질 수 있도록 가공하여 전달한다.

→ 이렇게 하면 photo_list()라는 함수가 불렸을 때 photo_list.html이 나타나게 된다.

 

1-3)  photo url 세팅

url.py는 photo 앱 폴더가 아닌 myweb 프로젝트 폴더 안에 있다. 이는 프로젝트 전체의 url이고, 우리는 photo 앱에 대한 url을 작성할 것이기 때문에 photo 폴더 안에 urls.py를 photo/urls.py가 되도록 만들어보자.

from django.urls import path
from . import views

urlpatterns = {
    path('', views.photo_list, name='photo_list'),
}

여기서 ''는 루트주소 즉, https://127.0.0.1:8000 을 의미한다.

views.py를 불러와 photo_list함수를 불렀으니, 랜더링되어 웹 페이지에 잘 나오게 될 것.

 

1-4) 프로젝트 url 세팅

프로젝트 전체를 관장하는 url.py에 방금 만든 photo/urls.py를 다시 등록해줘야 한다.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('photo.urls')),
]

<실행 화면>

잘 나온다 !

반응형