[Django] diary 만들어보기 (2) MTV 패턴 이란? models, templates, view 설정 : Programming Story

https://www.programmingstory.com/2024/02/django-diary.html

우선 전 포스팅처럼 기본 설정을 한 뒤에 이어서 시작해보겠다.

먼저 사용자에게 보여줄 화면을 만들어주어야 한다. 사용자에게 보여줄 화면은 template이 담당하고 있고 특히나 중요한 것은 django에서는 무조건 html 파일을 templates 라는 폴더 안에서 찾기 때문에 templates라는 폴더를 하나 만들어주자. 그리고 전 포스팅에서도 언급했듯이, django에서는 여러 개의 앱을 같이 만들 수 있기 때문에 diary 폴더의 templates 안에 diary라는 이름의 폴더를 하나 더 만들어주자. 그리고 그 폴더 안에 index.html 파일을 하나 만들어주자. 그런 다음에 index.html 파일 안에 간단히 적어보자

우선은 화면만 구상을 할 것이므로 간단하게만 아무거나 적어도 관계없다.

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>My diary</title>
  </head>
  <body>
    <h1>Diary page</h1>
  </body>
</html>

우선 위와 같이 title과 h1 정도만 적어주었다.

그런 다음 terminal에

python manage.py runserver

를 적어보자. 위 명령어는 실제로 화면이 어떻게 나오는지를 살펴보기 위해 runserver를 해보겠다는 뜻이다.

그러면

위와 같이 나올 텐데 위 그림에서

빨간색으로 표시된 부분에 control을 누른 상태에서 클릭을 하면 인터넷 상에서 다음과 같은 창이 뜨는 것을 알 수 있을 것이다.

우리가 html 페이지를 작성했지만 아직 아무것도 나오지 않는 것을 알 수 있다. html 페이지가 보이기 위해서는 html 페이지를 보여달라고 요청하는 views.py가 필요하다.

따라서 diary/views.py에 들어가서 아래와 같이 index 함수를 작성해보자.

from django.shortcuts import render

# Create your views here.
def index(request):
    return render(request, 'diary/index.html')

다음으로 url 부분을 작성해주어야 한다. diary_project/urls.py에 들어가서 아래와 같이 코드를 수정해주자.

from django.contrib import admin
from django.urls import path
import diary.views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', diary.views.index, name='index')
]

즉 diary.views를 import 해주고 path를 하나 더 추가해준것이다. ' ' 라는 것은 기본 경로 (localhost:8000/) 로 url이 들어올 시에 두 번째 인자로 들어온 함수를 실행시켜주겠다는 것이다. 즉 만약 localhost:8000/ 로 들어오면 diary.views.index 함수를 실행시켜주는 것이고 diary.views.index 함수는 index.html 페이지를 render하고 있으니 index.html 페이지가 보이게 되는 것이다.

이렇게 하고 terminal에 python manage.py runserver를 입력하면,

이런식으로 html 페이지가 잘 나온 것을 알 수 있다.

다음 다시 diary_project의 urls.py 에 들어가서 urlpatterns에 하나를 더 추가해주도록 하겠다.

from django.contrib import admin
from django.urls import path
import diary.views
from django.conf.urls import include # 새로 추가
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', diary.views.index, name='index'),
    path('post/', include('diary.urls')), #새로 추가
]

이렇게 되면 localhost:8000/post/로 들어오는 것들은 diary.urls에서 처리해주겠다라는 말이 된다. 이렇게 코드를 작성해주면 diary/urls가 없기 때문에 에러가 나게 될 것이다.

따라서 diary 폴더 안에 urls.py를 새로 하나 만들어 주고 아래와 같이 코드를 적어준다.

from django.urls import path
from diary import views

urlpatterns = [
    path('', views.index, name='index'), # 'localhost:8000/post/'
]

post/로 들어왔을 때도 views.index를 보여주겠다라는 것이므로 views.index함수를 두 번째 인자로 적어준다.

다음으로는 model을 작성해주어야 한다.

diary에 models.py 파일에 아래와 같이 코드를 작성해주자. 각각의 필드는 다른 것을 사용해도 된다. 나는 diary에 필요한 필드로 우선 제목, 내용, 그리고 만족도를 넣어주었고 title과 만족도는 굳이 길지 않아도 되니, max_length를 지정해주고 CharField 타입으로 정해주었다.

from django.db import models
from django.utils import timezone

# Create your models here.
class Post(models.Model): 
 
    title = models.CharField(max_length=256)
    content = models.TextField()
    satisfaction= models.CharField(max_length=1)
    created_at = models.DateTimeField(default=timezone.now)
    updated_at = models.DateTimeField(blank=True, null=True)

    def update_date(self): 
        self.updated_at = timezone.now()
        self.save()

    def __str__(self):
        return self.title

여기서 id는 자동으로 추가해주기 때문에 굳이 field로 명시해줄 필요가 없다.

그리고 이렇게 모델이 바뀌었다면 우리는 꼭 migration을 시켜주어야 한다.

python manage.py makemigrations
python manage.py migrate

위 두 줄을 각각 terminal에 입력하여 migration을 시켜주자.

이제 모델이 바뀌었으니 다시 view.py와 index.html을 바꾸어주어야 한다. view.py에서는 각각의 post 객체를 모두 다 index.html로 넘겨주도록 하겠다.

그래서 우선 객체를 받아서 이를 넘겨주는 식으로 아래와 같이 view.py를 수정해주었다.

from django.shortcuts import render
from .models import Post

# Create your views here.
def index(request):
    posts=Post.objects.all()
    return render(request, 'diary/index.html', {'posts': posts})

그 다음에 template에 있는 index.html도 받은 post 객체를 화면에 띄울 수 있도록 수정해준다.

index.html 파일을 아래와 같이 수정해준다.

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>My diary</title>
  </head>
  <body>
    <h1>Diary page</h1>
    {%for post in posts%}
    <div style="border: 2px solid green;">
      <a href="/post/{{post.id}}">
        <h3> {{post.title}} </h3>
      </a>
      <h3> satisfied: {{post.satisfaction}} </h3>
      <h3> {{post.content}} </h3>
    </div>
    {% endfor %}
  </body>
</html>

이렇게 하면 posts라는 모든 객체 중에 for문을 돌면서 하나의 객체 post에 대해 title, satisfaction, content를 출력해준다.

이렇게 해서 models, view, urls, templates 의 관계를 알아보았다. 이를 우리는 django에서 MTV 패턴이라고 한다. MTV 패턴은 Model, Template, View의 약자로 이 세 가지가 연계되는 패턴을 의미한다. 위의 설명을 잘 따라갔다면 이것이 무엇을 의미하는지 이해할 수 있을 것이다.

Model은 데이터를 저장하는 형태를 설정하고, Template 안에 있는 html 파일에서 유저에게 보여줄 화면을 설정하고, View에서 데이터를 처리하여 html 파일과 연결시켜준다.

이러한 django의 MTV 패턴을 잘 익혀두면 전반적인 큰 그림을 이해하기 쉽기 때문에 오래 걸리더라도 이해해보자.

여기까지 하면 django의 MTV 패턴을 이해할 수 있지만 새로운 posting을 추가하거나, 삭제하거나, 수정할 수 없다. 다음 포스팅에서는 diary의 추가적인 기능을 구현해보도록 하겠다.