🐭 어떤 API를 사용할 거야?

TMDB Open API

TMDB 사이트 에서 제공하는 Open API를 이용해 영화 TV 목록을 나타내도록 하겠습니다 나타내기 전 필요한 준비물이 어떤 것이 있는지 설명하겠습니다

API Key

API를 사용하기 위해서는 TMDB의 API Key를 알고 있어야 JSON 파일을 확인할 수 있습니다 API Key는 사이트 회원가입을 하고 마이페이지에 있는 API에 들어가면 확인할 수 있습니다

해당 키를 복사하고 이제 JSON을 확인하기 위해 위에 TMDB 사이트를 클릭하고 들어가서 원하는 목록을 찾고 거기에 API를 넣어서 링크를 출력할 수 있습니다 저희는 첫 화면에 앞으로 나올 영화 목록과 인기 있는 영화 목록을 보여주기 위해 MOVIES 목록에 있는 Upcoming을 이용하겠습니다

SEND REQUEST를 통해 링크를 받는데 이 링크를 접속하시면 JSON 데이터를 확인할 수 있습니다

이제 이 데이터를 저희가 만들고 있는 사이트에 보이도록 해보겠습니다

🐭 어떻게 가지고 와?

Fetch 사용하기

fetch는 내장 라이브러리이기 때문에 따로 설치없이 바로 사용할 수 있고 Promise 기반이어서 async/await 사용이 편리합니다 그러면 Fetch를 사용해서 API를 가져오는 방법을 알아보겠습니다

TypeScript의 장점

자바스크립트로 JSON 데이터를 출력할 때 우리는 그 내부에 담겨있는 key값을 자동완성에서 확인할 수 없다 prop-type을 이용해서 만들 수는 있지만 그것은 하나하나 다 설정해줘야 하는 번거로움이 있다 TypeScript는 사전에 미리 타입을 선언해주고 언제든지 꺼내서 자동완성으로 쉽게 사용할 수 있다는 점에서 코드 오류도 줄일수있어 프로젝트 크기가 커지면 커질수록 속도가 빨라지는 효과가 있다 이제 이 데이터를 console.log로 확인해보겠습니다

export const getMovieUpcoming = async (number: number) => {
  const response = await fetch(
    `${BASE_URL}/movie/upcoming?api_key=${API_KEY}&page=${number}`
  );
  const json = await response.json();
  console.log(json);
  return json;
};

정상적으로 나온 것을 확인했습니다 그렇다면 이제 우리는 poster_path에 있는 사진을 가져와 메인 사이트에 출력해보겠습니다 그 전에 TMDB 이미지는 값만 존재하고 URL은 따로 존재하는데 그 URL은 아래 코드에서 보여드리겠습니다

export function makeImagePath(id: string) {
  return `https://image.tmdb.org/t/p/original/${id}`;
}

🐭 조금 더 쉬운 방법은 없어??

React-Query 사용하기

내가 가장 좋아하는 data fetching 라이브러리이다 React-Query에 대해서도 나중에 따로 포스팅해서 올리도록 하겠습니다 그러면 useQuery를 이용해 데이터를 불러오겠습니다 코드를 보면서 설명해드리겠습니다

이미지 타입 지정

styled-components 를 사용해 포스터 키값의 타입을 지정해줬습니다 원래 tailwind로만 작업하려고 했는데 지식의 한계로 prop은 기존에 사용했던 styled-components를 사용했습니다 혹시 아시는 분 댓글 남겨주세요...(다음 포스팅에서 변경 완료)

React-Query 간단 설명

구조 분해 할당을 해서 isLoading 과 data가 들어있는 모습을 확인할 수 있다 이것부터가 이미 큰 장점이다 우리는 데이터를 불러올 때 useState로 로딩창 만들고 데이터 불러오고 이런 과정을 다 나눠서 진행해야 했다면 useQuery 내부에 저 기능들이 모두 들어있어서 한 줄의 코드로 여러가지 기능을 사용할 수 있다 또한 index.tsx에서 <ReactQueryDevtools initialIsOpen={false} /> 을 사용하면 데이터 내용을 더 편리하게 작업할 수 있습니다

tailwind 직접 할당

가끔 저렇게 calc 문법이나 기존에 들어가 있지 않은 px값을 사용하고 싶을 때가 있다 그럴 때는 대괄호([]) 를 사용하여 그 안에 내가 지정하고 싶은 값을 넣어주면 작동한다

이렇게 하면 정상적으로 포스터를 불러오는 모습을 확인할 수 있습니다 다음으로 Framer-motion을 사용해서 메인 포스터 슬라이더를 구현해보겠습니다

TVING 클론코딩 - 2 소스 코드