[Django App 3-13] 인스타그램 클론 코딩_검색결과 페이지

<Complete List>

1. 데이터베이스 및 UI 설계하기

• 인스타그램 UI 구성
• 데이터베이스 테이블 설계 및 구현

2. 앱 만들기

• instagram, accounts 앱 만들기
• views.py 분리하기

3. 회원가입 페이지

• 비밀번호 암호화 함수 구현 - 해시 함수

4. 로그인 페이지

• 세션에 사용자 ID 저장하기

5. 로그아웃 뷰

6. 메인 페이지

• 6-1. 좋아요 뷰 / 좋아요 취소 뷰
• 6-2. 북마크 뷰 / 북마크 취소 뷰
• 6-3. 해시태그 띄우기

7. 포스트 리스트 페이지

• 7-1. 팔로우 뷰 / 언팔로우 뷰
• 7-2. 팔로잉 계정 리스트 모달
• 7-3. 컬렉션 탭 추가

8. 포스트 상세 페이지

9. 포스트 업로드 페이지

• 9-1. 해시태그 입력

10. 회원 정보 수정 페이지

11. 비밀번호 수정 페이지

12. 포스트 수정 페이지

• 12-1. 해시태그 수정

13. 포스트 삭제 뷰

 

<To Do List>

14. 검색결과 페이지

 

---

 

'검색' 이라고 하는 것은 수많은 데이터 중에 사용자가 제시한 키워드와 연관된 데이터만을 필터링하는 것이다. 따라서,

 

보통 검색 키워드를 전달할 때는 URL의 query parameter를 이용해서 전달하는 경우가 많다. 그래서 여기서도 이 방법을

 

사용하고자 한다. 인스타그램에서 포스트를 검색하는 방법은 총 두 가지가 있으며 각각의 경우에 따른 로직은 다음과 같다.

 

1. 검색창에 검색하기

   1. 1 검색창을 하나의 form으로 생성
   2. 2 사용자가 키워드를 입력한 후 검색 버튼을 클릭하거나 엔터를 친다.
   3. 3 GET 방식으로 form에 입력한 데이터를 연결된 view로 보냄

2. 포스트에 연결된 해시태그 클릭하기

   2. 1 각 해시태그마다 검색 기능을 담당하는 view와 연결되도록 <a href> 속성을 준다.

 

1. 검색창에 검색하기

• _nav.html

...
<div class="search">
    <form action="{% url 'pystagram:pn_search' %}" method="GET" enctype="multipart/form-data">
        <input type="text" name="keyword" placeholder="검색">
    </form>
</div>
...

 

2. 포스트에 연결된 해시태그 클릭하기

• main.html / post_detail.html

...
<p class="hashtag">
    {% for tag in post.hashtags %}
    <a href="{% url 'pystagram:pn_search' %}?keyword={{ tag | urlencode }}">{{ tag }}</a>
    {% endfor %}
</p>
...

• {{ var | urlencode }} : URL에서 사용할 값을 escape 처리

  • 이 필터를 사용하지 않으면 URL에 담긴 파라미터가 key-value 쌍으로 전달되지 않고 단순히 search 이후에

    이어지는 URL의 한 부분으로 변형된다. 따라서, 이 부분이 서버로 전달되는 parameter라고 알려주기 위해

    urlencode 필터를 사용한다.

  • urlencode 사용 전: /search?keyword=apple

  • urlencode 사용 후: /search%3Fkeyword%3Dapple

 

14. 검색결과 페이지

• pystagram에서 작업

14.1 url

urlpatterns = [
    ...
    re_path(r'^p/search/$', SearchView, name='pn_search'),
]

 

14.2 SearchView

• splitviews 디렉토리에 SearchView.py 생성

• splitviews 의 __init.py__에 SearchView 를 import

 

• 로직(전체코드 - github)

1. query parameter로 전달된 검색 키워드를 받아옴
2. 검색 키워드를 해시태그로 가지고 있는 포스트 수 SELECT
3. 검색 키워드를 해시태그로 가지고 있는 포스트 리스트 SELECT
4. 가져온 데이터를 search.html에 rendering

 

14.3 search.html

• 전체코드 - github