지난시간까지 만들었던 페이지들의 애니메이션을 일부 수정했다.
기존에는 스크롤 효과를 대체하기 위해서 만든애니메이션이었는데 어째선지 예상했던 것보다 세련되지가 않아서...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}`
)}