포켓돈 도감 (개인 프로젝트) (3) 썸네일형 리스트형 Next.js 개인프로젝트 : 포켓몬 도감 - 5 프로젝트 진행 순서프로젝트 셋업Layout 구성포켓몬 api 구성 (제공)포켓몬 리스트 컴포넌트 작성id를 이용한 포켓몬 상세 정보 컴포넌트 작성그 외05. 포켓몬 상세 페이지 작성id를 기반으로 동적 라우팅을 해야하기 때문에src/app/detail/[id] 의 경로에서 작성일단 id를 기반으로 특정 포켓몬에 대한 정보를 가져와야하기 때문에 제공된 api 작성src/app/api/pokemons/[id]/route.ts더보기import { NextResponse } from "next/server";import axios from "axios";export const GET = async ( request: Request, { params }: { params: { id: string } }) =>.. Next.js 개인프로젝트 : 포켓몬 도감 - 4 프로젝트 진행 순서프로젝트 셋업Layout 구성포켓몬 api 구성 (제공)포켓몬 리스트 컴포넌트 작성id를 이용한 포켓몬 상세 정보 컴포넌트 작성그 외04. 포켓몬 리스트 컴포넌트 작성하기 전에 포켓몬 데이터에 대한 타입 지정src/app/types/pokemons.tstype Pokemon = { id: number; // 포켓몬 id, 도감 번호 name: string; // 포켓몬 영문 이름 korean_name: string; // 포켓몬 한글 이름 height: number; // 포켓몬 신장 weight: number; // 포켓몬 체중 sprites: { front_default: string }; // 포켓몬 이미지 types: { type: { name: string; kor.. Next.js 개인프로젝트 : 포켓몬 도감 - 1, 2, 3 필수 구현 사항Next.js v14로 프로젝트 구성 (App routing 기반, TypeScript, Tailwind css 사용)Layout에 metadata 설정 및 공통 UI 구성151가지 포켓몬을 보여주는 리스트 작성 (클라이언트 컴포넌트)포켓몬 id를 기반으로 해당 포켓몬의 상세 정보를 보여주는 페이지 작성 (서버 컴포넌트, 다이나믹 라우팅)Next.js에서 제공하는 Image 태그 사용전체적으로 적절한 타입 사용프로젝트 진행 순서프로젝트 셋업Layout 구성포켓몬 api 구성 (제공)포켓몬 리스트 컴포넌트 작성id를 이용한 포켓몬 상세 정보 컴포넌트 작성그 외01. 프로젝트 셋업터미널yarn create next-appWhat is your project named? my-appWould y.. 이전 1 다음
