Backend

31. 대문 페이지

● 대문 페이지 landing.html 추가 bootstrap 적용을 위해 {% load static %}을 추가하고 static 폴더의 CSS파일과 Font awesome을 가져온다. 대문 페이지 역시 navbar와 footer을 추가하여 일관성 있게 해준다. landing.css 추가 후 페이지 조정 배경 화면에 쓸 이미지를 따로 폴더를 만들어 넣고 보기 좋게 하기 위해 css를 위한 폴더와 파일을 만든다. 여기서 background-size: cover을 입력하면 화면 크기에 맞춰 최대로 보이게 해준다. -webkit -moz -o는 다양한 브라우저에서 동일하게 작동하게 하기 위함이다. 태그에 의해 출력된 글자가 검정색인데 흰색으로 출력하게끔 하고 위치를 조정하기 위해 다음과 같이 한다. ● 대문에..

30. 검색 기능 구현

JavaSrcipt로 검색 기능 구현 포스트 목록, 포스트 상세 페이지 우측에서 검색 창이 작동하도록 구현 할 것이다. 보통 특정 URL로 접근시 서버에서 처리해 주는 방식은 python으로 하였으나 검색 창에서 사용자의 클릭이 아닌 직접 입력으로 입력된 값을 서버로 보내 원하는 값을 찾도록 하는 것은 javascript로 해야한다. base.html을 수정하여 검색 창 내용을 서버로 전달 script 부분에서 searchPost() 함수를 입력한다. id="search-input"으로 input 요소의 값을 가져와 함수에서 쓸 수 있도록 하고 onclick="searchPost"로 클릭시 searchPost() 함수를 실행 시키도록한다. searchPost() 함수의 document.getElement..

29. 사용자 아바타 구현

구글 아바타 설정 구글로 로그인 할 시 사용자가 설정해 놓은 아바타가 나오도록 설정한다. 아바타의 모양은 다음과 같다. models.py 파일 수정 get_avatar_url() 함수는 소셜 로그인을 한 경우 로그인한 계정의 아바타 URL을 가져온다. 그렇지 않을시 기존에 있던 placehold.it 이미지를 사용한다. post_detail.html 파일 수정 사용자 아바타가 보여야 하기 때문에 post_list 보다는 post_detail 부분이 적당할 것이다. 따라서 해당 파일인 post_detail.html에 Comment 모델에서 만든 get_avatar_url() 함수를 받아 아바타의 이미지를 받아온다. 이메일로 가입한 회원 아바타 설정 이 책의 저자가 운영하는 doitdjango.com/ava..

28. Pagination (여러 페이지에 나누어 보여주는 기능)

Django로 pagination 구현 pagination 기능은 유저들이 포스트 목록을 보기 좋게 일정 숫자 만큼 나눠서 보여주는 기능이다. 다음 포스트 목록을 보려면 다음 페이지로 넘어가는 버튼을 눌러야 한다. 이 기능은 웹 사이트의 효율에도 영향을 미치는데 만약 한 페이지에 포스트 목록을 100개가 넘어가도록 보여준다면 불러 오느라 소모된 시간, 불필요한 데이터 소모 등의 문제로 유저 입장에서는 페이지 로딩 시간이 길어지게 되고, 서버 입장에서는 불러올 필요가 없는 데이터로 인한 부하가 일어나게 될 것이다. 그렇기에 유저를 위하든 서버를 위하든 pagination 기능은 필요하다. 이 기능 구현을 Django가 간편하게 구현할 수 있도록 관련 기능을 제공해 준다. views.py에 관련 코드를 추가..