Django 인스타그램 클론코딩(11) - 좋아요 버튼 구현하기

2019.05.05 인스타그램 클론 코딩하기(좋아요 버튼 구현하기)

인스타그램 만들기(11)

• dstagram 소스코드

구현 로직

1. photo 앱 만들기
2. 모델 설계하기
3. views 설계하기
   1. list페이지
   2. 상세페이지
   3. 삭제하기
   4. 수정하기
   5. 생성페이지
4. url 연결시켜주기
5. template 만들기
   1. create/list/update/delete/detail
6. 사진 화면에 업로드 할 수 있도록 만들기
7. success url을 get_absolute_url로 연동시켜보기
8. account 앱 만들기
   1. 로그인/로그아웃 기능 구현하기
   2. 템플릿에 로그인/로그아웃 보이도록 하기
   3. 로그아웃 되었을 때는 create 및 sign out가 안 보이도록 구현하기(분기)
9. 권한 문제 해결하기
   1. html 기준에서 해결하기
   2. 링크로 들어와도 안 되도록 해결해보기
      1. view를 조정하기
10. 댓글 기능 구현하기
    1. 댓글은 상세페이지에서 가능하도록 하기
    2. 소셜 댓글기능으로 구현하기
11. 좋아요/저장하기 버튼 만들기
    1. 스프라이트 이미지 기법 활용하기
    2. 클릭하면 색깔 바뀌도록 구현하기
    3. 로그인을 해야지 버튼 클릭이 되도록 하고 클릭을 하면 like count 올라가기
    4. like에 대한 정보를 저장하기
    5. 좋아요 counting 표시해주기
    6. 디테일 페이지에서 좋아요를 누르면 디테일 페이지에서 그대로 유지하도록 하기
       1. view와 like에서의 분기
       2. 레퍼러를 활용하여 해당 주소가 어디서부터 시작됬는지 확인한다.
    7. 저장하기 기능 추가하기
12. 좋아요한 포스팅만 보기 기능 구현하기
13. 저장한 포스팅 리스트 페이지 구현하기
14. 좋아요한 포스팅 및 저장한 포스팅 리스트 보기는 로그인한 사람만 보여주기
    1. view단에서 시행
       1. dispatch 활용
       2. LoginRequiredmixin
    2. html 활용
15. my page에 내가 올린 사진들만 나오도록 구현한다.
16. my page에 팔로우 기능 추가하기

이번 시간에 할 것(11)

• 좋아요 버튼 만들기
  • 스프라이트 이미지 기법 활용하기
  • 클릭하면 색깔 바뀌도록 구현하기
  • 로그인을 해야지 버튼 클릭이 되도록 하고 클릭을 하면 like count 올라가기
  • like에 대한 정보를 저장하기
  • 좋아요 counting 표시해주기
  • 디테일 페이지에서 좋아요를 누르면 디테일 페이지에서 그대로 유지하도록 하기
    1. view와 like에서의 분기
    2. 레퍼러를 활용하여 해당 주소가 어디서부터 시작됬는지 확인한다.

좋아요 및 저장하기 버튼 만들기

1. like와 favorite 모델 구현하기
2. manytomanyField 사용하기
3. migration해주기 migrate해주기
4. views 연결해주기
5. url 연결해주기
6. template에 나오도록 구현해주기

스프라이트 이미지 기법

• 이미지는 한장인데 위치를 조절한다.
• photo - static - images - instagram.png
• 스태틱 리소스를 띄우기 위해서
  • { load static }

1. 인스타그램 접속 및 좋아요 버튼 옆에서 검사 보기
2. 해당이미지의 url을 확인하고 해당 url로 이동
3. 이미지 확인 및 다른 이름으로 저장하여 로컬로 이동하기
   1. photo아래에 static 디렉토리 생성
   2. static 디렉토리 아래에 images 디렉토리 생성
   3. 그 아래에 원하는 이름으로 저장

models에 like / save(favorite)추가해주기

• 결국 버튼을 클릭하면 어떤 업로드가 일어나야 하는데 그것을 구현하기 위해서는 클릭시 url을 연결해야 하고 그러기 위해서는 views가 필요하고 또 views가 움직이기 위해서는 models이 필요하다.

1. like와 favorite 모델 구현하기
2. manytomanyField 사용하기
3. migration해주기 migrate해주기
4. views 연결해주기
5. url 연결해주기
6. template에 나오도록 구현해주기

views 연결해주기

1. like view 구현하기

• get 방식으로 온다고 설정
• 로그인이 확인되지 않으면 자료를 숨겨라
• photo_id를 확인
• photo는 pk를 가지게 한다.
• user가 이미 좋아요 한 사람 중에 있으면 클릭했을 때 지워지도록 하고
• 그렇지 않으면 더하게 해라
• referer_url을 통해서 url을 parser 하여
  • 만약에 메인 페이지에서 좋아요를 누르면 그 메인페이지에 있도록 하고
  • 상세페이지에서 좋아요를 누르면 그 상세페에지로 redirect한다.

2. 저장하기(favorite)구현하기

• like와 마찬가지로 get 형식으로 온다고 설정
• 로그인 되어 있지 않으면 숨겨서 보이지 않도록 한다.
• 위와 동일

url 연결해주기

• url 연결

template 구성해주기

• base.html을 통해 위의 저장된 static 불러오기 및 사진 위치 설정해주기
• photo_list를 통해 해당 위치 구현해주기
• photo_detail에 해당 위치를 구현해주기

base.html

• 각 아이콘들의 위치를 정확히 찾는다.
  • 좋아요 눌렀을 때 사용될 채워진 사랑표
  • 좋아요 된 상태에서 한번 더 눌렀을 때 사용될 빈 사랑표(평소 때 사용)
  • 저장하기 눌렀을 때 사용될 색깔 있는 저장표
  • 저장하기 된 상태에서 한번 더 눌렀을 때 사용될 색깔 없는 저장표(평소에도 사용)
• 각각의 active에는 채워진 사랑표 및 색깔 있는 저장표를 사용한다.
• text-indent는 list.html의 a태그 뒤에 적혀질 글자가 안 보이도록 설정해준다.
• overflow hiddend을 통해 옆으로 밀어진 글자를 아예 숨기도록 한다.
• 위치는 네이버의 검사를 통해 style에서 backgroud-position을 옴겨가며 찾는다.

photo_list.html 구현하기

• url 링크를 연결시켜주고 만약에 좋아요한 유저가 있으면 아이콘 active를 시켜준다.
• 그리고 좋아요는 all.count를 활용하여 몇명이 좋아요 했는지 표시하도록 한다.
• favorite 역시 favorite한 유저가 있으면 아이콘 active시켜준다.

photo_detail.html

• photo_detail에도 적절한 위치에 추가해준다.
• views.py에서 주소 parse를 통해 분기시켜줬기 때문에 detail에서 좋아요나 저장하기를 눌러도 detail 페이지에서 머문다.
• 만약 저장하기가 눌리지 않는다면 화면 분할이 잘못 되었을 수 있다.
• class sytle='width: 30rem;' 에서 정해놓은 width를 삭제함으로 문제를 해결할 수 있다.

구현 확인하기

• 클릭을 이것저것 해보며 구현이 잘 된 것을 확인한다.