activate 토글

taejin5314님!! ㅋㅋ

안타깝게도 best 3예제 수업은 이미 수강을 해주셨더라구요 ㅠ ㅠ 

저희 수업이 총 3개인데 페이스북 클론 수업과 조금은 중복되는 내용이긴 하지만 인스타그램 클론 수업 추가해 드렸어요 ^ ^ ㅎ 

항상 좋은 질문과 의견 감사드립니다 ^ ^ ㅎ 

taejin5314님 우선 공유해주신 워크스페이에 내용을 수정해서 좋아요 버튼이 새로고침을 해도 유지가 될수 있도록 변경해 두었습니다 

수정된 부분은 post_list.html파일의 137라인 - 144라인 입니다

좋아요 버튼 부분을 데이터베이스의 내용에 따라서 다르게 표시해 주는 부분이에요

좋아요 모델에 내용이 있는지 확인하고 active가 있는 부분과 없는 부분으로 다르게 표시해 주는 소스라고 보시면 됩니다 :) 간혹 영상에 내용이 빠져 있을때가 있더라구요 요런 제보 너무 감사드려요 인프런가입하셨던 이메일 주소 남겨주시면 저희 강좌중에 장고 best 3 예제 강의 쿠폰 날려드릴게요 ^ ^ ㅎ 감사합니다 taejin5314님 !! 

아이코!! 말씀해 주신 부분 확인해 보니 영상에서 누락된 부분이 있었네요 ㅠ ㅠ 주말 중에 내용 보강해서 디스크립션 박스와 본 질문답변에 공유 드리도록 하겠습니다 감사합니다 taejin5314님 !! 

네 강의 정말 잘 듣고 있습니다. 빠른 답변 감사드려요. :)

일단, admin 페이지에 like 값은 잘 들어갑니다. 그러나, 소스코드를 확인해 봐도 like 버튼에 active가 들어가게 하는것은 elem.classList.toggle('active')밖에 없는 것 같습니다. 이게 새로고침을 하게되면 active가 들어가 있더라도 다시 원상태로 돌아가게 되어 admin에 like 값이 있더라도 그것과 상관없이 원상태로 돌아가는 것 같습니다.

예를 들어서

<div class="like-btn" name="{{ post.id }}" data-name="heartbeat"><span class='icon icon--like-line'></span>좋아요</div>

이렇게 클래스에 like-btn만 있다면 좋아요 버튼에 불이 들어와 있지 않는데 버튼을 클릭하게 되면 클래스에 'active'가 토글이 되어 들어가 클래스가 'like-btn active'로 바뀌게 되는 것으로 저는 이해하고 있습니다.

그런데 이 상태에서 새로고침 버튼을 누르게 되면 admin에 like 값이 있음에도 불구하고 다시 클래스 값이 'like-btn'으로 돌아오게 되어서 좋아요 버튼이 눌리지 않은 것처럼 아이콘이 돌아오게 됩니다.

또한 강사님이 post_list.html 파일에 좋아요 버튼 클래스를 'like-btn active'로 해두신 것도 왜 그런지 궁금합니다. 이렇게 하면 좋아요를 누르지 않아도 항상 버튼에 불이 들어와 있는 것이 아닌가 합니다.

제 워크스페이스 공유해 드려요. :)

https://goor.me/uWtTq

taejin5314님 안녕하세요 :)

좋아요 버튼을 누르게 되면 like 모델에 내용이 쌓이는 구조로 되어있으세요 :) db에 내용이 쌓이게 되면 새로고침을 했을때 db의 내용을 기준으로 active 클래스를 넣어주는 방식이기 때문에 새로고침을 해도 active는 남아있게 됩니다 

1. 우선 admin 페이지를 통해서 model에 like버튼을 눌렀을때 값이 잘 들어가는지 확인해 주세요 

2. 값이 잘 들어간다면 실제 post리스트를 보여주는 페이지에서 post에 있는 like를 불러오는 부분이 잘 되어있는지 확인해 주세요

위에 2가지 항목을 체크하시면 active가 잘 표시될거에요 ㅎ 혹시 안되시면 원격 컨테이너 공유 부탁드립니다 ^ ^ 

오.. if문을 사용하면 되는 거였군요. 빠른 답변 감사드립니다~ :)

이메일 주소는 taejin5314@gmail.com입니다!