장고 초급)홈페이지 만들기 + 장고의 페이지뷰 구조(startproject)

하얀설표 | 작성시간 2024.06.28.

(2024.06.30. 수정됨.)

사용 환경 

OS : Windows 10
python : python 3.10.11
django : Djajgno 5.0.6

장고의 페이지뷰 구조

장고는 다음과 같은 순서로 요청에 대한 응답을 보내줍니다.

(클라이언트 요청) => (urls.py에 존재하는 url인지 확인) => (url에 할당된 views.py) => (응답)

urls.py에 존재하는 url이 아니라면 404 error를 보내고, 존재하는 url이라면 해당 url에 연결된 views.py를 호출합니다.
views.py에서는 설정된 코드에 따라 단순 response만 보낼 수도 있고, 데이터베이스에 저장된 데이터를 불러와 응답할 수도 있으며, db에서 가져온 데이터를 가공한 html을 만들어 응답할 수도 있습니다.

이렇게 말로 표현하면 알아듣기 난해한데, 홈페이지를 만들어보며 어떤 식으로 돌아가는지 알아보겠습니다.

홈페이지 만들기

이전에 생성한 blog 프로젝트에 위치한 config 폴더에 다음과 같은 내용의 views.py를 생성합니다.

# config/views.py
from django.http.request import HttpRequest
from django.shortcuts import HttpResponse

def home(request: HttpRequest):
    return HttpResponse('홈페이지 응답')

그 다음, urls.py에서 앞서 생성한 views.py의 코드를 urlpatterns에 연결해줍니다.

# config/urls.py
from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.home), # 추가
]

그 다음, 웹브라우저를 통해 프로젝트에 접근하면 기본 페이지가 아닌, views.py의 home function에서 보낸 응답을 받게 됩니다.

홈페이지 응답

html 페이지로 응답하기

이번에는 일반 웹사이트처럼 보이도록 html을 응답으로 보내도록 해보겠습니다.
먼저 html 템플릿을 저장할 templates 폴더를 만들고, html 응답에 사용할 html을 작성해줍니다.

# templates 폴더 생성
(python3.10) C:\seolpyo\python3.10\Django\blog>mkdir templates

# templates/home.html
<head></head>
<body>
    <h1>{{ title }}</h1>
    <article>
        <div>
            <h2>content만 출력</h2>
            {{ content }}
        </div>
        <hr>
        <div>
            <h2>content + safe</h2>
            {{ content|safe }}
        </div>
    </article>
</body>

그리고 settings.py의 TEMPLATES의 DIRS 리스트에 templates 폴더의 경로를 추가합니다.

# config/settings.py
...
TEMPLATES = [
    {
        ...
        # 'DIRS': [],
        'DIRS': [BASE_DIR / 'templates'],
        ...
    }
]
...

마지막으로 views.py에서 템플릿을 사용하도록 코드를 변경합니다.

from django.http.request import HttpRequest
from django.shortcuts import render

def home(request: HttpRequest):
    return render(request, template_name='home.html', context={'title': '하얀설표의 블로그', 'content': '<p>하얀설표의 블로그 홈페이지입니다.</p>'})

그 다음 웹브라우저를 새로고침(F5)하면 다음과 같이 html이 rendering된 페이지를 확인할 수 있습니다.

홈페이지 응답

템플릿 태그

home.html을 보면 {{ title }}과 {{ content }}, {{ content|safe }}라는 특이한 명령어가 사용되었습니다.
이는 장고에서 사용하는 템플릿 태그로, {{ "변수명" }}을 통해 dict object인 context의 데이터를 가져와 표시하도록 하는 명령어입니다.

|safe의 경우에는 템플릿 필터라고 하는 것으로, html 텍스트를 단순 텍스트가 아닌 html 태그로 변경하여 보여주도록 하는 function을 사용하도록 하는 명령어입니다.
그 에 content만 출력은 p 태그가 텍스트로 출력되었지만, content + safe로 구분해둔 부분에는 p 태그가 텍스트가 아닌 html 태그로 적용되어 표시되지 않은 것을 알 수 있습니다.

이외에도 많은 것들이 있지만, 지금은 이 정도만 알고 있으면 됩니다.

주요 파일 경로

blog
|- config
|  |- settings.py
|  |- urls.py
|  |- views.py
|- templates
   |- home.html



이 글의 댓글 기능은 일부러 막아놓았습니다. 궁금한 내용이 있다면 게시판을 이용해주세요!