index.js

import { useEffect, useState } from "react";
import Seo from "./components/Seo";

const API_KEY = "10923b261ba94d897ac6b81148314a3f";

export default function Home() {
  const [Movies, setMovies] = useState()
  useEffect(() => {
    (async () => {
      //const reponse = await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`)    })
      //const json = await Response.json();
      const { results } = await (
        await fetch(
          `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
        )
      ).json();
      setMovies(results);
    })();
  }, []);
  return (
    <div>
      <Seo title="Home" />
      {!Movies && <h4>Loading...</h4>} {/*mount되고 기다렸다가*/}
      {/* 목록 출력 */}
			{Movies?.map((movie) => ( 
        <div key={movie.id}>
          <h4>{movie.original_title}</h4>
        </div>
      ))}
    </div>
  );
}

API 숨기기

왜?

API key를 돈 내고 사야하는 경우

모두에게 공개하고 싶지 않은 경우

API의 사용량이 제한되어있는 경우 (사용에 제한이 걸린다)

확인

개발자도구창을 열어보며 [Netwroks(request)]에서 사용한 URL들을 확인할 수 있는데,

거기서 ‘popular?api_key=~~~ ‘ 로 표시된다.

해결방법

request에 mask를 씌우는 것 같은 ‘redirect’와 ‘rewirte’ 사용

Redirect 하는 법