Nuxt.js에서의 컴포넌트 계층은 굉장히 구조적입니다. 효율적인 개발과 유지보수를 위해 각각의 디렉터리와 계층이 특정 역할을 담당하며, 정해진 구조에 따라 프로그램을 작성해야 합니다.
app.vue
app.vue 파일은 Nuxt 애플리케이션의 최상위 컴포넌트로서, 모든 페이지와 레이아웃을 감싸는 전역적인 설정을 관리합니다.
app.vue는 Nuxt 애플리케이션의 진입점입니다. 애플리케이션의 모든 경로에 대한 컨텐츠를 렌더링합니다.
layouts 디렉터리
레이아웃을 정의하는 계층으로, 여러 페이지가 공통으로 사용할 수 있는 레이아웃을 설정하는 데 사용됩니다.
레이아웃은 헤더, 푸터와 같이 여러 페이지에 대한 공통된 UI를 의미합니다. 디폴트 레이아웃은 기본적으로 layouts/default.vue 파일이 사용되며 사용자 정의 레이아웃은 페이지 메타데이터로 설정할 수 있습니다.
- NuxtLayout 컴포넌트를 명시적으로 렌더링하거나 특정 레이아웃을 지정하지 않으면, Nuxt는 layouts/index.vue 파일을 기본 레이아웃으로 사용하여 모든 페이지를 렌더링합니다.
- 만약 특정 페이지에서 다른 레이아웃을 사용하고 싶다면, 아래와 같이 layout 옵션을 지정할 수 있습니다.
예시 코드 - custom.vue 레이아웃을 생성
<!-- layouts/custom.vue -->
<template>
<div>
<nav>커스텀 네비게이션</nav>
<Nuxt /> <!-- 페이지 컴포넌트가 여기 렌더링됩니다 -->
</div>
</template>
<style scoped>
/* 커스텀 레이아웃 스타일 */
nav {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
</style>예시 코드 - 'custom' 레이아웃을 사용하도록 지정
<!-- pages/about.vue -->
<template>
<div>
<h1>About 페이지</h1>
<p>이 페이지는 커스텀 레이아웃을 사용합니다.</p>
</div>
</template>
<script>
export default {
layout: 'custom' // 여기서 custom 레이아웃을 사용한다고 명시
}
</script>pages 디렉터리
Nuxt의 가장 핵심적인 부분으로, 페이지 컴포넌트를 정의하는 계층입니다. 이곳에 생성된 파일들은 자동으로 라우팅 설정이 됩니다.
Nuxt의 파일 기반 라우팅 시스템 덕분에 pages 폴더 내에 있는 모든 Vue 파일이 자동으로 URL 라우트와 연결됩니다. 예를 들어, pages/about.vue는 /about 경로로 매핑됩니다.
components 디렉터리
재사용 가능한 Vue 컴포넌트를 정의하는 계층입니다.
이 디렉터리에는 특정 페이지나 레이아웃에서 반복적으로 사용할 수 있는 컴포넌트를 정의합니다. 예를 들어, 버튼, 카드, 모달과 같은 UI 요소를 정의할 수 있습니다.
https://nuxt.com/docs/guide/concepts/auto-imports
공식 문서를 통해 알 수 있듯이
- components/
- composables/
- utils/
위 하위의 파일들은 Nuxt.js에서 auto import 하기 때문에 편리하게 사용 가능합니다.
store 디렉터리
상태 관리를 위한 Vuex 스토어를 정의하는 계층입니다.
Nuxt에서 상태 관리를 위한 Vuex를 사용하는 경우 이 디렉터리에서 스토어를 정의합니다. 상태를 관리할 필요가 없거나 Pinia와 같은 다른 상태 관리 라이브러리를 사용하는 경우, 이 디렉터리를 만들 필요는 없습니다.
middleware 디렉터리
페이지나 라우트 진입 시 특정 논리를 처리하는 중간 단계 역할을 합니다.
사용자가 특정 페이지에 접근할 때 미리 처리해야 할 작업들을 정의할 수 있습니다. 예를 들어, 인증이 필요한 페이지에 접근할 때 로그인 여부를 확인하는 로직을 여기에 작성할 수 있습니다.
assets 디렉터리
스타일, 이미지, 폰트 등과 같은 자원 파일을 저장하는 곳입니다.
이 디렉터리의 자원은 빌드 프로세스 중에 Webpack을 통해 처리되며, 전역적인 스타일이나 자원들을 정의하는 데 사용됩니다.
plugins 디렉터리
Nuxt 애플리케이션에 추가적으로 확장하거나 라이브러리를 등록하는 곳입니다.
이 디렉터리에서는 전역적으로 사용하는 라이브러리나 플러그인을 등록할 수 있습니다.
