[Next.js] Image를 사용한 콘텐츠 리스트 구성

이전글 - [Next.js] API 호출을 통한 네비게이션 메뉴 생성 #1. 네비게이션 메뉴에 클릭이벤트 작성하기 네비게이션 메뉴로 만들었던 각 영화의 장르를 클릭하면 해당 장르의 영화들을 썸네일과 함께 보여주도록 만들어 봅시다. 먼저 next/router 를 임포트하고 Nav onclick 이벤트에 라우팅을 등록해줍니다. import { useRouter } from "next/router" 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 = awa..

• format_list_bulleted Frontend/Next.js
• · 2021. 5. 23.
• textsms

[Next.js] API 호출을 통한 네비게이션 메뉴 생성

#1. Navigation 컴포넌트 생성 지난 포스팅에서는 상단 공통영역 생성까지 완료하였으니, 계속해서 작업을 시작해 봅시다. 이전글 - [Next.js] 페이지 상단 레이아웃 생성 components 폴더 아래 Nav.js 파일을 생성합니다. 이 컴포넌트에는 영화 장르를 Top메뉴로 생성한 후 각 메뉴를 클릭하면 하단 컨텐츠 영역에 장르에 따른 영화 목록을 보여줄 생각입니다. + Tip ES7 snippets 확장기능을 설치하게 되면, js파일을 생성하고 기본적인 export defaut function을 만들 때 _rfce 스니펫을 통해 타이핑을 줄일 수 있습니다. 일단 임시 메뉴를 생성하고 페이지 디자인을 입혀봅시다. 추후 임시 메뉴는 themoviedb.org 사이트에서 API를 통해 가져오게 ..

• format_list_bulleted Frontend/Next.js
• · 2021. 5. 17.
• textsms