속도에 대한 고민1 🐢

최근 프로젝트를 진행하면서 영화리스트 페이지구축을 하면서 속도에 대한 고민을 하게되었습니다.

🐢 왜 그럴까

저희 프로젝트같은 경우 영화데이터들은 읽기성능이 뛰어난 MongoDB를 사용하고있습니다.

하지만 영화의 양이 많고 보여줄 포스터들도 있기 때문에
큰 카테고리를 걸게되면 읽기성능이 현저하게 떨어지는 상황이 있었습니다.

이러한페이지에서 위의 내비게이션 바 에서 MOVIE와 TV SHOWS라는 큰 카테고리를 선택하더라고 많은 양 때문에 페이지를 읽어오는데 2분정도의 시간이 소요되었습니다.

🐇 해결방안 1

이렇게 페이지를 만들고 보니 5만개의 영화중에 절반이 TV SHOWS라면 한 페이지에 2만5천개의 영화를 동시에 띄우면서 포스터도 띄우게 된다는것을 알았습니다.

그러면서 20개씩 한페이지를 구성하며 페이지를 바꿔가면서 로딩을 하면서
2분이었던 로딩시간을 10초 까지 줄였습니다.

코드

    {% if data.number > 5 %}   => 페이지번호가 5보다 크다면 첫페이지 링크표시후 중간은 "..."으로 생략
        <a href="?page=1">1</a>
        <span>...</span>
    {% endif %}

    {% for i in data.paginator.page_range %}
        {% if data.number <= 5 and i <= 10 or data.number > data.paginator.num_pages|add:'-5' and i > data.paginator.num_pages|add:'-10' or i > data.number|add:'-5' and i <= data.number|add:'5' %}
            {% if i == data.number %}
                <span class="current-page">{{ i }}</span>
            {% else %}
                <a href="?page={{ i }}">{{ i }}</a>
            {% endif %}
        {% endif %}
    {% endfor %}

    {% if data.number < data.paginator.num_pages|add:'-5' %}
        <span>...</span>     
    {% endif %}

    {% if data.has_next %}
        <a href="?page={{ data.next_page_number }}">Next</a>
    {% endif %}
</div>

🐇 해결방안 2

10초까지 줄어서 아주 좋았지만
한국인으로서 10초를 기다릴수는 없었습니다.
더 좋은 방법이 없을까 하는생각끝에 좋은 방법을 사용하였습니다.

그것은 MongoDB에서 데이터를 불러오는 쿼리문을 최적화하는것입니다.

data = list(Media.collection.find({"media_type": media_type}))

처음에는 위의 코드처럼 media_type이 MOVIE인 도큐먼트의 정보를 모두 불러왔었습니다.

그렇게 되면서 숫자는 10000개라면 도큐먼트 안에 키값이 10개씩 있다면 10만개의 키값을 불필요하게 로드하고 있었습니다.

하지만 영화리스트 페이지기 때문에 그렇게 많은 정보가 필요한것이 아니었습니다.
필요했던 필드의 값은 posterPath와 titleKr 이었습니다.

이러한 필요한 필드만 가져오기위해서 프로젝션이라는 기능을 사용했습니다.

💡 프로젝션 : find() 쿼리에서 반환되는 도큐먼트에서 원하는 필드만 선택할 수 있도록 합니다.

코드

data = list(Media.collection.find({"media_type": media_type}, {"poster_image_url": 1, "title_kr": 1}))

이렇게 하면서 10초였던 시간을 1초로 단축하면서
한국에서도 서비스할 가능성이 올라갔습니다.🥰