4단계: 로딩 상태
Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨. 47개 중 42번째.
챌린지
쉬움dish route에 스켈레톤을 추가하세요.
app/menu/[slug]/loading.jsx파일을 완성하여 default 컴포넌트를 내보내세요(props 없음, async 아님).<div className="detail">을 반환하고, 그 안에id="dish-skeleton"및className="detail-thumb skeleton"을 사용하는<div>를 포함하세요.className="empty"를 사용하는 두 번째 자식 요소를 추가하고, 기다리는 중임을 나타내는 텍스트를 넣으세요. Loading이라는 단어보다 더 나은 텍스트를 사용하세요.
직접 해보기
import Link from 'next/link';
import './globals.css';
export const metadata = {
title: {
default: 'Coddy Eats',
template: '%s | Coddy Eats',
},
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<nav className="nav">
<Link className="brand" href="/">Coddy Eats</Link>
<Link id="nav-menu" href="/">Menu</Link>
<Link id="nav-desserts" href="/?category=dessert">Desserts</Link>
</nav>
<div className="container">
{children}
</div>
</body>
</html>
);
}Next.js 핵심 (Next.js Essentials)의 모든 레슨
8프로젝트: Coddy Eats
1단계: 기본 셸 구성
2단계: 메뉴 그리드3단계: 요리 페이지4단계: 로딩 상태5단계: 페이지 제목6단계: 장바구니에 담기7단계: 카테고리 필터8단계: 리뷰 남기기9단계: 실시간 검색