[Nuxt] 프로젝트 폴더 구조, 기본 파일
Nuxt.js는 Vue.js를 이용한 프론트엔드 개발을 더욱 편리해주는 프레임워크이다.
(프레임워크 위에서 동작하는 프레임워크)
저는 Nuxt.js : Vue.js = Spring Boot : SpringFramework 와 비슷하다고 느꼈습니다.
Nuxt 프로젝트를 처음 생성하면 기본적으로 여러 패키지들이 자동으로 생성되는데, 이는 Nuxt에서 사용하는 규칙과 같은 것으로, 각 패키지의 역할이 정해져 있다. 각 패키지에 대해 알아보자.
Nuxt 기본 프로젝트 구조
.nuxt
Build 결과물
assets
css, image, font 당 웹 정적 리소스
components
Vue 컴포넌트
layouts
레이아웃 컴포넌트 (상단, 하단 탭과 같이 모든 페이지에 동일하게 적용되는 레이아웃)들이 위치한다.
- 화면을 띄울 때 가장 첫번째로 띄워진다
- footer, header 등을 정의해놓고, 여러 레이아웃을 만들어둔다. (모듈화)
- 특정 페이지를 만들 때 해당 레이아웃을 가져와서 구성하고, 컨텐츠를 따로 작성한다.
- 공통 에러페이지 error.vue도 여기 위치
middleware
SSR(서버 사이드 랜더링) 시 서버에서 브라우저로 파일을 넘기기 전에 실행할 사용자 정의 함수가 위치한다.
pages
Nuxt는 파일 기반의 라우팅을 해준다. pages 아래에 있는 .vue 파일들이 실제 유저가 볼 수 있는 페이지들이다.
만약 pages 아래에 /member/info.vue 파일이 존재한다면, 브라우저에서 {url}/member/info로 접근했을 때 info.vue 파일이 보여진다.
프로젝트가 빌드되면, .nuxt/router.js에 이 pages 패키지를 기반으로 자동으로 routes가 생성된다.
plugins
Vue 애플리케이션이 생성되기 전에 실행하고 싶은 js 플러그인 등이 여기 들어간다. (axios 등)
static
빌드시 서버의 루트에 존재해야 하는 파일이 여기 들어간다. 파비콘, robots.txt 등의 파일이 여기 위치된다.
store
vuex Store 파일을 포함하는 디렉터리.
Nuxt 설정 파일
package.json
프로젝트의 설정과 의존성을 관리하는 파일이다.
프로젝트 이름, 버전, 설명, 프로젝트에서 사용하는 패키지, 라이브러리 버전 등의 정보가 포함된다.
scripts에서는 개발모드, 배포 모드 등의 환경을 각각 설정해준다.
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
}nuxt.config.js
Nuxt.js 프로젝트의 핵심 설정 파일로, Nuxt 앱의 기본 동작, 모듈, 플러그인, 빌드 방식, 라우팅, 환경 변수 등을 정의하는 곳이다.
| modules | 사용할 Nuxt 모듈 등록 (예: Axios, Auth, Tailwind 등) |
| plugins | Vue에서 사용할 플러그인 정의 (ex: 전역 mixin, 컴포저블 등록 등) |
| build | 빌드 관련 설정 (Babel 설정, transpile 등) |
| css | 전역 CSS 또는 SCSS 파일을 등록 |
| runtimeConfig | 클라이언트/서버에서 사용할 환경 변수 설정 (public과 private 구분) |
| app.head | <head> 태그 관련 설정 (title, meta, favicon 등) |
| routeRules | 각 경로에 대한 캐싱, 미들웨어 적용 등 SSR 규칙 설정 |
| devtools, ssr, components | 개발 환경, SSR 사용 여부, 자동 컴포넌트 등록 등 기본 기능 설정 |