프로젝트 구성 요소 하나씩 살펴보기

1. 1

   소개

2. 2

   설치및 설정

3. 3

   디렉터리 구조

4. 4

   코드 분석

이제 생성 된 디렉터리와 파일 하나씩 살펴 보도록 하겠습니다.

Visual Studio Code에서 살펴 보기

아래 명령어를 통해 Visual Studio Code 에디터를 실행 합니다.

code .

최상위 디렉터리와 파일

.
├── .next/
│   └── ...         # Next.js가 빌드 과정에서 생성하는 일시적인 파일들이 위치합니다.
├── app/
│   └── ...         # 애플리케이션의 주요 소스 코드와 관련 파일들이 위치합니다.
├── node_modules/
│   └── ...         # npm 또는 yarn을 통해 설치한 모든 종속성 모듈들이 위치합니다.
├── public/
│   └── ...         # 정적 파일들 (예: 이미지) 이 위치하며, 브라우저에서 직접 접근 가능합니다.
├── .eslintrc.json   # ESLint 구성 파일로, 코드 스타일 및 오류를 확인하는 데 사용합니다.
├── .gitignore       # Git 버전 관리에서 추적하지 않을 파일 및 디렉터리 목록입니다.
├── next-env.d.ts    # Next.js에서 사용하는 TypeScript 정의가 포함된 파일입니다.
├── next.config.js   # Next.js의 사용자 정의 설정을 하는 파일입니다.
├── package-lock.json # npm 패키지의 정확한 버전 정보를 포함합니다.
├── package.json      # 프로젝트 메타데이터와 종속성 목록이 포함된 파일입니다.
├── postcss.config.js # PostCSS 설정 파일입니다. CSS 전처리기에 대한 설정을 포함합니다.
├── README.md         # 프로젝트에 대한 설명 및 사용 방법을 설명하는 문서입니다.
├── tailwind.config.ts # Tailwind CSS의 사용자 정의 설정을 위한 파일입니다.
└── tsconfig.json      # TypeScript 프로젝트 설정 파일입니다.

프로젝트의 구조와 설정 파악

프로젝트의 구조와 설정을 처음으로 파악하려면 다음 파일들을 먼저 확인하는 것이 좋습니다:

1. README.md: 대부분의 프로젝트에는 README.md 파일이 포함되어 있습니다. 이 파일은 프로젝트의 개요, 설치 및 실행 방법, 기여 방법 등 필요한 주요 정보를 제공하는 경우가 많습니다. 따라서 프로젝트를 처음 접할 때 이 파일을 먼저 읽는 것이 좋습니다.

2. package.json: 이 파일은 프로젝트의 메타데이터와 종속성 목록을 포함하고 있습니다. 스크립트 섹션은 프로젝트를 실행, 빌드, 테스트하는 데 사용되는 명령어를 제공할 수 있으므로 중요합니다.

3. next.config.js: 이 파일은 Next.js의 사용자 정의 설정을 포함하고 있습니다. 프로젝트의 특별한 설정이나 플러그인, 경로 별칭 등이 정의되어 있을 수 있으므로, Next.js 프로젝트의 동작 방식을 이해하는 데 중요합니다.

4. .gitignore: 이 파일은 Git 버전 관리에서 추적하지 않을 파일 및 디렉터리 목록을 포함하고 있습니다. 어떤 파일이나 폴더가 버전 관리에서 제외되었는지 파악하는 데 도움이 됩니다.

이 외에도 프로젝트의 세부 사항과 관련된 다른 설정 파일들 (예: .eslintrc.json, postcss.config.js, tailwind.config.ts, tsconfig.json)은 필요에 따라 참고할 수 있습니다. 그러나 초기에 프로젝트의 전반적인 구조와 설정을 이해하는 데는 위에서 언급한 파일들을 먼저 확인하는 것이 좋습니다.

README.md 파일 살펴 보기

이 프로젝트는 create-next-app을 사용하여 시작된 Next.js 프로젝트입니다. 개발 서버를 실행하기 위해 여러 패키지 매니저 명령어(npm, yarn, pnpm, bun)가 제시되어 있으며, 서버가 실행되면 http://localhost:3000에서 결과를 확인할 수 있습니다. 주요 페이지는 app/page.tsx에서 편집할 수 있으며, 이 프로젝트는 Google Font 중 하나인 Inter를 최적화하여 로드하기 위해 next/font를 사용합니다. 추가로, Next.js에 대한 학습 자료와 Vercel 플랫폼을 사용한 배포 방법에 대한 정보가 제공됩니다.

package.json 파일 살펴 보기

{
  "name": "boilerplate",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.6.3",
    "@types/react": "18.2.22",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.16",
    "eslint": "8.49.0",
    "eslint-config-next": "13.5.2",
    "next": "13.5.2",
    "postcss": "8.4.30",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  }
}

이 package.json 파일은 Next.js 프로젝트를 위한 기본 설정을 담고 있습니다. 아래는 각 항목에 대한 설명입니다:

1. name: 프로젝트의 이름입니다. 여기서는 "boilerplate"로 설정되어 있습니다.
2. version: 프로젝트의 현재 버전입니다. 초기 버전으로 "0.1.0"로 설정되어 있습니다.
3. private: 이 항목이 true로 설정되면, 이 프로젝트는 npm 레지스트리에 publish되지 않습니다. 대부분의 개인 프로젝트나 내부 프로젝트에서 사용됩니다.
4. scripts:
   • dev: 개발 모드로 Next.js 앱을 실행합니다.
   • build: 프로덕션 용 코드를 빌드합니다.
   • start: 빌드된 코드를 실행하여 프로덕션 서버를 시작합니다.
   • lint: 코드의 스타일 및 문제점을 검사하기 위해 eslint를 사용합니다.
5. dependencies:
   • @types/*: TypeScript 타입 정의 파일입니다. React, Node.js와 같은 라이브러리들의 TypeScript 타입을 제공합니다.
   • autoprefixer: CSS에 자동으로 vendor prefixes를 추가해줍니다.
   • eslint & eslint-config-next: 코드 품질을 유지하기 위한 linting 도구입니다.
   • next: Next.js 프레임워크의 핵심 패키지입니다.
   • postcss: CSS 전처리기입니다.
   • react & react-dom: React 라이브러리와 DOM을 위한 React 함수.
   • tailwindcss: 유틸리티 기반의 CSS 프레임워크입니다.
   • typescript: TypeScript 언어 및 컴파일러입니다.

next.config.js 파일 살펴 보기

이것은 매우 기본적인 next.config.js 파일의 형태입니다. next.config.js 파일은 Next.js 프로젝트의 설정을 사용자 정의하기 위한 파일입니다.

1. /** @type {import('next').NextConfig} */:
   • 이 주석은 TypeScript 타입 주석입니다. nextConfig 객체가 NextConfig 타입을 가지도록 지정합니다. 이렇게 하면, nextConfig 객체에 Next.js 설정과 관련된 속성만 추가할 수 있도록 도와주며, 오타나 잘못된 속성을 추가할 경우 오류를 발생시킵니다. (주의: 이 주석은 실제로 TypeScript의 타입 체크 기능을 활성화하지 않습니다. TypeScript 환경에서만 작동합니다.)
2. const nextConfig = {}:
   • nextConfig라는 빈 객체를 선언합니다. 이 객체 내부에 Next.js의 설정을 추가할 수 있습니다. 현재는 어떠한 사용자 정의 설정도 포함되어 있지 않습니다.
3. module.exports = nextConfig:
   • nextConfig 객체를 내보냅니다. 이렇게 함으로써 Next.js는 이 파일을 통해 프로젝트 설정을 가져올 수 있습니다.

현재 이 next.config.js 파일은 기본 상태이며, 특별한 사용자 정의 설정이 포함되어 있지 않습니다. 필요에 따라 여기에 다양한 설정을 추가하여 Next.js 프로젝트의 동작을 사용자 정의 할 수 있습니다.

TypeScript 설정

tsconfig.json 파일은 TypeScript 프로젝트의 컴파일러 옵션과 포함/제외할 파일들을 설정하는 파일입니다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

1. compilerOptions: TypeScript 컴파일러의 동작을 설정하는 주요 옵션들입니다.
   • target: TypeScript가 JavaScript로 변환될 때, 어떤 ECMAScript 버전으로 컴파일될지 설정합니다. 여기서는 "es5"로 설정되어 있으므로 ES5 버전으로 컴파일됩니다.
   • lib: 컴파일에 포함할 라이브러리 파일들을 지정합니다. 기본적인 DOM, ESNext 기능들이 포함되어 있습니다.
   • allowJs: JavaScript 파일(.js)을 TypeScript로 컴파일 할 수 있게 합니다.
   • skipLibCheck: 선언 파일(.d.ts)의 타입 검사를 건너뛰게 합니다. 일부 라이브러리의 타입 정의와의 문제를 피하려고 사용합니다.
   • strict: 모든 엄격한 타입 검사 옵션을 활성화합니다. 코드의 타입 안정성을 향상시키기 위해 권장됩니다.
   • noEmit: 출력 파일을 생성하지 않게 합니다. Next.js는 TypeScript 코드를 직접 처리하므로 필요하지 않습니다.
   • esModuleInterop: ES 모듈과 CommonJS 모듈 간의 상호 운용성을 위한 코드를 생성합니다.
   • module & moduleResolution: 모듈 시스템과 해석 방식을 설정합니다.
   • jsx: JSX 코드의 처리 방식을 설정합니다. "preserve"는 JSX를 그대로 유지하라는 의미입니다. Next.js가 이를 처리합니다.
   • incremental: 증분 컴파일을 사용하여 빌드 시간을 단축합니다.
   • plugins: TypeScript 플러그인을 지정합니다. 여기서는 Next.js 관련 플러그인이 사용됩니다.
   • paths: 모듈 별칭을 설정합니다. @/* 별칭을 사용하여 프로젝트의 루트에서 모듈을 가져올 수 있습니다.
2. include: 컴파일에 포함될 파일 또는 디렉토리의 목록입니다. .ts, .tsx 파일과 특정 디렉토리가 포함됩니다.
3. exclude: 컴파일에서 제외될 파일 또는 디렉토리의 목록입니다. 일반적으로 node_modules는 제외됩니다.

초보 개발자는 이러한 옵션들을 이해하고, 필요에 따라 프로젝트의 요구 사항에 맞게 조정할 수 있어야 합니다. 하지만, Next.js 같은 프레임워크에서는 대부분의 설정이 이미 최적화되어 제공되므로, 처음에는 기본 설정을 그대로 사용하는 것이 좋습니다.

Tailwind 설정

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}
export default config

tailwind.config.ts 파일은 Tailwind CSS 프레임워크의 구성을 정의하는 파일입니다. 이 파일을 통해 Tailwind의 기본 설정을 확장하거나 수정할 수 있습니다. 제시된 내용을 기반으로 주요 항목을 설명하겠습니다.

1. content:
   • Tailwind CSS는 유틸리티 클래스를 자동으로 생성해주는 특징이 있습니다. content 배열은 Tailwind CSS가 유틸리티 클래스를 생성할 때, 어떤 파일들을 대상으로 할지를 지정합니다.
   • 여기서는 프로젝트 내의 ./pages, ./components, ./app 디렉터리에 있는 .js, .ts, .jsx, .tsx, .mdx 확장자를 가진 파일들을 대상으로 합니다.
2. theme:
   • Tailwind의 디자인 테마를 정의하거나 확장하는 부분입니다.
   • extend 내부에서 기존의 Tailwind 테마에 새로운 스타일이나 변수를 추가할 수 있습니다.
   • 여기서는 backgroundImage에 gradient-radial과 gradient-conic라는 두 가지 새로운 스타일을 추가하고 있습니다. 이 스타일들은 웹 페이지의 배경 이미지로서의 그라데이션을 제공합니다.
3. plugins:
   • Tailwind를 확장하기 위해 사용할 외부 플러그인을 추가하는 배열입니다. 현재는 추가된 플러그인이 없습니다.

이 파일은 Tailwind CSS의 동작을 결정하기 때문에, 디자인이나 스타일링과 관련된 문제가 발생하면 이 파일을 검토하는 것이 좋습니다.

[실습1] 다른 배경 스타일 적용 해 보기

backgroundImage에서 CSS 기반의 스타일을 사용하는 예제에 대해 설명 드립니다.

예를 들어, 단순한 선형 그라데이션 또는 반복되는 패턴을 추가하려면 다음과 같이 설정할 수 있습니다:

theme: {
    extend: {
        backgroundImage: {
            'gradient-blue-red': 'linear-gradient(45deg, #3498db, #e74c3c)',
            'dots-pattern': 'repeating-radial-gradient(circle, #333, #333 1px, transparent 1px, transparent 50%)',
            'stripes-pattern': 'repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 25%, #e0e0e0 25%, #e0e0e0 50%)'
        }
    }
}

이 설정에 따르면:

• gradient-blue-red: 파란색에서 빨간색으로 45도 각도의 선형 그라데이션을 제공합니다.
• dots-pattern: 반복되는 원형 그라데이션을 사용하여 점 패턴을 제공합니다.
• stripes-pattern: 반복되는 선형 그라데이션을 사용하여 줄무늬 패턴을 제공합니다.

이제 HTML에서 해당 스타일을 적용하려면 다음과 같이 Tailwind CSS 클래스를 사용합니다:

<div class="bg-gradient-blue-red"></div>
<div class="bg-dots-pattern"></div>
<div class="bg-stripes-pattern"></div>

이렇게 하면 각각의 div 요소에 위에서 정의한 선형 그라데이션, 점 패턴, 줄무늬 패턴이 적용됩니다.

[실습2] 이미지 기반 다른 배경 스타일 적용 해 보기

예를 들어, backgroundImage에 특정한 패턴 또는 이미지를 사용하려면 다음과 같이 설정할 수 있습니다:

theme: {
    extend: {
        backgroundImage: {
            'checkerboard': 'url("/path/to/checkerboard.png")',
            'dots-pattern': 'url("/path/to/dots-pattern.png")',
            'stripes-pattern': 'url("/path/to/stripes-pattern.png")'
        }
    }
}

위 예제에서는:

• checkerboard: 체커보드 패턴의 이미지를 배경으로 사용합니다.
• dots-pattern: 점 패턴의 이미지를 배경으로 사용합니다.
• stripes-pattern: 줄무늬 패턴의 이미지를 배경으로 사용합니다.

이렇게 설정한 후, 해당 스타일을 HTML 요소에 적용하려면 다음과 같이 Tailwind CSS 클래스를 사용합니다:

<div class="bg-checkerboard"></div>
<div class="bg-dots-pattern"></div>
<div class="bg-stripes-pattern"></div>

이렇게 하면 각각의 div 요소에 체커보드, 점 패턴, 줄무늬 패턴의 배경 이미지가 적용됩니다.

주의할 점은, 이미지 경로(/path/to/...)는 실제 프로젝트의 이미지 위치(public/ 하위)에 따라 변경되어야 합니다.

public/ 디렉터리 알아 보기

public/ 디렉터리는 Next.js 프로젝트에서 특별한 의미를 가지는 디렉터리입니다.

1. 정적 파일 호스팅:
   • public/ 디렉터리 내의 모든 파일은 프로젝트의 루트 URL에서 직접 접근할 수 있습니다.
   • 예를 들어, public/next.svg 파일은 웹 브라우저에서 http://your-domain.com/next.svg로 접근할 수 있습니다.
2. 최적화 없음:
   • public/에 저장된 파일은 webpack 또는 Next.js에 의해 변환되거나 최적화되지 않습니다. 그대로 제공됩니다.
   • 따라서 이미지 최적화, CSS 및 JS 번들링 등의 작업은 이 디렉터리에 있는 파일에 적용되지 않습니다.
3. 파비콘 및 웹 매니페스트:
   • 웹사이트의 파비콘, robots.txt, sitemap.xml, 웹 앱 매니페스트 등과 같은 특별한 파일들을 public/ 디렉터리에 위치시킬 수 있습니다. 이렇게 하면 해당 파일들을 웹사이트의 루트 경로에서 쉽게 참조할 수 있습니다.
4. 명심할 점:
   • public/ 디렉터리는 프로젝트의 루트에 직접 매핑되므로 디렉터리 내에 민감한 정보나 파일을 저장하지 않아야 합니다. 그렇게 하면 그러한 파일이 공개적으로 접근 가능해질 수 있습니다.
5. 이미지 최적화:
   • Next.js는 public/ 디렉터리의 이미지에 대한 자동 최적화를 제공하지 않습니다. 그러나 Image 컴포넌트를 사용하여 이러한 이미지를 로드하면 Image 컴포넌트의 기능을 활용하여 성능을 개선할 수 있습니다.

결론적으로, public/ 디렉터리는 프로젝트에서 공개적으로 접근 가능한 정적 파일들을 저장하는 곳입니다. 따라서, 이 디렉터리 내에 저장되는 파일들은 프로젝트의 루트 URL에서 바로 접근하고 사용할 수 있어야 합니다.

app/ 디렉터리 알아 보기

app/ 디렉터리는 주어진 프로젝트 구조에서 중요한 요소들을 포함합니다.

1. favicon.ico:

   • 설명: 웹사이트의 아이콘 파일입니다. 브라우저 탭, 북마크, 모바일 홈 화면 아이콘 등에서 사용됩니다.
   • 중요성: 웹사이트의 브랜드 아이덴티티를 나타냅니다. 사용자가 웹사이트를 쉽게 인식할 수 있게 해주는 요소 중 하나입니다.

2. globals.css:

   • 설명: 전역 스타일을 정의하는 CSS 파일입니다. 이 파일에는 전체 웹 애플리케이션에 적용되는 스타일이 포함됩니다.
   • 중요성: 웹사이트의 전반적인 디자인과 일관성을 유지하기 위한 중요한 파일입니다. 특히 디자인의 기본 요소나, 전체적인 레이아웃, 폰트 스타일 등을 설정할 때 사용됩니다.

3. layout.tsx:

   • 설명: 공통적인 웹 페이지의 구조나 레이아웃을 정의하는 React 컴포넌트입니다. 대부분의 페이지에서 재사용되는 헤더, 푸터, 사이드바 등의 요소를 포함할 수 있습니다.
   • 중요성: 웹사이트의 모든 페이지에 일관된 레이아웃과 구조를 제공하려면 이 파일을 수정하면 됩니다. 유저 경험(UX)의 일관성을 제공하는 데 중요한 역할을 합니다.

4. page.tsx:

   • 설명: 주 페이지의 React 컴포넌트입니다. 이 파일은 웹사이트의 주요 내용을 포함하며, 다른 페이지 컴포넌트로 확장될 수도 있습니다.
   • 중요성: 웹사이트의 주요 내용과 기능을 제공합니다. 이 파일을 기반으로 다양한 페이지를 만들거나 주요 컴포넌트를 구성할 수 있습니다.

결론적으로, app/ 디렉터리는 웹 애플리케이션의 주요 디자인과 구조를 관리하는 핵심 디렉터리입니다. 각 파일의 역할과 중요성을 파악하면 웹 애플리케이션의 전반적인 흐름과 구조를 이해하는 데 도움이 됩니다.