Next.js 프로젝트 :: Open API (TMDB), React-Query

Today

Total

Notice

Recent Posts

Recent Comments

Link

관리 메뉴

DEVLOG

Next.js 프로젝트 :: Open API (TMDB), React-Query 본문

frontend/next.js

Next.js 프로젝트 :: Open API (TMDB), React-Query

meroriiDev 2023. 6. 22. 15:13

728x90

📖 목차

🎈 TMDB Open API

이번 프로젝트에서는 TMDB API에서 제공하는 Open API를 사용해 영화 데이터를 불러올 예정이다.

API key 발급

데이터를 이용하려면 TMDB 사이트 - 설정 - api에서 api key를 발급받아야한다.

https://api.themoviedb.org/3/movie/{movie_id}?api_key=<<api_key>>&language=en-US

API docs

TMDB API docs에 준비되어 있는 api들을 이것저것 조회해보며 사용할 api들을 찾아냈다!생각보다 다양한 api들이 있어서 여러 기능을 가진 페이지를 만들 수 있을 것 같다.

🎈 React-Query

데이터 fetching 라이브러리로 이번엔 한번쯤 사용해보고 싶었던 react-query를 사용해보기로로 했다. 여러가지 장점이 있지만 주로 이러이러한 장점 때문에 최근에 많이 떠오르고 있는 라이브러리라고 한다.

왜 react-query인가?

캐싱
get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다. (예를 들면 게시판의 글을 가져왔을 때 게시판의 글을 생성하면 게시판 글을 get하는 api를 자동으로 실행)
데이터가 오래 되었다고 판단되면 다시 get (invalidateQueries)
동일 데이터 여러번 요청하면 한번만 요청한다. (옵션에 따라 중복 호출 허용 시간 조절 가능)
무한 스크롤 (Infinite Queries (opens new window))
비동기 과정을 선언적으로 관리할 수 있다.
react hook과 사용하는 구조가 비슷하다.

이러한 장점 중 무한 스크롤을 구현하기 위해 큰 장점이 느껴질 것 같아 react-query를 선택했다.

설치

npm i react-query

_app.tsx 세팅

_app.tsx에 먼저 QueryClientProvider를 세팅해야한다.

//base
import type { AppProps } from "next/app";
import Head from "next/head";

//libraries
import { QueryClientProvider, QueryClient } from "react-query";

//style
import "../styles/globals.css";

function MyApp({ Component, pageProps }: AppProps) {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>MERORIIVING</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}

export default MyApp;

useQuery

조회는 useQuery를 이용했다.

export const getMovieList = async (list: string, page = 1) => {
  const { data } = await axios.get(
    `https://api.themoviedb.org/3/movie/${list}?api_key=${process.env.NEXT_PUBLIC_API_KEY}&language=ko-KR&page=${page}`
  );
  return data;
};

export const getMovieInfo = async (id: string) => {
  const { data } = await axios.get(
    `https://api.themoviedb.org/3/movie/${id}?api_key=${process.env.NEXT_PUBLIC_API_KEY}&language=ko-KR`
  );
  return data;
};

...

const { isLoading:listLoading, data:listData } = useQuery("movieData", () => getMovieList('popular'));

const { isLoading:movieLoading, data:movieData } = useQuery("movie", () => {
    return getMovieInfo(params.id);
  });

❗ 상세페이지 세팅 시 겪은 이슈

│  └── pages
│      ├── detail
│      │   └── [id].tsx
│      ├── _app.tsx
│      ├── _document.tsx
│      └── index.tsx

detail의 subpage를 갖는 구조로 작업하여 메인에서 카드 클릭시 detail/[id]로 Link를 연결해주었다.

<Link href={`/detail/${id}`}>
    <Poster posterUrl={imageUrl(poster_path)} />
    <div>{title}</div>
</Link>

💬 겪은 이슈 Next.js 라우트쿼리 undefined 오류

Next.js 라우트쿼리 undefined 오류

subpage의 query를 이용해서 데이터를 불러와야하는데 useRouter로 query를 읽는 시기보다 useQuery로 데이터를 부르는 시기가 더 빨라 undefined로 검색이 되는 오류가 발생했다.During prerendering, the router's q

velog.io

🎈 결과

메인페이지

상세페이지

👉 Next?

그런데,, 아무래도 내가 사용하는 api의 경우 실시간으로 변하는 데이터도 아니고, SEO측면에서 유리한 것이 좋은 페이지로 세팅하는게 좋지 않을까? 하는 생각과 함께 Next.js를 사용하게 된 이유 중 하나인 SSR로 데이터를 세팅하고싶어졌다.
그래서 데이터를 SSR로 세팅하기위해 getServerSideProps를 도입할 예정이다.

728x90

저작자표시 비영리

'frontend > next.js' 카테고리의 다른 글

Next.js 프로젝트 :: infinite scroll 구현하기 (0)	2023.07.12
Next.js 프로젝트 :: carousel 구현하기 (0)	2023.06.22
Next.js 프로젝트 :: getServersideProps (0)	2023.06.22
Next.js 프로젝트 :: 세팅 (0)	2023.06.22
Next.js 시작하기 (0)	2023.06.19

'frontend/next.js' Related Articles

Comments

DEVLOG

Next.js 프로젝트 :: Open API (TMDB), React-Query 본문

Next.js 프로젝트 :: Open API (TMDB), React-Query

🎈 TMDB Open API

API key 발급

API docs

🎈 React-Query

설치

_app.tsx 세팅

useQuery

❗ 상세페이지 세팅 시 겪은 이슈

🎈 결과

메인페이지

상세페이지

👉 Next?

'frontend > next.js' 카테고리의 다른 글

티스토리툴바