4단계: 로딩 상태
Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 42번째.
챌린지
쉬움메뉴 항목 라우트에 스켈레톤을 부여하세요.
- 기본(default) 컴포넌트(프롭스 없음, async 아님)를 내보내는
app/menu/[slug]/loading.jsx파일들을 생성하세요. id="dish-skeleton"및className="detail-thumb skeleton"을 가진<div>를 포함하는<div className="detail">를 반환하세요.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단계: 실시간 검색