에셋(Assets)

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

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

Public Directory

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

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

Example

예를 들어, public/img/ 디렉터리에 있는 이미지 파일을 정적 URL /img/nuxt.png로 참조하는 경우:

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

Assets Directory

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

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

애플리케이션 코드에서 app/assets/ 디렉터리에 있는 파일은 ~/assets/ 경로를 사용해 참조할 수 있습니다.

Example

예를 들어, 빌드 도구가 이 파일 확장자를 처리하도록 구성되어 있다면, 처리 대상이 될 이미지 파일을 참조하는 경우:

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