인프런 커뮤니티 질문&답변

11장 팔로잉 기능 구현에서는

• 팔로잉 하는 목록 페이지

• 팔로우 하고 있지 않는 목록 페이지

두 가지를 구현하였습니다.

이를 기반으로 인스타그램처럼 프로필을 카드기반으로 꾸미고 10-12 에서 구현한 무한 스크롤을 적용하였습니다. 프로필 페이지에서 구현한 프로필 카드를 목록에서 재활용하여 반복을 줄이고자 했습니다.

대부분의 기능은 구현하였습니다만, 강의의 내용만으로는 스스로 해결하기 힘든 점들이 있어 질문글을 파란색으로 남깁니다.

우선, 팔로잉 목록과 언팔로인 목록을 나눈 경우 언팔로잉 목록에서 내가 팔로잉 한지 모르고 검색한 경우 유저 목록이 검색되지 않는 불편함이 존재할 수 있습니다.

물론 인스타 그램의 경우 강사님께서 구현한 것처럼 탭을 나누어서 구현하였으니 이는 문제가 아닐 수 있습니다.

그러나 하기의 사진은 정확한 예시는 아닐 수 있으나 내 팔로워들 중 내 팔로잉 여부를 확인할 수 있는 페이지를 구현하고 싶습니다.

• 인스타 팔로워 페이지

• 인스타 팔로잉 페이지

따라서 팔로우하지 않는 목록 페이지를 유저 목록들이 모두 나열되면서 눈으로 팔로우 여부를 확인할 수 있는 페이지로 구현하고자 합니다.

하기는 현재 구현한 목록 페이지의 일부 입니다.

개인 프로필 페이지에서는 팔로잉 버튼 대신 edit 버튼이 활성화 됩니다.

해당 페이지를 구현하기 위해 11장에서 구현한 두 함수를 generic ListView를 상속받은 class 기반 뷰로 구현하였습니다.

# views.py
@method_decorator(login_required_hx, name="dispatch")
class DiscoverListView(ListView):
    model = User
    paginate_by = 12
    context_object_name="user_list"
    
    def get_queryset(self):
        qs = User.objects.all()
        user: User = self.request.user
        follow_relation = self.kwargs.get("follow_relation", False) # url로 부터 받는 인자
        match follow_relation:
            case "following":
                qs = user.following_user_set.all()
            case "followed":
                qs = user.followed_user_set.all()

        # qs = User.objects.exclude(id__in=user.following_user_set.all())
        qs = qs.exclude(id__in=[user.pk]).select_related("profile").prefetch_related("follower_user_set", "following_user_set")

        query = self.request.GET.get("query", "").strip()
        if query:
            qs = qs.filter( 
                Q(username__icontains=query) | 
                Q(full_name__icontains=query) | 
                Q(email__icontains=query) 
                )
        return qs.order_by("username")
    
    def get_template_names(self) -> list[str]:
        # htmx로 요청이 들어오면 검색바 등 불필요한 위 아래 내용 제거 후 내용만 업데이트
        if self.request.htmx: 
            template_name = "accounts/_user_list.html"
        else:
            template_name = "accounts/user_list.html"
        return [template_name]
    
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        # is_follwer 는 html에서 follow 버튼을 구분하기 위한 인자
        # context['is_follower'] = True if self.kwargs.get("follow_relation", False)=="following" else False
        qs = self.get_queryset()
        follow_dict = { q.username:self.request.user.is_follower(q) for q in qs }
        context['follow_dict'] = follow_dict
        query = self.request.GET.get("query", "").strip()
        context['query']=query
        return context

여기서 .prefetch_related("follower_user_set", "following_user_set") 을 통해 모델에서 구현한 팔로워와 팔로잉 유저 수를 불러오는 property를 templates에서 호출할 때 N+1 문제를 해결하고자 하였습니다.

<!-- _user_profile_card.html -->
{% load static %}
<div class="card" style="border-radius: 15px;">
  <div class="card-body p-4">
    <div class="d-flex">

      <div class="flex-shrink-0">
        {% if user.profile.avatar %}
        <img src="{{user.profile.avatar.url}}" 
        alt="{{user}}'s avatar"
        class="img-fluid"
        style="width: 180px; border-radius: 10px;">
        {% else %}
        <img src="{% static 'images/profile-icon-design-free-vector.jpg' %}" 
        alt="{{user}}'s avatar"
        class="img-fluid"
        style="width: 180px; border-radius: 10px;">
        {% endif %}
      </div>

      <div class="flex-grow-1 ms-3">
        <h5 class="mb-1" style="display:inline">{{ user.full_name }} </h5>
        {% if user.profile.team %} <h6 class="text-muted" style="display:inline">{{ user.profile.team }}</h6> {% endif %}
        <p class="mb-1 pb-1">{{ user.email }}</p>

        <div class="d-flex justify-content-start rounded-3 p-2 mb-2 bg-body-tertiary">
          <div>
            <p class="small text-muted mb-1">Data</p>
            <p class="mb-0">TDA</p>
          </div>
          <div class="px-3">
            <p class="small text-muted mb-1">Followers</p>
            <p class="mb-0">{{user.follower_count}}</p>
          </div>
          <div>
            <p class="small text-muted mb-1">Following</p>
            <p class="mb-0">{{user.following_count}}</p>
          </div>
        </div>
        <div class="d-flex pt-1">
          {% if request.user == user %}
          <a href="{% url 'accounts:profile_edit' %}" class="btn btn-outline-primary btn-sm">
            <i class="bi bi-pencil-square"></i>
            프로필 수정
          </a>
          {% else %}
          {% comment %} {% include "accounts/_user_follow.html" with username=user.username%} {% endcomment %}

          {% include "accounts/_user_follow.html" with is_follower=follow_dict.user.username username=user.username%}

          {% endif %}
        </div>

      </div>
    </div>
  </div>
</div>

1. 프로필 카드 내에서 팔로워와 팔로잉 수를 보여주기 위해 접근한 제 방식이 맞는지가 궁금합니다. models.py에서 구현한 follower_count 또는 following_count를 template에서 호출하는 방식이 일반적인 접근 방식인가요?

그 다음 제가 위에서 구현하고자 한 유저별 팔로우 여부를 get_context_data에서 follow_dict 라는 변수명으로 저장하여 하기와 같이 template에 넘겨주었습니다.

<!--user_follow.html-->
{% include "core/_messages_as_event.html" %}
{% load keyvalue %}
{% if follow_dict|keyvalue:username %}
    <a href="#"
        hx-post="{% url 'accounts:user_unfollow' username %}"
        hx-swap="outerHTML"
        class="btn btn-sm btn-primary">
        <i class="bi bi-person-check-fill"></i>
        팔로잉 중
    </a>
{% else %}
    <a href="#"
        hx-post="{% url 'accounts:user_follow' username %}"
        hx-swap="outerHTML"
        class="btn btn-sm btn-secondary">
        <i class="bi bi-person-add"></i>
        팔로잉 하기
    </a>
{% endif %}

dictionary 키 값으로 변수를 입력하는 것이 django template에서 지원되지 않기 때문에 하기의 함수를 등록하여 활용하였습니다.

register = template.Library()
@register.filter
def keyvalue(dict, key):
    return dict[key]

결과물은 구현한 페이지처럼 잘 보여지지만, 두 가지 문제가 존재합니다.

2. 확실치 않지만 하기의 코드에서 N+1 오류가 발생하는 것으로 보입니다.

   follow_dict = { q.username:self.request.user.is_follower(q) for q in qs }

3. 팔로잉 혹은 언팔로잉 요청 시 500 서버 에러가 발생합니다. 아마도 follow_dict가 요청 시에 업데이트 되지 않아 발생하는 오류로 보입니다.
   이러한 점 때문에 인스타그램에서도 따로 탭을 두어서 관리하는가 싶기도 합니다만 이를 해결할 방법이 있을까요?
   어렵다면 팔로워 목록에서 내가 팔로잉 하는지 여부를 표기하는 인스타그램 페이지는 어떻게 구현해야 할까요?