[Next.js 스터디 1주차]

Об этом предложении

Next.js 공식 Learn의 Dashboard App을 따라가며 풀스택 대시보드를 만드는 스터디를 시작했다. 이번 글에서는 Chapters 1~3에 등장하는 프로젝트 구조, CSS 적용 방식, 폰트와 이미지 최적화를 정리한다. 1. 프로젝트 생성과 실행 공식 과정에서는 화면 구성 요소와 예시 데이터가 준비된 starter 프로젝트를 사용한다. npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm create-next-app 은 Next.js 프로젝트 생성 도구다. --example으로 학습용 예제를 지정하고, --use-pnpm으로 패키지 관리 도구를 선택한다. 프로젝트 폴더로 이동한 뒤 필요한 패키지를 설치하고 개발 서버를 실행한다. cd nextjs-dashboard pnpm i pnpm dev pnpm i 는 의존성을 설치하고, pnpm dev 는 package.json에 정의된 개발용 스크립트를 실행한다. 개발 서버 실행과 프로덕션 빌드는 목적이 다르다. 명령에 pnpm dev * - 코드 수정 반영과 오류 확인을 위한 개발 서버 실행 * pnpm build - 실제 서비스에 사용할 최적화된 결과물 생성 pnpm start - 빌드한 결과물로 프로덕션 서버 실행 따라서 프로덕션 환경을 로컬에서 확인하려면 pnpm build를 먼저 실행한 뒤 pnpm start를 실행한다. 빌드는 결과물을 만드는 과정이며, 외부 사용자가 접속할 수 있도록 배포하는 작업과는 구분된다. 2. Starter 프로젝트 구조 app - 페이지, 레이아웃 등 애플리케이션 코드 * app/lib * - 공통 함수, 데이터 처리 로직, 타입 정의 * app/ui * - 로고, 카드, 표, 폼 등 UI 컴포넌트 public - 이미지 등 정적 파일 app 은 App Router에서 사용하는 폴더다. 반면 lib 와 ui 는 이 프로젝트에서 코드를 정리하기 위해 사용한 이름이다. app/page.tsx 는 / 경로의 페이지를 정의하고, app/layout.tsx 는 페이지를 감싸는 공통 구조를 정의한다. export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body>{children}</body> </html> ); } children에는 해당 레이아웃 안에 표시할 페이지나 하위 레이아웃의 내용이 들어간다. 3. Global CSS, Tailwind CSS, CSS Modules Next.js에서는 여러 CSS 방식을 함께 사용할 수 있다. Global CSS 특징: 전역적으로 적용되는 CSS 규칙 작성 활용: 기본 여백, 공통 스타일 공식 예제에서는 Root Layout에서 전역 CSS를 가져온다. import "@/app/ui/global.css"; @/ 는 프로젝트의 경로 설정에 따른 별칭이다. 전역 CSS는 여러 페이지에 공통으로 적용할 규칙에 적합하다. 개별 컴포넌트의 스타일을 모두 전역으로 작성하면 클래스 이름이나 선택자가 충돌할 수 있으므로 적용 범위를 고려해야 한다. Tailwind CSS 특징: 유틸리티 클래스를 조합해 스타일 구성 활용: 요소의 배치, 색상, 여백 Tailwind는 작은 CSS 규칙에 대응하는 클래스를 조합하는 방식이다. <div className="flex flex-col rounded-lg bg-blue-500 p-6"> Dashboard </div> flex : Flexbox 사용 flex-col : 세로 방향으로 배치 rounded-lg : 모서리를 둥글게 설정 bg-blue-500 : 파란색 배경 p-6 : 기본 설정에서 1.5rem의 내부 여백 Tailwind는 CSS 개념을 대신하는 도구가 아니다. 클래스 이름을 읽으려면 배치, 여백, 색상 같은 CSS 속성의 의미를 이해해야 한다. md : 같은 접두사는 화면 너비에 따른 조건을 나타낸다. <div className="flex flex-col md:flex-row"> 기본적으로 세로로 배치하고, md 기준 너비 이상에서는 가로로 배치한다. 특정 기기의 종류를 판단하는 것이 아니라 화면 너비를 기준으로 동작한다. CSS Modules 특징: 클래스 이름을 파일 단위로 구분 활용: 개별 컴포넌트의 사용자 정의 스타일 CSS Modules는 .module.css 파일에 스타일을 작성한다. /* home.module.css */ .panel { padding: 24px; background-color: lightblue; } 컴포넌트에서는 파일을 가져와 적용한다. import styles from "@/app/ui/home.module.css"; <div className={styles.panel}>Dashboard</div> styles.panel은 생성된 고유 클래스 이름과 연결된다. 다른 CSS Module에 같은 .panel이 있어도 클래스 이름 충돌을 줄일 수 있다. 4. clsx로 조건부 스타일 적용하기 송장의 결제 상태에 따라 색상을 다르게 표시하려면 조건에 따라 클래스 이름을 선택해야 한다. clsx 는 이러한 클래스 이름 조합을 간단하게 만들어준다. import clsx from "clsx"; export default function StatusBadge({ status, }: { status: "pending" | "paid"; }) { return ( <span className={clsx("rounded px-2 py-1", { "bg-green-500 text-white": status === "paid", "bg-gray-100 text-gray-500": status === "pending", })} > {status} </span> ); } 공통 클래스는 항상 적용되고, 객체에서는 조건이 참인 항목의 클래스만 추가된다. status가 "paid"이면 초록색 배경이, "pending"이면 회색 배경이 적용된다. clsx는 CSS를 생성하거나 상태를 관리하지 않는다. 조건에 맞는 클래스 이름들을 합친 문자열을 반환한다. 5. 웹 폰트와 CLS 웹 폰트가 로딩되기 전에는 브라우저가 기본 글꼴로 텍스트를 표시할 수 있다. 이후 웹 폰트로 교체되면 글자의 폭과 높이가 달라져 줄바꿈이나 주변 요소의 위치가 바뀔 수 있다. 예를 들어 제목이 한 줄에서 두 줄로 바뀌면 아래 버튼도 밀려 내려간다. CLS(Cumulative Layout Shift) 는 이러한 예상하지 못한 레이아웃 이동을 평가하는 지표다. next/font 는 폰트 제공과 로딩을 최적화하고, 대체 글꼴 조정을 통해 폰트 교체에 따른 레이아웃 이동을 줄여준다. next/font/google은 빌드 시점에 Google Fonts의 폰트 파일과 CSS를 받아 프로젝트의 정적 자산으로 제공한다. 사용자의 브라우저가 페이지를 볼 때 Google 서버에 직접 폰트를 요청하지 않는다. 브라우저의 폰트 다운로드 자체가 없어지는 것은 아니다. 폰트를 프로젝트에서 제공한다는 점이 핵심이다. 공식 예제에서는 사용할 폰트를 fonts.ts에 모아둔다. import { Inter, Lusitana } from "next/font/google"; export const inter = Inter({ subsets: ["latin"], }); export const lusitana = Lusitana({ subsets: ["latin"], weight: ["400", "700"], }); subsets는 미리 불러올 문자 묶음을 지정한다. weight는 사용할 굵기를 지정하며, 400은 보통 굵기, 700은 굵은 글꼴에 해당한다. 6. next/image와 이미지 최적화 큰 원본 이미지를 작은 화면에 그대로 전달하면 불필요한 데이터를 다운로드하게 된다. 이미지가 로딩되기 전에 공간이 확보되지 않으면 화면 내용이 밀리는 문제도 생긴다. next/image의 Image는 이미지 크기 최적화, 기본 지연 로딩, 이미지 비율을 활용한 공간 확보 등을 지원한다. 일반 img도 srcset, loading, 크기 지정 등으로 최적화할 수 있지만, Image는 이 작업을 Next.js에서 편리하게 구성하도록 돕는다. import Image from "next/image"; <Image src="/hero-desktop.png" width={1000} height={760} alt="데스크톱용 대시보드 화면" /> 여기서 width 와 height 는 이미지의 원본 크기 정보를 제공한다. 브라우저는 이를 바탕으로 가로·세로 비율을 계산하고 이미지가 나타날 공간을 확보할 수 있다. 화면에서 반드시 1000 × 760px로 표시된다는 뜻은 아니다. 실제 표시 크기는 CSS로 조절할 수 있다. className="w-full h-auto" 이렇게 설정하면 사용 가능한 너비에 맞추면서 이미지 비율을 유지한다. 7. 화면 너비에 따른 이미지 표시 공식 예제에는 데스크톱용과 모바일용 이미지가 각각 준비되어 있다. <Image src="/hero-desktop.png" width={1000} height={760} className="hidden md:block" alt="데스크톱용 대시보드 화면" /> <Image src="/hero-mobile.png" width={560} height={620} className="block md:hidden" alt="모바일용 대시보드 화면" /> 화면 너비 데스크톱 이미지 모바일 이미지 md 미만 숨김 표시 md 이상 표시 숨김 hidden md:block은 기본적으로 숨기고, md 이상에서 표시한다. block md:hidden은 반대로 동작한다. 이는 동일한 이미지를 작게 만드는 방식과 달리, 화면 너비에 맞춰 서로 다른 구성의 이미지를 보여주는 방식이다. hidden은 CSS로 숨기는 것이므로 요소 자체를 DOM에서 삭제하지는 않는다. 반응형 이미지에서는 표시 크기와 다운로드할 이미지 크기도 구분해야 한다. CSS는 화면에 표시할 크기를 정하고, sizes는 브라우저가 적절한 이미지 후보를 선택하는 데 사용할 정보를 제공한다. 학습 정리 이번 범위에서는 Next.js 프로젝트의 기본 구조와 첫 화면을 구성하는 방법을 살펴봤다. 특히 스타일을 적용하는 방식마다 범위와 작성 방법이 다르고, 폰트와 이미지는 디자인뿐 아니라 로딩 성능과 레이아웃 안정성에도 영향을 준다는 점이 중요했다.