Frontend/Next.js4 [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.. 2021. 5. 23. [Next.js] API 호출을 통한 네비게이션 메뉴 생성 #1. Navigation 컴포넌트 생성 지난 포스팅에서는 상단 공통영역 생성까지 완료하였으니, 계속해서 작업을 시작해 봅시다. 이전글 - [Next.js] 페이지 상단 레이아웃 생성 components 폴더 아래 Nav.js 파일을 생성합니다. 이 컴포넌트에는 영화 장르를 Top메뉴로 생성한 후 각 메뉴를 클릭하면 하단 컨텐츠 영역에 장르에 따른 영화 목록을 보여줄 생각입니다. + Tip ES7 snippets 확장기능을 설치하게 되면, js파일을 생성하고 기본적인 export defaut function을 만들 때 _rfce 스니펫을 통해 타이핑을 줄일 수 있습니다. 일단 임시 메뉴를 생성하고 페이지 디자인을 입혀봅시다. 추후 임시 메뉴는 themoviedb.org 사이트에서 API를 통해 가져오게 .. 2021. 5. 17. [Next.js] 페이지 상단 레이아웃 생성 이전글 - [Next.js] Next.js 시작하기 #1. create-next-app 으로 프로젝트 생성 nextjs프로젝트의 기본적인 세팅을 간편하게 시작하는 방법은 create-next-app을 사용하는 것입니다. react / react-dom / next 가 함께 설치되며, 간편하게 프로젝트 구조를 잡을 수 있습니다. 설치는 공식 가이드에 나와있는 대로 아래의 명령어를 실행하면 됩니다 : $ npx create-next-app app-test app-test 라는 이름으로 create-next-app을 생성합니다. 설치가 완료되면 아래와 같이 기본적인 nextjs 프로젝트의 구성이 만들어집니다. 이제 생성된 프로젝트를 실행해 봅시다 : $ yarn run dev localhost:3000 으로 .. 2021. 5. 1. [Next.js] Next.js 시작하기 #1. Next.js 란 무엇인가 Next.js는 React 어플리케이션의 서버사이드렌더링(SSR)을 쉽게 구현할 수 있게 도와주는 프레임워크입니다. Netflix, TikTok, Twitch, Nike, Uber, Docker, Elastic, Starbucks 등... 많은 기업형 서비스에서 Next.js를 사용하고 있습니다. 공식 홈페이지에서는 Next.js에 대해 아래와 같이 설명하고 있습니다. An intuitive page-based routing system (with support for dynamic routes) Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per.. 2021. 4. 7. 이전 1 다음 반응형
