본격적으로 AWS에 올릴 작업을 준비하기 전 5주차 마지막 과제
무비스타 만들기를 5-5강 세팅까지 강의 듣고 세팅 파일 받아둔 뒤,
5-6강 강의를 듣기 전에 한번 기존 프로젝트 파일 소스코드들을 복습(및 복사붙여넣기)해가면서 의식의 흐름대로 완성해보고자 한다.
- 서버 연결은 되고 있는가? localhost:5000 접속하자마자 showStar();가 작동해서 app.py에서 내려준 msg를 alert으로 출력이 잘 되는 걸 보니 연결은 잘된 것 같다.
구현하려는 기능은 무엇인가? 그리고 그 방법을 강의에서 그동안 배운 것들과 똑같은 방식으로 생각해보기
1) 5-5강에서 제공해주신 init_db.py 파일을 통해 크롤링하여 mongoDB에 insert, 저장해 둔 영화배우들의 리스트를 불러와서 보여주기
-> 서버측) pymongo 패키지는 받아져있고, find로 해당 db에서 뽑아와서 index.html쪽으로 넘겨줘서 보여주면 되겠지? 아, 그러려면 먼저 클라이언트 측에서 ajax로 요청이 들어와야겠구나.
-> 클라이언트(프론트)측) 음, 접속하면 처음부터 보여져야하므로 index.html의 script에는 문서가 로딩되자마자 실행되는 함수를 하나 만들어놓고, 그 함수에서 jQuery ajax로(GET방식) 적당한 주소로 연결(전달한 데이터 없음)
-> 서버측(app.py파일)에서는 그 주소로 요청이 들어오면 find로 mongodb 데이터 뽑아와서 그 데이터를 돌려주도록 코딩해두고
-> (다시 클라이언트, 프론트측) jQuery ajax코드 이용해 그 요청을 받아서 for문으로 한줄씩 반복하면서 temp_html만들어서 append로 HTML코드 붙여주면 될 듯.
--->> 오 하다보니까 temp_html은 어떻게 만들지? 왠지 star-list라는 클래스 갖고 있는 div가 전체 스타 카드들을 담는 거 같고 card클래스 div 전체가 스타 카드 한장인 것 같은데, 개발자도구에서 확인해보고, 복사해보니 맞는 듯. 그걸로 temp_html해서 db에서 불러온 애들 ${name}등으로 정보 교체해서 넣어보자.
2) 위로!(좋아요) 누르면 좋아요 개수가 1개 증가하기
-> db에 '좋아요'개수라는 정보가 들어있어야겠네.(그래야 저장되어있는 개수 정보를 불러와서 보여줄 수 있고 내가 눌렀을 때도 증가한 개수를 저장할 수 있겠지?) --->> 역시 이미 다 0으로 해서 입력이 되어있었다.
-> 버튼을 누르면 ajax로 서버측에 좋아요 개수를 하나 증가시키라는 명령이 전달돼야겠네
-> 아, 근데 좋아요 개수를 하나 증가시키려면 기존의 좋아요 개수를 알아야하는 거 아님? --->> find_one 사용법 dbprac.py에서 해놨던 거 복사해옴
-> 버튼이 눌려서 명령이 서버측으로 전달되면 기존의 해당 영화배우 좋아요 개수를 db에서 불러온 다음, 거기에 1을 더해서 정보를 수정하라는 명령을 서버에서 수행해야겠다. --->> update_one 사용법 dbprac.py에서 복사해옴
-> 그럼 버튼을 누를 때 지금 어느 배우의 버튼을 누른 것인지에 대한 정보가 전달되어야겠네 -> 이거 강의에 나온 적 있는 기능이던가?? 방금 클릭된 element가 무엇인지를 인식할 수 있는 javascript 기능이 있는지 구글링해야겠다
--->> 하다보니 card HTML코드에 onclick쪽을 보니 좋아요 버튼을 클릭했을 때 작동하는 함수를 호출하면서 배우 이름을 갖고 들어가게 되어있다! 애초부터 해당 배우 이름을 html코드에 append로 출력하면서 좋아요 버튼의 함수의 parameter로도 똑같이 나오게 넣어주면 해당 함수에서 지금 어느 배우의 버튼이 눌려진 건지에 대한 값을 가지고 동작이 가능하겠네.
--->>temp_html에 onclick-"likeStar('${name}')라고 넣어주니까 잘 작동함.(likeStar 함수 안에 console.log(name) 코드 작성해서 누를 때마다 콘솔에 찍히는지 보면서 확인.)
3) 좋아요개수가 높은 사람이 위에서부터 보이도록 순서대로 보여주기
-> 1의 보여주기에서 개수가 높은 사람부터 위에 보이도록 구현하면 새로고침할 때마다 그렇게 될 것이고,
-> 좋아요 버튼을 누를 때마다 새로고침되도록하면 좋아요 누르자마자 변동된 순서로 볼 수 있을 듯?
-> 그럼 보여줄 때 어떻게 개수가 높은 사람부터 보여주지? 돌아오는 데이터의 list에서 좋아요 개수가 높은 사람이 list의 앞쪽에 있어야한다
-> db에서 데이터를 뽑아서 list로 저장할 때 좋아요 개수 순서대로 list에 저장하거나, 저장을 먼저 한 다음 그 list 안의 값들을 좋아요 개수 기준으로 순서정렬을 다시 하는 python코드를 실행해서 다시 저장한 뒤, 그렇게 순서를 맞춘 list를 전달하기 OR 아니면 전달을 받고 나서 javascript에서 append(html)하기 전에 서버측에서 받아온 list를 좋아요 개수 순서대로 재정렬?(서버측에서 해서 주는 게 더 편할듯?)
---> 이게 서버측에서 하려면 list안에 dictionary들이 들어있는 형태인데 그 dictionary안에 들어있는 like라는 key에 있는 값을 기준으로 list내의 dictionary들을 정렬해야하는 상황이구나.. --->> https://hianna.tistory.com/409 이 글을 보니 javascript쪽에서 하는 게 더 편할 거 같기도?
--->>> DB에서 뽑을 때부터 정렬해서 뽑는 방법이 있지 않을까했는데! 역시 있었다. 이게 더 쉬운 방법일 듯. https://codesample-factory.tistory.com/219
--->>>>
star_list = list(db.mystar.find({}, {'_id': False}).sort("like",-1))4) 삭제버튼
-> 좋아요 개수 누를 때처럼 지금 버튼 누른 배우가 누구인지 정보를 전달하는 함수를 생성하고, ajax로 서버측에 배우의 정보와 함께 전달하면, 서버측 app.py에서 db에다 delete_one으로 해당 배우 정보 삭제 --->> delete_one 사용법 dbprac.py에서 불러옴
-> db에서 삭제되면 db에서 정보 불러올 때 그 배우 정보가 없으니까 index.html에서도 당연히 안 보이게 되겠지. ---> 자동새로고침 코드추가
