내일배움캠프

Django 팀 프로젝트 - SNS 만들기

개발중인 메인화면

프로젝트 3일차

카드를 개발했다
상단에는 임시적으로 유튜브 플레이어를 위치시켰고 추후에 썸네일을 크롤링해서 넣어줄 생각이다
이 부분은 글을 쓸 때 유튜브 url을 넣도록 되어 있는데 팀원분이 어려워 하셔서 같이 만들었다

# youtube url 데이터 검사
if 'youtube.com' in youtube_url :
   youtube_url_check = youtube_url.split('watch?v=')[1][:11]
elif 'youtu.be' in youtube_url :
   youtube_url_check = youtube_url.split('be/')[1]
else :
   return render(request, 'tweet/create_post.html', {'error': '유튜브 주소창을 입력해주세요.'})

위와 같이 사용자가 입력한 youtube url이 적절한지 검사하고 split및 slicing을 통해 유튜브 주소만 빼와서 저장하고 그걸 유튜브 플레이어로 보여주는 방식이다

왼쪽 하단에는 작성자의 프로필 사진 및 사용자명을 보여주는 부분을 추가했다.
이걸 누르면 작성자의 프로필로 넘어가게 된다

오른쪽 하단의 좋아요 표시는 오늘 회의 후 별 표시로 넘어갈 예정이고 좋아요를 누르는 버튼 자체는 글 상세보기 화면으로 넘어갈 예정이다.

두번째로는 장고 내부함수를 이용해 페이지네이션을 구현했다

def home(request):
    user = request.user.is_authenticated
    if user:
        all_post = Post.objects.all().order_by('-create_at')
        page = request.GET.get('page')
        paginator = Paginator(all_post, 8)
        page_obj = paginator.get_page(page)
        
        try:
            page_obj = paginator.page(page)
        except:
            page = 1
            page_obj = paginator.page(page)
        
        return render(request, 'tweet/home.html', {'all_post': all_post, 'page_obj' : page_obj})
    else:
        return redirect('/sign-in')

Paginator 함수를 불러와 paginator 객체를 만들고 페이지를 나눠주었다

<ul class="pagination">
      {% if page_obj.has_previous %}
      <li class="page-item">
        <a class="page-link" href="?page={{page_obj.previous_page_number}}" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      {% endif %}

      {% for p in page_obj.paginator.page_range %}
      <li class="page-item"><a class="page-link" href="?page={{p}}">{{p}}</a></li>
      {% endfor %}
      {% if page_obj.has_next %}
      <li class="page-item">
        <a class="page-link" href="?page={{page_obj.next_page_number}}" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
      {% endif %}
    </ul>

프론트엔드에선 이런 식으로 리턴받은 page_obj를 이용해 현재 페이지 및 이전 페이지, 다음 페이지의 유무를 통해 버튼을 만들어 주었다

Think

이제 슬슬 완성도가 높아져 간다
내일은 세부적인 부분을 구현하고 좋아요 버튼을 중점적으로 개발할 예정이다
코딩은 하면 할 수록 재밌다!