-
React api.jsProject using React/Cloning Netflix 2021. 5. 9. 06:00
TMDB API
TMDB에서 로그인을 하면 API 키를 발급 받을 수 있다.
React Netflix app을 만들기 위해 서버와 DB는 The Movie Database API를 사용하기로 했다.
이 중 Movies, Search와 TV API를 사용할 것이다.
src/api.js
큰 프로젝트가 아니라서 api.js 라는 한 개의 파일만을 만들고 이 안에 moviesAPi와 tvApi를 모아뒀다.
import axios from "axios"; const api = axios.create({ baseURL: "https://api.themoviedb.org/3/", params: { api_key: process.env.REACT_APP_TMDB_API, language: "en-US", }, }); export const moviesApi = { nowPlaying: () => api.get("movie/now_playing"), upcoming: () => api.get("movie/upcoming"), popular: () => api.get("movie/popular"), movieDetail: (id) => api.get(`movie/${id}`, { params: { append_to_response: "videos", }, }), search: (term) => api.get("movie/search", { params: { query: encodeURIComponent(term), }, }), }; export const tvApi = { topRated: () => api.get("tv/top_rated"), popular: () => api.get("tv/popular"), airingToday: () => api.get("tv/airing_today"), showDetail: (id) => api.get(`tv/${id}`, { params: { append_to_response: "videos", }, }), search: (term) => api.get("search/tv", { params: { query: encodeURIComponent(term), }, }), };
참고 자료
- 노마드 코더의 React 멤버쉽 강의
- The Movie Database API
- themoviedb.org
소스 코드
github.com/zpskek/Nomflix-v2/commit/1c687b13adf73e577a2c567f32b38074d4971166
'Project using React > Cloning Netflix' 카테고리의 다른 글
React create Header.js (0) 2021.05.09 React GlobalStyles.js (0) 2021.05.09 React Container and Presenter Pattern (0) 2021.05.09 React Router 설정 with react-router-dom (0) 2021.05.02 Cloning Netflix settup (0) 2021.05.02