이전 장에서는 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..

local icons checkbox에 사용할 icon을 src/assets/icons/ 폴더에 저장 (폴더 이름은 자유) config tailwind.config.js에 다음 코드를 추가 theme: { extend: { backgroundImage: { 'icon-checkbox': "url('~/src/assets/icons/ico_checkbox.svg')", 'icon-checkbox-on': "url('~/src/assets/icons/ico_checkbox_on.svg')", 'icon-checkbox-dis': "url('~/src/assets/icons/ico_checkbox_dis.svg')", }, 이제 아이콘 이미지를 custom utility class로 사용할 수 있다. css ..

설치 Composable commerce를 실현하는 가장 핵심적인 패키지. 두 가지 패키지 설치 $ pnpm add tailwind-merge clsx 사용 src/lib/utils.ts 폴더와 파일을 생성 (이 경로를 추천 - Next.js 공식 github) 다음 코드를 입력 import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } 다른 component에서 사용시 import import { cn } from "@/lib/utils"; 더 자세한 사용법은 03. 퍼블 ..