이전 장에서는 대시보드 레이아웃과 페이지를 생성했었다. 이제 사용자가 대시보드 경로 간을 탐색할 수 있도록 몇 가지 링크를 추가해 보겠다. 이 챕터에서 다루는 주제는 아래와 같다. next/link 컴포넌트를 사용하는 방법. usePathname() 후크를 사용하여 활성 링크를 표시하는 방법. Next.js에서 탐색이 작동하는 방식. 탐색을 최적화하는 이유는 무엇입니까? 페이지를 연결하려면 일반적으로 엘리먼트를 사용합니다. 현재 사이드바 링크는 엘리먼트를 사용하지만 브라우저에서 홈, 송장, 고객 페이지 사이를 탐색할 때 어떤 일이 발생하는지 확인하자. 각 페이지 탐색에 전체 페이지 새로 고침이 있다! 컴포넌트 Next.js에서는 컴포넌트를 사용하여 애플리케이션의 페이지 간을 연결할 수 있다. 를 사용하면..

지금까지 애플리케이션에는 메인 페이지만 있었다. 레이아웃 과 페이지를 사용하여 더 많은 경로를 생성하는 방법을 알아보자. 이 챕터에서 다룰 주제는 다음과 같다. 파일 시스템 라우팅을 사용하여 dashboard 경로를 만든다 . 새 경로 세그먼트를 생성할 때 폴더와 파일의 역할을 이해한다. 여러 대시보드 페이지 간에 공유할 수 있는 네스티드 레이아웃을 만든다. 코로케이션, 부분 렌더링, 루트 레이아웃이 무엇인지 이해다. 중첩 라우팅 Next.js는 중첩된 경로를 만드는데, 파일 시스템 라우팅을 사용한다. 각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타낸다. layout.tsx 및 page.tsx 파일을 사용하여 각 경로에 대해 별도의 UI를 만들 수 있다. page.tsx는 React 컴포넌트를..

이전 장에서는 Next.js 애플리케이션의 스타일을 지정하는 방법을 배웠다. 사용자 정의 폰트와 히어로 이미지를 추가하여 웹페이지 작업을 계속해 보자. 이번 장에서 다룰 주제는 아래와 같다. next/font를 사용하여 사용자 정의 폰트를 추가하는 방법. next/image로 이미지를 추가하는 방법. Next.js에서 폰트와 이미지가 최적화되는 방법. 폰트를 최적화하는 이유 폰트는 웹 사이트 디자인에서 중요한 역할을 하지만 프로젝트에서 사용자 정의 폰트를 사용하면 폰트 파일을 가져와서 로드해야 하는 경우 성능에 영향을 미칠 수 있다. Cumulative Layout Shift (CLS 누적 레이아웃 변경) 은 Google이 웹사이트의 성능과 사용자 경험을 평가하는 데 사용하는 측정항목이다. 폰트를 사용하..

이번 장에서 다룰 주제는 아래와 같다. 애플리케이션에 전역 CSS 파일을 추가하는 방법. 두 가지 스타일 지정 방법: Tailwind 및 CSS 모듈. clsx 유틸리티 패키지를 사용하여 조건부로 클래스 이름을 추가하는 방법 글로벌 스타일 /app/ui 폴더를 살펴보면 global.css라는 파일이 있다. 이 파일을 사용하여 CSS 재설정 규칙, 링크와 같은 HTML 엘리먼트에 대한 사이트 전체 스타일 등과 같은 CSS 규칙을 애플리케이션의 모든 경로에 추가할 수 있다. 애플리케이션의 모든 컴포넌트에서 global.css를 가져올 수 있지만 일반적으로 최상위 컴포넌트에 추가하는 것이 좋다. Next.js에서 최상위 컴포넌트는 루트 레이아웃이다(나중에 자세히 설명). /app/layout.tsx로 이동하고..

새 프로젝트 만들기 Next.js 앱을 만들려면 프로젝트 디렉토리를 만들고, 해당 디렉토리에서 CLI 를 열고 다음 명령을 실행한다. Terminal npx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" 이 명령은 Next.js 애플리케이션을 설정하는 CLI(명령줄 인터페이스) 도구인 create-next-app을 사용한다. 위 명령에서는 이 과정의 예제를 활용하기 위해서 --example 플래그도 사용하고 있다. 프로젝트 둘러보기 처음부터 코드를 작성하는 튜토리얼과 달리 이 과정의 코드 대부분은 이미 작성되어 ..

Button UI Button은 variant가 많고, Tailwind CSS는 nested selector를 지양함. 그러므로 다음과 같이 React component로 구현한다. 설치 $ pnpm add tailwind-merge clsx class-variance-authority 3가지를 설치해주고, 가이드 2-3을 참조하여 src/lib/utils.ts를 입력한다. Button library 예시 src/components/ui/button.tsx import { VariantProps, cva } from 'class-variance-authority'; import { ComponentProps } from 'react'; import { cn } from '@/lib/utils'; cons..