영화앱5 : TMDB Api 활용하기

지난시간까지 만들었던 페이지들의 애니메이션을 일부 수정했다.

기존에는 스크롤 효과를 대체하기 위해서 만든애니메이션이었는데 어째선지 예상했던 것보다 세련되지가 않아서...vue에서 작업할 때에는 smooth scroll이라는 라이브러리를 사용해서 속도조절이 가능해서 다양한 스크롤이 가능해서였던 것 같다.
그래서 스크롤 효과 대신 fade-out-up, fade-in-up의 방식으로 바꿨다. 훨씬 보기 좋고, 내용 파악도 용이해졌다.

넷플릭스 클론 코딩에서 많이들 하는 TMDB Api를 활용한 영화 데이터 불러오기 및 영화 검색 기능 구현이다.

리액트 a-z 인프런 강좌에서 만들었던 API와 CSS가 많이 활용될 것이다.

먼저 API는 .env.local에 TMDBApi키를 추가해주고 시작한다.
//.env.local

NEXT_PUBLIC_API_KEY = "AIz...
NEXT_PUBLIC_AUTH_DOMAIN = "teal-and-orange-next-js.firebaseapp.com"
NEXT_PUBLIC_PROJECT_ID = "teal-and-orange-next-js"
NEXT_PUBLIC_STORAGE_BUCKET = "teal-and-orange-next-js.appspot.com"
NEXT_PUBLIC_MESSAGING_SENDER_ID = "57...
NEXT_PUBLIC_APP_ID = "1:57...
NEXT_PUBLIC_MEASUREMENT_ID = "G-Q...
가장 하단에 TMDB에서 받은 API키를 추가해준다.
NEXT_PUBLIC_TMDB_API_KEY = "8506b37...

api는 아래와 같이 작성하였는데,
https://api.themoviedb.org/3를 기본 url로 하고, 자주 쓰이는 fetch 데이터를 추가해주었다.

import axios from "axios";

const tmdb_api_key = process.env.NEXT_PUBLIC_TMDB_API_KEY
const tmdbApi = axios.create({
    baseURL: "https://api.themoviedb.org/3",
    params: {
      api_key: tmdb_api_key,
      language: "ko-KR",
    },
  });

  export const requests = {
    fetchNowPlaying: "movie/now_playing",
    fetchTrending: "/trending/movie/week",
    fetchTopRated: "/movie/top_rated",
    fetchActionMovies: "/discover/movie?with_genres=28",
    fetchComedyMovies: "/discover/movie?with_genres=35",
    fetchHorrorMovies: "/discover/movie?with_genres=27",
    fetchRomanceMovies: "/discover/movie?with_genres=10749",
    fetchDocumentaries: "/discover/movie?with_genres=99",
  };
  
  export default tmdbApi;

여기에 앞으로 자주 쓰게 될 함수들을 추가해준다.

  export const getRecommenations = (movie_id:number) => tmdbApi.get(`/movie/${movie_id}/recommendations`)
  export const getMovieDetail = (movieId:number) => tmdbApi.get(`/movie/${movieId}`)
  export const getSearchData = (serchValue)=>{tmdbApi.get(
    `/search/movie?include_adult=false&query=${serchValue}`
  )}