Django에서 웹 페이지를 만들려면 앱 생성 → URL 설정 → View 작성 → Template 생성 순서로 진행합니다.

1. 앱 생성

Django에서는 기능별로 앱을 만들어 관리합니다. 예를 들어, 홈페이지 메뉴에 회사 소개, 회사 제품, 게시판 등이 있다면 이를 기능단위로 묶어 각각 다른 앱으로 만들어 사용합니다. 이번에는 간단한 웹 페이지이기 때문에 'main'이라는 앱 하나만 생성해보겠습니다.

VSC 터미널(터미널 > 새 터미널)에 아래 명령어를 입력해 'main' 앱을 생성합니다. 명령어를 실행시킬 때에는 꼭 앞에 (venv)가 있어야 합니다. 가상환경이 활성화되어 있다는 뜻입니다.

python manage.py startapp main

python manage.py startapp main

01_3_basic 폴더 안에 main 폴더가 생성되었습니다.

2. 프로젝트 설정 수정

config > settings.py의 INSTALLED_APPS에 'main'을 추가합니다. main이라는 앱을 사용하기 위해 등록하는 것입니다. 코드를 찾을 때에는 Ctrl + F를 사용하면 편리합니다.

# config > settings.py
 
INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "main",
]

# config > settings.py
 
INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "main",
]

같은 settings.py 파일의 ALLOWED_HOSTS을 수정하여 모든 호스트에서 접근 가능하도록 설정합니다.

# config > settings.py
 
ALLOWED_HOSTS = ["*"]

# config > settings.py
 
ALLOWED_HOSTS = ["*"]

주의: 이 설정은 개발 환경에서만 사용하세요. 실제 서비스에서는 보안을 위해 허용할 호스트를 명시적으로 지정해야 합니다.

3. URL 설계 및 구현

웹사이트의 URL 구조는 전화 응대와 비슷합니다. 전화를 걸면 사람이 응대하듯, 각 URL로 접속하면 함수와 연결됩니다. 아래와 같은 구조로 URL을 설계해보겠습니다.

www.example.com/admin/    # 관리자 페이지
www.example.com/          # 메인 페이지
www.example.com/a/        # A 페이지
www.example.com/b/        # B 페이지
www.example.com/c/        # C 페이지
www.example.com/hojun/    # 이호준 소개 페이지
www.example.com/orm/      # 오름 소개 페이지

www.example.com/admin/    # 관리자 페이지
www.example.com/          # 메인 페이지
www.example.com/a/        # A 페이지
www.example.com/b/        # B 페이지
www.example.com/c/        # C 페이지
www.example.com/hojun/    # 이호준 소개 페이지
www.example.com/orm/      # 오름 소개 페이지

이 구조는 Django의 config > urls.py에 path("원하는 URL/", 함수명) 형태로 구현합니다.

# config > urls.py
 
from django.contrib import admin
from django.urls import path
from main.views import index, a, b, c, hojun, orm
 
urlpatterns = [
    path("admin/", admin.site.urls),
    path("", index),
    path("a/", a),
    path("b/", b),
    path("c/", c),
    path("hojun/", hojun),
    path("orm/", orm),
]

# config > urls.py
 
from django.contrib import admin
from django.urls import path
from main.views import index, a, b, c, hojun, orm
 
urlpatterns = [
    path("admin/", admin.site.urls),
    path("", index),
    path("a/", a),
    path("b/", b),
    path("c/", c),
    path("hojun/", hojun),
    path("orm/", orm),
]

여기서 path()로 URL과 연결된 함수는 main/views.py라는 파일에 정의되어 있습니다. 이 path() 함수는 path(route, view, kwargs=None, name=None)의 형태로 사용됩니다. 지금은 route와 view만 사용하고 있습니다. kwargs는 URL에 추가적인 인자를 전달할 때 사용하고, name은 URL 패턴의 이름을 지정할 때 사용합니다. 02-3에서 상세히 다룹니다. 한꺼번에 많은 코드를 작성하면 이해의 복잡도도 올라가니 최대한 간결하게 작성하면서 실행해보겠습니다.

4. View 생성

이제 각 URL과 연결되는 뷰(View) 함수를 생성해야 합니다. 뷰 함수는 사용자의 요청을 처리하고 적절한 응답을 반환하는 역할을 합니다. 먼저, Django의 HTTP 응답 기능을 사용하기 위해 필요한 모듈을 가져옵니다.

# main > views.py
from django.http import HttpResponse

# main > views.py
from django.http import HttpResponse

HttpResponse는 Django에서 제공하는 클래스로, HTTP 응답을 생성하는 데 사용됩니다. 이를 통해 텍스트나 HTML 등을 클라이언트에게 직접 전송할 수 있습니다.

이제 main > views.py 파일에 각 URL에 대응하는 뷰 함수를 다음과 같이 정의합니다.

# main > views.py
 
from django.http import HttpResponse
 
def index(request):
    return HttpResponse("<h1>메인 페이지입니다.</h1>")
 
def a(request):
    return HttpResponse("<h1>A 페이지입니다.</h1>")
 
def b(request):
    return HttpResponse("<h1>B 페이지입니다.</h1>")
 
def c(request):
    return HttpResponse("<h1>C 페이지입니다.</h1>")
 
def hojun(request):
    return HttpResponse("<h1>이호준 소개 페이지입니다.</h1>")
 
def orm(request):
    return HttpResponse("<h1>ORM 소개 페이지입니다.</h1>")

# main > views.py
 
from django.http import HttpResponse
 
def index(request):
    return HttpResponse("<h1>메인 페이지입니다.</h1>")
 
def a(request):
    return HttpResponse("<h1>A 페이지입니다.</h1>")
 
def b(request):
    return HttpResponse("<h1>B 페이지입니다.</h1>")
 
def c(request):
    return HttpResponse("<h1>C 페이지입니다.</h1>")
 
def hojun(request):
    return HttpResponse("<h1>이호준 소개 페이지입니다.</h1>")
 
def orm(request):
    return HttpResponse("<h1>ORM 소개 페이지입니다.</h1>")

각 함수의 구조를 살펴보겠습니다. 함수 이름은 urls.py에서 정의한 URL 패턴과 일치합니다. 각 함수는 request 매개변수를 받습니다. 이는 사용자의 HTTP 요청에 대한 정보를 포함하는 객체입니다. 여러분이 URL 창으로 페이지에 접속할 때, 여러분의 요청 정보를 담고 있는 이 객체가 함수로 전달됩니다. 함수는 HttpResponse 객체를 반환합니다. 여기서는 간단한 HTML 문자열을 포함시켰습니다.

이러한 구조를 통해 Django는 특정 URL로 요청이 들어왔을 때 해당하는 뷰 함수를 실행하고, 그 함수가 반환하는 내용을 사용자에게 보여줄 수 있게 됩니다.

서버 실행 해보기

아래 명령어를 터미널에 입력하여 서버를 실행해보세요.

python manage.py runserver

이제 아래 URL로 접속하여 각 페이지가 정상적으로 작동하는지 확인해보세요.

모든 페이지가 정상적으로 작동되는지, 존재하지 않는 URL을 입력했을 때 어떤 에러가 발생하는지 확인합니다. 이번에는 없는 URL을 접속해봅시다.

http://127.0.0.1:8000/helloworld/

접속할 수 있는 페이지가 없기 때문에 접속할 수 있는 페이지 목록을 보여주는 페이지가 나타납니다. 이는 Django의 기본 동작입니다. 이번에는 settings.py 파일에서 DEBUG = False로 설정한 후 서버를 재시작하고 다시 확인해봅시다.

5. Template 생성 및 View 수정

Django에서 템플릿은 사용자에게 보여질 HTML 파일을 의미합니다. 각 view에 대응하는 템플릿 파일을 생성하고, view 함수를 수정하여 이 템플릿을 사용하도록 해봅시다.

5.1 템플릿 폴더 및 파일 생성

먼저 01_3_basic/main폴더에 templates/main폴더를 생성하고, html 파일을 만들어줍니다. 올바르게 생성되었다면 아래와 같은 폴더구조가 생기게 됩니다.

📁01_3_basic/
┗━ 📁main/
    ┗━ 📁templates/
        ┗━ 📁main/
            ┣━ 📄index.html
            ┣━ 📄a.html
            ┣━ 📄b.html
            ┣━ 📄c.html
            ┣━ 📄hojun.html
            ┗━ 📄orm.html

📁01_3_basic/
┗━ 📁main/
    ┗━ 📁templates/
        ┗━ 📁main/
            ┣━ 📄index.html
            ┣━ 📄a.html
            ┣━ 📄b.html
            ┣━ 📄c.html
            ┣━ 📄hojun.html
            ┗━ 📄orm.html

여기서 templates 폴더 안에 main 폴더를 한 번 더 만드는 이유는 Django의 템플릿 네임스페이스 기능 때문입니다. 이렇게 하면 다른 앱과 템플릿 이름이 충돌하는 것을 방지할 수 있습니다.

각 HTML 파일에 간단한 내용을 추가합니다. html 파일을 구별할 수 있는 텍스트면 어떤 텍스트를 입력하셔도 괜찮습니다.

<!-- index.html -->
<h1>메인 페이지입니다.</h1>
 
<!-- a.html -->
<h1>A 페이지입니다.</h1>
 
<!-- b.html -->
<h1>B 페이지입니다.</h1>

<!-- index.html -->
<h1>메인 페이지입니다.</h1>
 
<!-- a.html -->
<h1>A 페이지입니다.</h1>
 
<!-- b.html -->
<h1>B 페이지입니다.</h1>

5.2 views.py 수정

이제 views.py 파일을 수정하여 HttpResponse 대신 템플릿을 렌더링하도록 변경합니다.

# main/views.py
 
from django.shortcuts import render
 
def index(request):
    return render(request, "main/index.html")
 
def a(request):
    return render(request, "main/a.html")
 
def b(request):
    return render(request, "main/b.html")
 
def c(request):
    return render(request, "main/c.html")
 
def hojun(request):
    return render(request, "main/hojun.html")
 
def orm(request):
    return render(request, "main/orm.html")

# main/views.py
 
from django.shortcuts import render
 
def index(request):
    return render(request, "main/index.html")
 
def a(request):
    return render(request, "main/a.html")
 
def b(request):
    return render(request, "main/b.html")
 
def c(request):
    return render(request, "main/c.html")
 
def hojun(request):
    return render(request, "main/hojun.html")
 
def orm(request):
    return render(request, "main/orm.html")

render 함수는 사용자에게 보여줄 화면을 완성하여 사용자에게 전달하는 기능을 합니다. 이 함수는 두 개의 매개변수를 받습니다.

첫 번째 파라미터: request 객체
두 번째 파라미터: 렌더링할 템플릿의 경로

이렇게 수정하면, 각 view 함수는 해당하는 템플릿 파일을 렌더링하여 사용자에게 보여주게 됩니다.

아래는 Django의 요청-응답 흐름을 나타낸 것입니다.

6. 서버 실행 및 테스트

이제 우리가 만든 뷰들을 실제로 확인해봅시다.

다음 명령어로 개발 서버를 실행합니다.

python manage.py runserver

python manage.py runserver

웹 브라우저를 열고 개발 서버 주소로 접속합니다.
메인 페이지가 표시되는 것을 확인한 후, 다른 URL들('/a/', '/b/', '/c/', '/hojun/', '/orm/')도 차례로 방문해 봅니다.

각 URL에 접속할 때마다 우리가 views.py에서 정의한 대로 각각 다른 메시지가 표시되는 것을 확인할 수 있습니다.

주의: TemplateDoesNotExist 에러가 발생하면 템플릿 파일의 위치와 이름을 확인해주세요.

Django 베이스캠프

첫 웹 페이지 만들기