[ React ] TMDB api , spinner

TMDB API

 

 

1. 가입

https://www.themoviedb.org/?language=ko

The Movie Database (TMDB)

 

 

2. More > API  또는  프로필 > 설정 > API 

 

 

3.  API  >  생성 > Developer

 

 

4. 사용약관 스크롤  맨아래 동의 

 

 

5.  작성 

 

 

6. API 페이지 이동 ( API, 액세스토큰  사용 )

 

 

7.  More > API 

 

 

 

8.  API Reference 

 

 

 

9. Movie List > Now Playing > Try it > JSON 생성 

 

 

10.

 

 

11.  이미지 기본 경로 

https://developer.themoviedb.org/docs/image-basics

Basics

 "backdrop_path": "/zOpe0eHsq0A2NvNyBbtT6sj53qV.jpg",
 
 ///////////////////
 
 https://image.tmdb.org/t/p/w500/
 
 ////////////////////
 
"https://image.tmdb.org/t/p/w500/zOpe0eHsq0A2NvNyBbtT6sj53qV.jpg",
  
  ------------------------------------
  https://image.tmdb.org/t/p/w500/ +  backdrop_path

 

 

12.  현재 상영작 axios

https://api.themoviedb.org/3/movie/now_playing

 

import axios from 'axios';

const apiKey = 'YOUR_API_KEY';  // 본인의 TMDB API 키 입력

axios.get('https://api.themoviedb.org/3/movie/now_playing', {
  params: {
    api_key: apiKey,
    language: 'ko-KR',   // 결과를 한국어로 받기
    region: 'KR'         // 한국에서 상영 중인 영화 필터링
  }
})
.then(response => {
  console.log(response.data.results);  // 현재 상영작 목록 출력
})
.catch(error => {
  console.error('Error movies:', error);
});

 

 

 

 

영화 장르 ID 목록

장르	ID
액션	28
모험	12
애니메이션	16
코미디	35
범죄	80
다큐멘터리	99
드라마	18
가족	10751
판타지	14
역사	36
공포	27
음악	10402
미스터리	9648
로맨스	10749
SF (공상과학)	878
TV 영화	10770
스릴러	53
전쟁	10752
서부	37

 

 

TV 프로그램 장르 ID

장르	ID
액션 & 모험	10759
애니메이션	16
코미디	35
범죄	80
다큐멘터리	99
드라마	18
가족	10751
키즈	10762
미스터리	9648
뉴스	10763
리얼리티	10764
SF & 판타지	10765
토크쇼	10767
스릴러	10766
전쟁 & 정치	10768
서부	37

 

API 파라미터 설명

 

파라미터	설명
api_key	TMDB API 키
language=ko-KR	한국어로 결과 반환
region=KR	한국에서 상영 중인 영화만 필터링
page=1	페이지네이션 (결과가 많을 경우 페이지 이동)

 

 

예)  discover 엔드포인트로 현재 상영 중이면서 액션 장르인 영화만 직접 요청.

      now_playing 엔드포인트로 현재 상영작을 가져온 후, 액션 장르(ID: 28)로 필터링.

 

 

영화

import axios from 'axios';

const apiKey = 'YOUR_API_KEY';  // 본인의 TMDB API 키 입력

//https://api.themoviedb.org/3/movie/now_playing
axios.get('https://api.themoviedb.org/3/discover/movie', {
  params: {
    api_key: apiKey,
    language: 'ko-KR',   // 한국어로 결과 받기
    with_genres: 28      // 액션 장르 ID
  }
})
.then(response => {
  console.log(response.data.results);  // 액션 영화 목록 출력
})
.catch(error => {
  console.error('Error movies:', error);
});

 

tv

import axios from 'axios';

const apiKey = 'YOUR_API_KEY';

axios.get('https://api.themoviedb.org/3/discover/tv', {
  params: {
    api_key: apiKey,
    language: 'ko-KR',
    with_genres: 18  // 드라마 장르 ID
  }
})
.then(response => {
  console.log(response.data.results);  // 드라마 목록 출력
})
.catch(error => {
  console.error('Error fetching drama TV shows:', error);
});

 

 

 

코미디(35) + 로맨스(10749) 영화 가져오기

axios.get('https://api.themoviedb.org/3/discover/movie', {
  params: {
    api_key: apiKey,
    language: 'ko-KR',
    with_genres: '35,10749'  // 코미디 + 로맨스
  }
})
.then(response => {
  console.log(response.data.results);  // 코미디 로맨스 영화 목록 출력
})
.catch(error => {
  console.error('Error movies:', error);
});

 

 

json 예시 

[
  {
    "title": "존 윅 4",
    "overview": "존 윅의 마지막 복수극이 시작된다.",
    "release_date": "2024-01-20",
    "genre_ids": [28, 53],  // 액션, 스릴러
    "poster_path": "/path_to_poster.jpg"
  },
  {
    "title": "분노의 질주 10",
    "overview": "가족과 함께하는 스릴 넘치는 질주.",
    "release_date": "2024-01-05",
    "genre_ids": [28, 80],  // 액션, 범죄
    "poster_path": "/path_to_poster2.jpg"
  }
]

 

 

 

 

---

 

 

 

# Spinners 

 

 

https://www.davidhu.io/react-spinners/

React Spinners

 

 

https://www.davidhu.io/react-spinners/storybook/?path=/docs/barloader--docs

@storybook/cli - Storybook

 

예)

 

 

 

<PacmanLoader
  color="#ad5555"
  speedMultiplier={1}
/>

 

 

 

 

https://mhnpd.github.io/react-loader-spinner/

Hello from React Spinners | React Spinners