[영화 앱 2] TMDB API 사용하여 영화 데이터 불러오기

https://www.themoviedb.org/

The Movie Database (TMDB)

 

 

본인 API 키가 있어야 하므로 회원가입하고 

API키 발급받는다. 

 

https://developer.themoviedb.org/reference/discover-movie

Movie

 

 

 

필요한 쿼리스트링 확인한다.

 

 

인기순 조회 

https://developer.themoviedb.org/reference/movie-popular-list

Popular

 

 

 

여기다가 본인 API키 넣어서 보내면 JSON 타입으로 확인가능함 

 

postman으로 확인해봄

 

 

 

 

 

이제 API fetch를 사용해서 영화 인기 리스트를 불러올거임

 

MovieList.jsx

페이지를 처음 실행하면 한 번만 실행되게 useEffect를 사용하여 fetchMovies함수를 실행한다.

fetchMovies함수는 fetch를 사용해서 api로 영화 데이터를 요청해서 가져오는데 

await를 사용하여 영화 데이터가  다 들어올 때 까지 기다린다. 

그리고 받아온 데이터를 json 타입으로 변환하여 data 변수에 담는데 이것도 다 변환할 때 까지 기다렸다가 담음

 

export default function MovieList() {
  //한 번만 실행
  useEffect(() => {
    fetchMovies();
  }, []);

  const fetchMovies = async () => {
    const response = await fetch(
      "https://api.themoviedb.org/3/movie/popular?api_key=본인키&language=ko"
    );
    const data = await response.json();
    console.log(data.results);
  };

 

fetch에 본인 api 키를 넣어야하는데

깃허브에 올리기 위해서는 env파일로 따로 관리하는게 보안상 좋을거같음 ㅠ

 

 

.env파일을 만들어서 api키를 저장하는데 앞에 VITE를 붙여줘야함 

 gitignore에도 .env파일 추가

 

 

 

받은 data를 확인하면 아래와 같은 값들이 나오는데 

현재 필요한것은 results 데이터임 

 

 

여기 배열안에 영화 데이터가 있음. 그래서 results만 가져옴

 

 

 

 

 

콘솔에 잘 출력되는지 확인하기

 

 

 

그리고 해당 값들을 useState로 관리한다 .

 

아까 cosole.log로 확인했던 data.results를 setMovies로 넣고 

console.log로 확인해봤다. 

 

 

 

 

 

 

 

 

 

 

영화 상세 글이 100자 이상 넘어가면 ...으로 표시되게 함

 

 

 

 

 

그리고 해당 영화를 클릭하면 상세 페이지로 이동하게 끔 만든다

 

 

영화 상세보기의 주소를 보면 movie 뒤에 id값이 들어가는것을 확인 가능하다.

https://developer.themoviedb.org/reference/movie-details

Details

https://www.themoviedb.org/movie/670292-the-creator?language=ko

크리에이터

 

 

그래서 movie의  id값을 가져와서 넣어주면 

 

 

영화 포스터 클릭 시