에셋

Nuxt는 스타일시트, 폰트 또는 이미지와 같은 에셋을 처리하기 위해 두 개의 디렉토리를 사용합니다.

• public/ 디렉토리의 내용은 서버 루트에서 그대로 제공됩니다.
• assets/ 디렉토리는 빌드 도구(Vite 또는 webpack)가 처리하길 원하는 모든 에셋을 관례적으로 포함합니다.

Public 디렉토리

public/ 디렉토리는 애플리케이션의 정의된 URL에서 공개적으로 접근 가능한 정적 에셋을 위한 공개 서버로 사용됩니다.

애플리케이션의 코드나 브라우저에서 루트 URL /을 통해 public/ 디렉토리의 파일을 가져올 수 있습니다.

예시

예를 들어, public/img/ 디렉토리의 이미지 파일을 참조하면, 정적 URL /img/nuxt.png에서 접근할 수 있습니다:

<template>
  <img src="/img/nuxt.png" alt="Discover Nuxt" />
</template>

Assets 디렉토리

Nuxt는 Vite (기본값) 또는 webpack을 사용하여 애플리케이션을 빌드하고 번들링합니다. 이러한 빌드 도구의 주요 기능은 JavaScript 파일을 처리하는 것이지만, 플러그인 (Vite의 경우) 또는 로더 (webpack의 경우)를 통해 스타일시트, 폰트 또는 SVG와 같은 다른 종류의 에셋도 처리할 수 있도록 확장할 수 있습니다. 이 단계는 주로 성능이나 캐싱 목적(예: 스타일시트 최소화 또는 브라우저 캐시 무효화)을 위해 원본 파일을 변환합니다.

관례적으로, Nuxt는 이러한 파일을 저장하기 위해 assets/ 디렉토리를 사용하지만, 이 디렉토리에 대한 자동 스캔 기능은 없으며, 다른 이름을 사용할 수도 있습니다.

애플리케이션의 코드에서 assets/ 디렉토리에 위치한 파일은 ~/assets/ 경로를 사용하여 참조할 수 있습니다.

예시

예를 들어, 빌드 도구가 이 파일 확장자를 처리하도록 구성되어 있다면, 처리될 이미지 파일을 참조하는 방법은 다음과 같습니다:

<template>
  <img src="~/assets/img/nuxt.png" alt="Discover Nuxt" />
</template>