#1. Navigation 컴포넌트 생성
지난 포스팅에서는 상단 공통영역 생성까지 완료하였으니, 계속해서 작업을 시작해 봅시다.
이전글 - [Next.js] 페이지 상단 레이아웃 생성
components 폴더 아래 Nav.js 파일을 생성합니다. 이 컴포넌트에는 영화 장르를 Top메뉴로 생성한 후
각 메뉴를 클릭하면 하단 컨텐츠 영역에 장르에 따른 영화 목록을 보여줄 생각입니다.
+ Tip
ES7 snippets 확장기능을 설치하게 되면, js파일을 생성하고 기본적인 export defaut function을 만들 때
_rfce 스니펫을 통해 타이핑을 줄일 수 있습니다.
일단 임시 메뉴를 생성하고 페이지 디자인을 입혀봅시다. 추후 임시 메뉴는 themoviedb.org 사이트에서 API를 통해 가져오게 될 것입니다.
Nav.js 파일에 상단메뉴를 작성한 후, index.js 파일에서 <Nav /> 를 임포트 합니다.
// index.js
import Head from 'next/head'
import Header from '../components/Header'
import Nav from '../components/Nav'
export default function Home({ contents }) {
return (
<div className=''>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
{/* 헤더 */}
<Header />
{/* 메뉴 */}
<Nav />
{/* 컨텐츠 */}
</div>
)
}
function Nav() {
return (
<nav className="relative">
<div className="flex px-10 sm:px-20 text-2xl whitespace-nowrap
space-x-10 sm:space-x-20">
<h2 className="last:pr-24 cursor-pointer transition
duration-100 transform hover:scale-125 hover:text-white
active:text-red-500">장르1</h2>
<h2>장르2</h2>
<h2>장르3</h2>
<h2>장르4</h2>
<h2>장르5</h2>
</div>
</nav>
)
}
export default Nav위 처럼 <h2> 로 메뉴 아이템을 만들어주고 tailwindcss를 사용하여 스타일을 적용해주면 아래와 같이
마우스 커서를 올리면 흰색 텍스트로 125%확대되며, 클릭시 빨간색 텍스트로 변하는 강조 메뉴가 만들어지게 됩니다.
#2. themoviedb.org API 사용하기
The Movie DB는 영화정보 데이터베이스 사이트 입니다. 각종 영화정보에 관한 API를 제공해 주고 있지만 이를 사용하려면 회원가입 후 API KEY를 발급받아야 합니다.
The Movie Database (TMDb) (themoviedb.org)
API키 발급을 위해서는 사용할 API에 대한 각종 정보를 입력하라고 하는데, 적당히 발급만 가능할 정도로 입력해도 상관이 없으니 부담없이 작성합시다.
The Movie DB에서 사용할 수 있는 API는 developers.themoviedb.org 에서 확인 할 수 있고, 이 중 영화 장르 목록을 가져오기 위해 /genre/movie/list 를 사용하면 될 것 같습니다.
API 사용법은 각 API문서에 잘 명기되어 있으니 참고하시면 됩니다.
#3. SWR을 사용하여 API 호출하기
react에서 API를 호출하는 방법은 fetch / axios 등이 있지만 여기서는 SWR을 설치하고 사용 해 보겠습니다.
$ yarn add swrThe Movie DB에서 발급받은 API키는 next.config.js파일에 작성해 두면 각 컴포넌트에서 불러다 사용할 수 있습니다.
//next.config.js
module.exports = {
env: {
API_KEY: `7cxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`
}
};이제 Nav.js 파일에서 SWR을 import해서 사용하여 영화 장르 목록을 받아온 후, 메뉴에 보여주도록 합시다.
공통으로 사용되는 API prefix와 API키는 따로 선언해 주고, 아까 next.config.js에 작성한 키값은 process.env.API_KEY 로 불러 옵니다.
fetcher 함수를 별도로 작성하고, SWR사용법은 아래 소스를 참고하여 작성해주세요.
import useSWR from 'swr'
const BASE_URL = 'https://api.themoviedb.org/3/genre/movie/list';
const API_KEY = process.env.API_KEY;
const fetcher = async (url) => {
const res = await fetch(url)
const data = await res.json()
if (res.status !== 200) {
throw new Error(data.message)
}
return data
}
function Nav() {
const { data, error } = useSWR(
() => `${BASE_URL}?api_key=${API_KEY}&language=ko`, fetcher
)
if (error) return <div>{error.message}</div>
if (!data) return <div>Loading...</div>
return (
<nav className="relative">
<div className="flex px-10 sm:px-20 text-2xl whitespace-nowrap
space-x-10 sm:space-x-20">
{data.genres.map((menu, index) => index < 5 && (
<h2 key={menu.id}
className="last:pr-24 cursor-pointer transition
duration-100 transform hover:scale-125 hover:text-white
active:text-red-500"
>{menu.name}
</h2>
))}
</div>
</nav>
)
}
export default Nav최종적으로 호출하게 되는 API는
https://api.themoviedb.org/3/genre/movie/list?api_key=7cxxxxxxxxxxxxxxxxxxxxx&language=ko 이며 실제 API를 호출하면 19개의 장르 목록이 나오게 되는데, index를 사용하여 5개만 보여주도록 합시다.
API호출을 통해 가져온 장르 중 5개를 사용하여 적용한 사이트의 모습은 다음과 같습니다.
다음 시간에는 각 장르 메뉴를 클릭하면 장르에 해당하는 영화의 목록을 썸네일과 함께 보여주도록 하겠습니다.
'Frontend > Next.js' 카테고리의 다른 글
| [Next.js] Image를 사용한 콘텐츠 리스트 구성 (0) | 2021.05.23 |
|---|---|
| [Next.js] 페이지 상단 레이아웃 생성 (2) | 2021.05.01 |
| [Next.js] Next.js 시작하기 (0) | 2021.04.07 |
댓글