Watcha Pedia Ep.3 (API)

영화 관련 API

영화 관련 API를 사용하기 위해 themoviedb 사이트에서 영화 API를 요청한다
Themoviedb 사이트에 회원 가입을 한 후, 프로필 -> 설정 -> API에 들어가 API 승인을 위한 문서를 작성해 주면 된다. 어플리케이션 개요를 짧게 써도 바로 API KEY를 받을 수 있기 때문에 편하게 적으면 된다.

API 키를 복사하여 vscode 맨 위 root 파일에 .env 파일을 생성 후

REACT_APP_API_KEY= {복사한 키}
REACT_APP_API_HOST = https://api.themoviedb.org

저 변수명에 키를 넣어 주고 HOST url도 함께 작성해 준다.

Axios

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다.
(HTTP 비동기 통신 라이브러리)

API를 활용하기 위해 Axios를 설치해 준다.

npm i axios

Api axios.create()

import axios from 'axios'

const axiosInstance = axios.create({
    baseURL: `${process.env.REACT_APP_API_HOST}/3`,
    params: {
        api_key: process.env.REACT_APP_API_KEY,
        language: 'ko-KR'
    }
})

export default axiosInstance;

.create() 메서드를 사용해 사용자 정의 구성을 사용하는 axios 인스턴스를 생성할 수 있습니다.

themoviedb api doc

API 코드

import axiosInstance from "./index";

export const latestApi = () => axiosInstance.get('/movie/latest')
export const upcomingApi = () => axiosInstance.get('movie/upcoming');
export const nowPlayingApi = () => axiosInstance.get('movie/now_playing');
export const topRateApi = () => axiosInstance.get('/movie/top_rated');
export const popularApi = () => axiosInstance.get('/movie/popular');
export const detailApi = (movieId: string) => axiosInstance.get(`/movie${movieId}`);
export const similarApi = (movieId: string) => axiosInstance.get(`/movie${movieId}/similar`);
export const searchApi = (query: string) => axiosInstance.get(`/search/movie?query=${query}`);

일단 필요한 코드만 넣어서 작성