Next js Fetching Data / public 경로

NavBar 스타일링

본격적으로 기초 영화 앱을 만들기 위해서 네비게이션 스타일링을 다시 해줍니다.

스타일링에 시간을 들이지 않기위해 기존 만들어진 스타일을 그대로 붙여넣어줍니다.

// NavBar.js
import Link from "next/link";
import { useRouter } from "next/router";
export default function NavBar() {
  const router = useRouter();
  return (
    <nav>
      <img src="/vercel.svg" />
      <div>
        <Link href="/">
          <a className={router.pathname === "/" ? "active" : ""}>Home</a>
        </Link>
        <Link href="/about">
          <a className={router.pathname === "/about" ? "active" : ""}>About</a>
        </Link>
      </div>
      <style jsx>{`
        nav {
          display: flex;
          gap: 10px;
          flex-direction: column;
          align-items: center;
          padding-top: 20px;
          padding-bottom: 10px;
          box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
            rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
        }
        img {
          max-width: 100px;
          margin-bottom: 5px;
        }
        nav a {
          font-weight: 600;
          font-size: 18px;
        }
        .active {
          color: tomato;
        }
        nav div {
          display: flex;
          gap: 10px;
        }
      `}</style>
    </nav>
  );
}

public 폴더에서 가져와 쓰기

위 코드에서 img src="/vercel.svg" 를 보면 알 수 있듯이

Next js 에서는 public 폴더 내부의 파일의 경로를 쉽게 가져와 사용할 수 있습니다.

따로 상대경로로 ../ 와 같은 경로를 쓰지않고 절대경로로 /???? 를 사용하면

public 폴더 내부의 파일을 가져와 사용할 수 있습니다.

 

 

Next js 의 Image( 우선 건너뛰기 )

next js 에서는 이미지를 넣을 때 <img> 태그 그대로 사용하는 것이 아닌,더 나은 성능과 자동 이미지 최적화를 위해 

next 의 Image 컴포넌트 사용을 권장하고 있습니다.

 

하지만 이 강의에서는 다루지 않으므로 전체적인 강의의 공부가 끝난 후 이어서 공부를 진행하려 합니다.

 

 

 

영화 관련 API 사용하기

우선 영화의 데이터를 fetching 하기 위해 API를 사용할겁니다.

 

 

영화 API를 사용하기 위한 사이트

https://www.themoviedb.org/

위의 사이트를 가입해주고 API Key를 발급 받아줍니다.

 

 

API Key 발급 받는 법

* 가입 후 프로필에서 설정 > API > API 키 요청 > developers > 동의 > 어플리케이션 생성 정보 입력

발급 받으면 API 탭에 API 키 섹션이 활성화 되며 key를 사용할 수 있게됩니다.

 

Data fetching

먼저 themoviedb.org의 API 개발자 문서에서 유명 영화를 가져오는 API 주소를 확인합니다.

https://developers.themoviedb.org/3/movies/get-popular-movies

 

 

그리고 다음 코드에서 내용과 같이 해당 API 주소와 key 를 넣어 data fetching을 시도하고 화면에 렌더링 시켜줍니다.

import { useEffect, useState } from "react";
import Seo from "../components/Seo";
const API_KEY = "API키";
export default function Home() {
  const [movies, setMovies] = useState();
  useEffect(() => {
    (async () => {
      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>}
      {movies?.map((movie) => (
        <div key={movie.id}>
          <h4>{movie.original_title}</h4>
        </div>
      ))}
    </div>
  );
}

위의 data fetching > rendering은 가장 기본적인 패턴이고,

단순히 data를 불러오고 렌더링이 되는 과정에서

Api의 key를 볼 수 있어 보안적으로 문제가 될 수 있습니다.

 

다음 강의에서는 Next js 에서 Api의 Key를 숨길 수 있는 방법에 대해서 공부하려합니다.