Django 인스타그램 Timeline sidebar 구현하기

출처 : https://www.inflearn.com/course/%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EC%9E%A5%EA%B3%A0-%EC%9B%B9%EC%84%9C%EB%B9%84%EC%8A%A4/dashboard

 

장고(Django)를 배우기 시작한 입문자이시거나, 또는 배우고 싶은 생각이 있으신 분은 위 출처의 강의를 적극 추천드립니다!!!

 

---

 

Instagram Timeline sidebar 구현

 

 

#insta/views.py

@login_required
def index(request):
    return render(request, "insta/index.html", {
    })

 

---

 

#insta/urls.py

urlpatterns = [
    path('', views.index, name='index'), #추가

    path('post/new', views.post_new, name='post_new'),
    path('post/<int:pk>', views.post_detail, name='post_detail'),


    re_path(r'^(?P<username>[\w.@+-]+)/$', views.user_page, name='user_page'),    
    ]

 

---

 

#프로젝트/urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/' , include('accounts.urls')),
   #path('', include('insta.urls')), 기존 주소 
    path('insta', include('insta.urls')), # 추가

    path('', login_required(TemplateView.as_view(template_name='root.html')), name='root' ), # re_path를 사용하면 모든 주소에 매칭이 된다.
    path('identicon/images/<path:data>/', pydenticon_image, name='pydenticon_image'),

]

# 프로젝트 urls.py에서 기존 root 주소(=' ')를 가지고있던 instagram의 주소를  'instagram/' 으로 지정해주므로 

주소가 동일해지는 충돌을 피할 수 있습니다.

 

---

 

#프로젝트/templates/프로젝트/root.html -> insta/templates/insta/index.html 으로 이동

{% extends "insta/layout.html" %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <a href="{% url 'insta:post_new' %}" class="btn btn-primary">새 포스팅 쓰기</a>             
            </div>
        </div>
        <div class="row">
            <div class="col-sm-8">     
                Timeline           
            </div>
            <div class="col-sm-4">
                {% include "insta/timeline_sidebar.html" %}
            </div>
        </div>
    </div>
{% endblock %}

 

 

---

 

 

#insta/templates/insta/timeline_sidebar.html

<div class="d-flex p-2">
    <div class="mr-4">
        <img src="{{ user.profile_url }}" style="width: 40px; height: 40px;" class="rounded-circle"/>
    </div>
    <div>
        {{ user.username }}<br/>
        <small class="text-muted">{{ user.name }}</small>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header text-muted">
        Stories
    </div>
    <div class="card-body text-muted">
        Stories from people you follow will show up
    </div>
</div>
            
<div class="card mb-2">
    <div class="card-header text-muted">
        Suggestions for you
    </div>
    <div class="card-body text-muted">
        {% include 'insta/timeline_sidebar_user_follow.html' with friend_user=user%}
        {% include 'insta/timeline_sidebar_user_follow.html' with friend_user=user%}
        {% include 'insta/timeline_sidebar_user_follow.html' with friend_user=user%}
    </div>
</div>

 

 

# with friend_user=user의 의미는 user(=현재 로그인 유저)를 friend_user로 넘기겠다는 의미입니다.

# 템플릿 내에서 반복되는 문장이 있다면 따로 템플릿을 만들어 include로 불러오는 방법을 추천합니다.

 

 

 

---

 

 

#insta/templates/insta/timeline_sidebar_user_follow.html

<div class="d-flex">
    <div class="mr-3">
        <img src="{{ friend_user.profile_url }}" style="width: 32px; height: 32px;" class="rounded-circle"/>}
    </div>
    <div class="p-2">
        {{ friend_user.username }}
    </div>
    <div class="ml-auto">
        <a href="#">Follow</a>
    </div>
  </div>