[Nuxt3] 디렉토리 구조

├── .nuxt
├── src
│   ├── assets
│   ├── components
│   ├── composables
│   ├── layouts
│   ├── middleware
│   ├── pages
│   ├── plugins
│   └── public

• .nuxt : Vue 애플리케이션을 생성하는데 필요한 모든 것을 포함하는 디렉토리
  • .nuxt 디렉토리에 있는 파일은 변경하지 않아야 한다.
• assets : SASS, JS, 이미지 등 컴파일되지 않는 파일을 포함하는 디렉토리
• components : 페이지로 가져오는 모든 Vue 컴포넌트를 저장하는 디렉토리
  • 설정 파일에서 컴포넌트 true로 설정하면 <script>에서 import할 필요 없이 Nuxt가 컴포넌트를 자동으로 가져온다.
• composables : 재사용 가능한 함수 등을 저장하는 디렉토리
• layouts : 페이지의 구조를 저장하는 디렉토리 (e.g. header, footer)
• middleware : 애플리케이션 전체에 사용자 정의 가능한 경로 미들웨어 프레임워크를 포함할 수 있어 특정 경로를 접근하기 전에 실행하려는 코드를 추출할 수 있다. 이 middleware는 Nuxt 애플리케이션의 Vue 부분인 클라이언트 측에서만 실행된다.
  • 경로 미들웨어 3가지
    • 익명 경로 미들웨어 : 사용되는 페이지에서 직접 정의
    • 명명된 라우트 미들웨어 : 미들웨어/디렉토리에 배치, 페이지에서 사용될 때 비동기로 가져와 자동으로 로드
    • 글로벌 라우트 미들웨어 : 미들웨어/디렉토리에 배치, 경로가 변경될 때마다 자동으로 실행
• pages : 애플리케이션의 뷰와 경로를 포함하는 디렉토리
  • Nuxt는 이 디렉토리 내의 모든 vue 파일을 라우터로 생성한다.
• plugins : 기능을 추가하는 독립형 코드를 담은 디렉토리
  • Nuxt는 플러그인 디렉토리에 있는 파일을 자동으로 읽고 Vue를 생성할 때 로드한다. plugins 디렉토리에 있는 모든 플러그인은 자동 등록되므로 nuxt.config.ts에 추가할 필요가 없다.
• public : 서버 루트에 직접 제공하기 때문에 이름을 유지해야 하는 파일(e.g. robots.txt)이나 변경하지 않을 가능성이 높은 파일(e.g. favicon.ico)을 포함하는 디렉토리
  • Nuxt 2 버전에서는 static 폴더명으로 사용하였다.

• 참고 : Nuxt3 Directory Structure