React/따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

무비앱 시리즈 #3 The MovieDB API 설명

yooni825 2023. 11. 21. 12:52

- 만들 웹 사이트에 있는 영화 정보들을 "The MOVIE DB" 사이트에서 API를 통해서 그 정보를 제공받을 예정

 

API 사용 방법

1. https://www.themoviedb.org/

 

The Movie Database (TMDB)

Welcome. Millions of movies, TV shows and people to discover. Explore now.

www.themoviedb.org

- api 사용을 위해 key를 받아야 하며 회원가입 진행

- 회원가입 후 Settings > API > Request an API Key > Create > Developer 로 클릭 > API key 발급

- 영화 최신순 데이터

- 영화 세부사항 데이터

- 영화 리뷰 데이터

 

영화 포스트 불러올 때

- 영화 포스터를 불러올 때 위 3개의 URL 사용

- /p/ 뒤에 오는 w500이나 original은 영화 포스터 이미지의 사이즈를 의미

 

-> API_URL과 IMAGE_URL에서 동일한 부분을 선수 처리해줘서 굳이 처음부터 type할 필요없게 해주는게 좋음!!

 

 

동일 URL part 선수 처리 방법

- boiler-plate 파일 > client > components > Config.js 에 코드 작성

//SERVER ROUTES
export const USER_SERVER = '/api/users';

export const API_URL = 'https://api.themoviedb.org/3/';

export const IMAGE_BASE_URL = 'https://image.tmdb.org/t/p/';