레이어 (Layers)

Nuxt의 핵심 기능 중 하나는 레이어와 확장(extends) 지원입니다. 기본 Nuxt 애플리케이션을 확장하여 컴포넌트, 유틸리티, 설정을 재사용할 수 있습니다. 레이어 구조는 표준 Nuxt 애플리케이션과 거의 동일하여 작성하고 유지 관리하기 쉽습니다.

사용 사례

• nuxt.config 및 app.config를 사용하여 프로젝트 간에 재사용 가능한 설정 프리셋을 공유
• app/components/ 디렉터리를 사용해 컴포넌트 라이브러리 생성
• app/composables/ 및 app/utils/ 디렉터리를 사용해 유틸리티 및 컴포저블 라이브러리 생성
• Nuxt 모듈 프리셋 생성
• 프로젝트 간 표준 설정 공유
• Nuxt 테마 생성
• 모듈식 아키텍처를 구현하여 코드 구조를 개선하고, 대규모 프로젝트에서 도메인 주도 설계(DDD) 패턴을 지원

사용법

기본적으로, 프로젝트 내 ~~/layers 디렉터리에 있는 모든 레이어는 자동으로 프로젝트의 레이어로 등록됩니다.

추가로, 각 레이어의 srcDir에 대한 이름 있는 레이어 별칭이 자동으로 생성됩니다. 예를 들어, ~~/layers/test 레이어에 #layers/test를 통해 접근할 수 있습니다.

또한, nuxt.config 파일에 extends 속성을 추가하여 레이어를 확장할 수 있습니다.

export default defineNuxtConfig({
  extends: [
    // 로컬 레이어에서 확장
    '../base',
    // 설치된 npm 패키지에서 확장
    '@my-themes/awesome',
    // git 저장소에서 확장
    'github:my-themes/awesome#v1',
  ],
})

비공개 GitHub 저장소에서 확장하는 경우 인증 토큰을 전달할 수도 있습니다:

export default defineNuxtConfig({
  extends: [
    // 레이어별 설정
    ['github:my-themes/private-awesome', { auth: process.env.GITHUB_TOKEN }],
  ],
})

export default defineNuxtConfig({
  extends: [
    [
      'github:my-themes/awesome',
      {
        meta: {
          name: 'my-awesome-theme',
        },
      },
    ],
  ],
})

Nuxt는 원격 레이어 확장을 위해 unjs/c12 및 unjs/giget을 사용합니다. 더 많은 정보와 사용 가능한 모든 옵션은 문서를 참고하세요.

레이어 우선순위

여러 레이어를 사용할 때는 덮어쓰기(override) 순서를 이해하는 것이 중요합니다. 우선순위가 높은 레이어는 동일한 파일이나 컴포넌트를 정의할 경우 우선순위가 낮은 레이어를 덮어씁니다.

우선순위는 높은 것에서 낮은 순으로 다음과 같습니다:

1. 프로젝트 파일 - 항상 가장 높은 우선순위를 가집니다
2. ~~/layers 디렉터리의 자동 스캔된 레이어 - 알파벳 역순으로 정렬됨 (Z가 A보다 높은 우선순위)
3. 설정의 extends 내 레이어 - 첫 번째 항목이 두 번째 항목보다 높은 우선순위

각 방식을 언제 사용할까

• extends - 외부 의존성(npm 패키지, 원격 저장소) 또는 프로젝트 디렉터리 밖의 레이어에 사용
• ~~/layers 디렉터리 - 프로젝트의 일부인 로컬 레이어에 사용

예시

export default defineNuxtConfig({
  extends: [
    // 프로젝트 외부의 로컬 레이어
    '../base',
    // NPM 패키지
    '@my-themes/awesome',
    // 원격 저장소
    'github:my-themes/awesome#v1',
  ],
})

또한 ~~/layers/custom이 있는 경우, 우선순위는 다음과 같습니다:

• 프로젝트 파일 (가장 높음)
• ~~/layers/custom
• ../base
• @my-themes/awesome
• github:my-themes/awesome#v1 (가장 낮음)

이는 프로젝트 파일이 어떤 레이어보다도 우선하며, ~~/layers/custom이 extends 내의 모든 내용을 덮어쓴다는 의미입니다.

예시