핵심 코드 세부 분석하기

Table of Contents

app/ 디렉터리
레이아웃 분석
페이지 내용 분석
스타일 CSS 분석

app/ 디렉터리

Next.js에서 app/ 디렉터리는 기본적인 라우팅을 제공하는 디렉터리 입니다.

App 라우터 관련 자세한 내용은 가이드 문서를 참조해주세요.

브라우저에서 http://localhost:3000/로 접근 시, 기존 웹에서 index.html 역할을 하는게 레이아웃을 담당하는 app/layout.tsx과 레이아웃 내 실제 웹 컨텐츠가 존재하는 app/page.tsx 입니다.

flowchart TD A["브라우저 접근: http://localhost:3000/"] --> B["app/layout.tsx (레이아웃)"] subgraph index.html B --> C["app/page.tsx (웹 컨텐츠)"] end

레이아웃 분석

아래는 app/layout.tsx 파일의 코드 입니다.

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

이 app/layout.tsx 파일은 Next.js 프로젝트의 기본 레이아웃을 정의하고 있습니다. 해당 파일의 주요 항목들에 대해서 한눈에 보기 쉽게 설명하겠습니다:

Imports:
- import './globals.css': globals.css라는 전역 스타일시트를 임포트합니다. 이 스타일시트에는 프로젝트 전체에 적용될 스타일이 정의되어 있습니다.
- import type { Metadata } from 'next': Next.js에서 제공하는 Metadata 타입을 임포트합니다.
- import { Inter } from 'next/font/google': Next.js에서 제공하는 Google Font의 Inter 폰트를 임포트합니다.
Inter 폰트 설정:
- const inter = Inter({ subsets: ['latin'] }): Inter 폰트를 latin 부분집합으로 사용하도록 설정하고 있습니다.
메타데이터 설정:
- export const metadata: Metadata: 페이지의 메타데이터를 설정하는 부분입니다. 여기서는 페이지의 제목과 설명을 정의하고 있습니다.
RootLayout 컴포넌트:
- 이 함수는 프로젝트의 기본 레이아웃을 정의하는 React 컴포넌트입니다.
- children: React.ReactNode: 이 레이아웃 안에 포함될 자식 요소나 컴포넌트들입니다. children은 React에서 자주 사용되는 prop으로서 부모 컴포넌트에 포함된 자식 컴포넌트들을 나타냅니다.
- <html lang="en">: 웹페이지의 언어가 영어로 설정되어 있습니다.
- <body className={inter.className}>{children}</body>: body 태그 내에서 Inter 폰트의 스타일이 적용되며, children prop으로 전달된 컴포넌트들이 렌더링됩니다.

이 파일은 프로젝트의 모든 페이지에 공통으로 적용되는 레이아웃을 정의하며, 필요한 스타일과 폰트를 임포트하고 설정합니다. 페이지마다 다른 내용(컴포넌트)를 보여주려면 children prop을 사용하여 해당 내용을 이 레이아웃 안에 삽입하면 됩니다.

페이지 내용 분석

아래 코드의 주요 구조는 다음과 같습니다.

flowchart TD A[main] --> B B["div (z-10...)"] --> C["p (Get started by editing...)"] B --> D["div (fixed bottom-0 left-0...)"] D --> E["a (By Vercel)"] E --> F["Image (Vercel Logo)"] A --> G G["div (relative flex...)"] --> H["Image (Next.js Logo)"] A --> I I["div (mb-32 grid...)"] --> J["a (Docs)"] I --> K["a (Learn)"] I --> L["a (Templates)"] I --> M["a (Deploy)"]

이 다이어그램은 주어진 코드의 주요 구조와 컴포넌트의 관계를 나타냅니다:

main 요소는 전체 구조의 시작입니다.
main 안에서는 세 개의 주요 div 영역이 있습니다.
- 첫 번째 div는 상단의 경고 메시지와 Vercel 로고 링크를 포함합니다.
- 두 번째 div는 중앙에 위치한 Next.js 로고를 포함합니다.
- 세 번째 div는 네 개의 링크를 포함한 그리드입니다.

이 코드를 분석하여 설명해 드리겠습니다.

1. 모듈 임포트

import Image from 'next/image'

next/image에서 Image 컴포넌트를 가져옵니다. 이 컴포넌트는 Next.js에서 이미지를 효과적으로 최적화하여 로드할 수 있게 합니다.

2. `Home` 컴포넌트 정의

export default function Home() {...}

Home이라는 기본 함수 컴포넌트를 내보냅니다. 이 컴포넌트는 웹 페이지의 주요 내용을 표시합니다.

3. 페이지 레이아웃

<main className="flex min-h-screen ... p-24">

main 태그는 웹 페이지의 주요 콘텐츠를 나타냅니다.
className 속성을 통해 스타일을 지정합니다. 여기서는 Flexbox를 사용하여 내용을 중앙에 위치시킵니다.

4. 안내 메시지

<p className="fixed left-0 top-0 ... lg:dark:bg-zinc-800/30">
  Get started by editing&nbsp;
  <code className="font-mono font-bold">app/page.tsx</code>
</p>

페이지 상단에 "Get started by editing app/page.tsx"라는 안내 메시지를 표시합니다.

5. 로고 및 바닥글

<a ... href="https://vercel.com?...">
  By{' '}
  <Image ... src="/vercel.svg" alt="Vercel Logo" ... />
</a>

페이지 하단에 Vercel 로고와 함께 'By Vercel'이라는 텍스트를 표시합니다.

6. Next.js 로고

<Image ... src="/next.svg" alt="Next.js Logo" ... />

페이지 중앙에 큰 Next.js 로고를 표시합니다.

7. 참조 링크

<a href="https://nextjs.org/docs?...">
  ...
</a>

4개의 다른 참조 링크 (Docs, Learn, Templates, Deploy)가 있습니다. 각 링크는 관련 주제나 서비스로 연결됩니다.

8. Tailwind CSS 기반 반응형 디자인 코드 분석

처음에 보았던 것처럼, 화면 크기별로 출력이 다릅니다.

app/page.tsx 파일에는 여러 화면 크기에 대응하는 반응형 디자인을 위한 클래스들이 포함되어 있습니다. Tailwind CSS를 사용하면서 이러한 반응형 디자인을 구현하는 데 사용되는 접두어와 클래스를 살펴보겠습니다.

모바일 (기본)
- Tailwind CSS에서는 모바일 우선 접근 방식을 취하고 있어, 별도의 접두어 없이 지정된 스타일이 기본적으로 모바일에 적용됩니다.
- 예: flex, min-h-screen 등
태블릿 (Medium devices)
- md: 접두어를 사용해서 태블릿 디바이스에 대한 스타일을 지정합니다.
- 이 파일에는 md: 접두어가 직접 사용되지 않았습니다.
노트북 (Large devices)
- lg: 접두어로 시작하는 클래스들이 있습니다.
- 예:
  - lg:flex: 노트북 화면 크기에서 flex 레이아웃을 사용합니다.
  - lg:static: 노트북 화면 크기에서 position을 static으로 설정합니다.
  - lg:w-auto: 노트북 화면 크기에서 너비를 자동으로 설정합니다.
  - lg:rounded-xl: 노트북 화면 크기에서 큰 둥근 모서리를 적용합니다.
  - ... (그 외 많은 lg: 클래스들)
데스크탑 (Extra Large devices)
- xl: 접두어를 사용해서 데스크탑 디바이스에 대한 스타일을 지정합니다.
- 이 파일에는 xl: 접두어가 직접 사용되지 않았습니다.

모든 클래스를 열거하기는 어렵지만, 위에서 언급한 접두어를 사용하는 클래스들은 해당 화면 크기에 도달했을 때만 적용됩니다. 따라서 각 접두어에 따라 화면 크기가 변경될 때 어떤 스타일 변경이 발생하는지 확인하면 반응형 디자인의 동작을 파악할 수 있습니다.

app/page.tsx는 웹 페이지의 주요 콘텐츠를 표시하는 컴포넌트입니다. 여기에는 Next.js와 Vercel에 관한 정보 및 링크가 포함되어 있으며, 사용자에게 페이지를 편집하는 방법에 대한 안내도 제공합니다. 이 코드는 Next.js의 기본 템플릿 중 하나로 보입니다.

스타일 CSS 분석

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

app/global.css 파일을 분석하겠습니다.

TailwindCSS Directives:
- @tailwind base;: TailwindCSS의 기본 스타일을 포함합니다. 이는 브라우저 간 일관성을 제공하도록 기본 HTML 태그의 스타일을 재정의합니다.
- @tailwind components;: TailwindCSS에서 제공하는 컴포넌트 스타일을 포함합니다.
- @tailwind utilities;: 유틸리티 클래스에 대한 스타일을 포함합니다. 이 클래스들은 개발자가 HTML에서 직접 사용하여 스타일링 할 수 있습니다.
CSS Custom Properties:
- :root: 전체 문서의 최상위 요소를 의미하는 pseudo-class 선택자입니다. 여기서 CSS custom properties (또는 "CSS variables")를 정의하고 있습니다.
  - --foreground-rgb: 글자의 색상을 정의합니다. 기본적으로 검은색을 가집니다.
  - --background-start-rgb & --background-end-rgb: 배경색의 시작과 끝 색상을 정의합니다. 기본적으로 밝은 색상부터 아주 밝은 흰색으로 그라데이션이 진행됩니다.
Media Query for Dark Mode:
- @media (prefers-color-scheme: dark): 사용자의 OS가 다크 모드를 선호하는 경우에만 적용되는 스타일을 정의하는 미디어 쿼리입니다.
  - --foreground-rgb: 다크 모드에서는 글자 색상이 흰색이 됩니다.
  - --background-start-rgb & --background-end-rgb: 다크 모드에서는 배경색이 검은색으로 설정됩니다.
Body Styling:
- color: 글자 색상을 위에서 정의한 --foreground-rgb 변수를 사용하여 설정합니다.
- background: 두 개의 배경을 정의합니다.
  - 첫 번째 배경은 linear-gradient로, 위에서 아래로 진행되는 그라데이션입니다. 시작은 투명하고, 끝은 --background-end-rgb 변수의 색상을 사용합니다.
  - 두 번째 배경은 --background-start-rgb 변수의 색상을 사용하며, 전체 바디에 적용됩니다. 이는 그라데이션이 종료된 이후의 색상으로 보여집니다.

요약하면, 이 CSS는 TailwindCSS를 기반으로하며, 라이트 모드와 다크 모드에 따라 텍스트와 배경 색상을 동적으로 변경합니다. 사용자의 OS 설정에 따라 자동으로 색상을 조정합니다.

"flex 컨테이너"는 Flexbox 레이아웃 모델을 사용하여 그 안의 아이템들을 배치하도록 디자인된 부모 요소입니다. ↩