[코딩온] 검색 기능 구현을 위한 TMDB API의 활용 방법

TMDB API 에는 API의 검색 방법에 대해서 세 가지를 알려준다.
https://developer.themoviedb.org/docs/finding-data

1. /search 

( https://developer.themoviedb.org/reference/search-movie)
일반적인 검색 기능으로 text 기반의 검색 기능이다. query string을 입력하면 가장 근접한 검색 결과를 보여준다. 하나의 영화에 대해 원본, 번역된 이름 등 모든 검색 결과를 보여준다. 하지만 성능이 아쉬운 점이 오직 '영화 제목'만 검색한다. 

query에 roman holiday를 치고, 원하는 언어 타입 선택 후 try it 버튼을 눌러주면 response 결과 값도 알려준다. 

 

프로젝트 기간에 다른 API를 쓰고 있는 친구를 보았는데, TMDB API가 확실히 보기 좋고 쓰기도 좋게 친절하게 잘 되어있는 듯하다.

Response결과 값에 다행히 release_date가 있어서 고전 영화만 검색 결과를 띄우고 싶어, 이 값을 따로 빼서 filter method를 활용해 특정 연도의 범위만 표시할 수 있도록 했다. 아쉽게도 이 검색 방법에는 연도의 범위를 설정할 수는 없었기에 이 방법이 최선인 듯 했다. 아래는 해당 부분을 적용한 코드이다. 

  useEffect(() => {
    if (!query) {
      setLoading(false); 
      return;
    }
    const fetchData = async () => {
      //query가 없다면 return
      if (!query) return;
      try {
        const response = await axios.get(
          `https://api.themoviedb.org/3/search/movie?query=${encodeURIComponent(
            query
          )}&include_adult=false&language=en-US&page=1`,
          {
            headers: {
              accept: 'application/json',
              Authorization: `Bearer ${process.env.REACT_APP_TMDB_KEY}`,
            },
          }
        );
	//영화의 연도 범위를 위한 filter가 적용된 부분
        const filteredMovies = response.data.results.filter((movie) => {
          const releaseYear = new Date(movie.release_date).getFullYear();
          return releaseYear >= 1927 && releaseYear <= 1969;
        });

        setData({ ...response.data, results: filteredMovies });
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [query]);

++ 아쉬운 점 하나 추가하자면, 이 request 결과에 장르에 대한 정보가 오직 숫자로만 표기된다.  

이를 해결하기 위한 방법은 따로 글을 작성할 예정이다.

---

2. /discover

( https://developer.themoviedb.org/reference/discover-movie )
필터 기능에 의한 검색 결과라고 생각하면 된다.

보여준 화면 밑에 더 많은 필터 기능이 존재한다 / 

여기서 잘 활용한 query params는 release_date, sort_by, pages이다.
기본적으로 화면에 연도별로 검색할 수 있는 select tag를 보여주고, 인기순과 최신순의 select tag도 걸어주어 sort_by도 활용했다. pages는 인피니티 스크롤 기능에 활용했다. 인피니티 스크롤 또한 다른 글에서 작성할 예정이다.

select tag의 연도에 따라 화면이 변화는 모습.

 

---

3. /discover

( https://developer.themoviedb.org/reference/find-by-id )
외부 소스와 관련해서 id에 대해서 검색하는 방법인 것 같은데, 먼저 다른 소스의 id를 알아야 하는 게 번거로워 보였다. 이 방법은 이번 프로젝트에서는 쓰지 않았다.