02.md

My page

유저가 작성한 글 목록을 확인할 수 있는 마이페이지를 만들어 보겠습니다.

1. users app 생성

$ python manage.py startapp users

그냥 main 앱에서 해도 괜찮지만, User에 대한 서비스가 커지는 경우를 대비해서 나누어 관리를 해 주는 것이 좋기 때문에 앱을 만들도록 하겠습니다.

새로운 앱을 생성하였으니 basic/settings.py 의 INSTALLED_APPS에 추가해주어야합니다.

INSTALLED_APPS = [
    ...
    'users',
]

2. mypage.html 파일 생성

users/templates/users/mypage.html 파일을 생성해줍니다.

3. Profile 모델 생성

from django.db import models
from django.contrib.auth.models import User

class Profile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)

django-allauth에서 제공하는 User 모델은 변경할 수 없기 때문에 새로운 속성을 추가하기 위해서는 User 모델과 1:1로 대응되는 다른 모델을 만들어야 합니다. 지금처럼 글 목록만 보여주기에는 추가해야하는 속성은 없지만 앞으로 추가할 속성이 생길 것이므로 user앱을 생성했을 때 Profile 모델을 만들어주고 시작하겠습니다.

1:1 대응이니까 OneToOneField로 연결해주고, User가 삭제되면 해당하는 프로필도 함께 삭제되도록 on_delete=models.CASCADE를 설정해주었습니다.

모델을 추가하였으니 migrate해줍니다.

$ python manage.py makemigrations
$ python manage.py migrate

4. users/views.py

from django.shortcuts import render
from main.models import Blog

def mypage(request):
    user = request.user
    blogs = Blog.objects.filter(writer=user) # 로그인한 유저이름과 글 작성자 이름이 동일한 글 필터링
    return render(request, 'users/mypage.html', {'blogs':blogs})

main앱의 Blog모델을 import해주고, mypage함수를 작성합니다. user는 현재 작업중인 유저이고, 게시글은 Blog모델의 객체들 중에 작성자가 현재 유저에 대한하는 글을 필터링 하여 담습니다. 그리고 mypage.html로 render해주며, 이때 딕셔너리 자료형으로 blogs에 필터링한 글을 담아서 보내주어야 mypage.html에서 blogs를 인식하여 게시글을 띄워줄 수 있겠죠.

5. url 연결

users/urls.py

from django.urls import path
from . import views

app_name = "users"
urlpatterns = [
    path('mypage/', views.mypage, name="mypage"),
]

users앱도 앱마다 url을 관리하기 위해 urls.py파일을 생성하고 url을 작성해줍니다. app_name도 까먹지 말고 설정해줍시다.

그리고 basic/urls.py에 users 앱의 urls.py를 include해주어야 인식할 수 있겠죠.

urlpatterns = [
    ...
    path('users/', include('users.urls')),
]

6. mypage.html

users/templates/users/mypage.html

{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container">
    <h1>{{user.username}}</h1>
    <div>
        {% for blog in blogs %}
            <a href="{%url 'main:detail' blog.id%}">{{blog.title}}</a><hr>
        {%endfor%}
    </div>
</div>
{% endblock %}

이제 template을 작성해주면 됩니다. 지금까지 해왔던 것 처럼 base.html을 상속받고 static도 사용할 수 있으니 함께 적어주었습니다. 템플릿 변수를 이용해 필요한 값들을 불러와줍니다. 먼저 현재 로그인한 유저의 이름을 띄워주고 위해 {{user.username}}을 적어주었습니다. 그리고 우리가 아까 mypage함수에서 필터링하여 글을 담은 blogs가 있었죠. 이 글들을 for문을 이용해 하나씩 blog라는 변수에 담아서 띄워줍니다. {{blog.title}}을 이용해서 게시글의 제목만 보여주고, 클릭하면 main앱에서 작성해주었던 detail로 이동하도록 해줍니다. main앱의 detail함수는 id값을 인자로 받아 id값에 해당하는 글을 보여주는 것이었죠. 그래서 게시글의 id값도 넘겨줍니다.

7. mypage 버튼 추가하기

마지막으로 basic/templates/shared/_navbar.html에 mypage로 이동하는 링크를 추가해줄게요.

<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
  {% if user.is_authenticated %}
  <li><a class="dropdown-item" href="{%url 'users:mypage' %}">Mypage</a></li>
  <li><a class="dropdown-item" href="{%url 'account_logout' %}">Logout</a></li>
  {% else %}
  <li><a class="dropdown-item" href="{% url 'account_login' %}">Login</a></li>
  <li><a class="dropdown-item" href="{%url 'account_signup' %}">Signup</a></li>
  {% endif %}
</ul>

로그인했을 경우에 마이페이지로 이동하는 링크가 있어야하므로 {% if user.is_authenticated %}에 추가해주면 됩니다.