- API 문서 링크
https://v3.nuxtjs.org/guide/directory-structure/nuxt
⭐ 제가 생각하는 개발할 때 많이 건드는 횟수, 중요도는 별 갯수로 표시했어요! (1~5개) ⭐
- .nuxt ⭐
개발 서버가 빌드된 폴더입니다. ssr 형태로 server, client가 모두 빌드되며, auto import, 자동완성을 위한 d.ts 파일들이 생성됩니다. 개발하면서 건들 일은 없어요!
- .output ⭐
yarn generate 시 생기는 실제 프로덕션이 빌드되는 폴더입니다. 안에 index.html이 있으며 정적 파일들이 생성됩니다. 호스팅 할 때 필요합니다.
- api ⭐⭐⭐⭐
Axios interface와 service들이 있는 폴더입니다. 백엔드에 http 요청을 보내는 api들이 모여 있으며 Axios instance 생성, interceptor 설정, 각 인터페이스의 타입이 정의되어 있습니다.
- assets ⭐⭐⭐⭐⭐
css, styleSheets, javascript module, images 등이 모여 있는 파일입니다. 루트 서버에서 접근 불가능합니다. 페이지, 컴포넌트의 scss 파일을 여기에 분리해서 사용합니다.
- components ⭐⭐⭐⭐⭐
컴포넌트들이 모여있는 폴더입니다. Nuxt에선 자동 임포트되어 각 vue 파일에서 임포트하지 않아도 사용할 수 있습니다.
- composables ⭐⭐⭐
Vue computed와 같은 역할을 합니다. 미리 변수를 계산해 놓아서 성능을 향상시키며 auto import 되어 쉽게 사용할 수 있습니다.
- coverage ⭐
링크: https://vitest.dev/guide/coverage.html
vitest에서 사용하는 테스트 cli-interface 라이브러리이며 yarn coverage로 사용 가능합니다. 개발하면서 건들 일은 없어요!
- i18n ⭐
링크: https://vue-i18n.intlify.dev/
국제화를 지원하는 라이브러리입니다. 키를 이용해 각 나라의 언어를 보여줍니다. 자세한 사항은 위 링크를 참고해주세요.
- layouts ⭐⭐⭐
앱의 레이아웃을 저장합니다. 개발한 페이지(*.vue)가 자식으로 렌더링되며 기본 레이아웃 파일 이름은 default.vue입니다.
- middleware ⭐⭐⭐⭐
라우팅 할 때 실행할 미들웨어입니다. to, from을 통해 route 객체를 가져올 수 있으며 인증 토큰 체크 등의 로직을 라우팅 전에 실행할 수 있습니다.
- node_modules ⭐
node package를 저장하는 폴더입니다. yarn install 등의 명령어로 패키지를 설치할 때 생성됩니다. 개발하면서 건들 일은 없어요!
- pages ⭐⭐⭐⭐⭐
앱의 페이지를 저장하는 폴더입니다. 각 vue파일의 이름이 자동으로 라우터가 됩니다. (예: pages/login.vue → https://localhost:3000/login) index.vue는 그 파일이 저장된 폴더 이름의 라우터에 할당됩니다. (예: pages/login/index.vue → https://localhost:3000/login) index.vue와 같은 위치에 파일을 만들어 nested routing을 할 수 있습니다. (예: pages/login/find-password.vue → https://localhost:3000/login/find-password)
- plugins ⭐⭐⭐
pinia, quasar 등의 vue 플러그인을 등록합니다. 각 플러그인에 대한 설정을 할 수 있습니다.
- public ⭐
루트 서버에서 접근할 수 있는 정적 파일을 저장하는 폴더입니다. favicon.ico, index.html을 저장합니다.
- server ⭐⭐⭐⭐
앱의 테스트 서버를 구축할 수 있습니다. h3 라이브러리를 사용합니다.
- stores ⭐⭐⭐⭐⭐
중앙 관리 스토어들을 저장합니다. pinia를 사용하며 use~Store의 네이밍을 사용합니다. 스토어에 플러그인으로 router, axios 등을 넣어 this로 부를 수 있습니다. 비슷한 라이브러리로 vuex, redux 등이 있습니다.
- types ⭐⭐⭐⭐⭐
모듈의 d.ts, 컴포넌트, 페이지의 타입을 저장합니다.
- utils ⭐⭐⭐
앱에서 util로 사용할 함수를 저장하며 여기에 선언된 함수는 auto import 됩니다.
- .env ⭐⭐
앱의 환경 변수를 저장합니다. dotenv 라이브러리를 통해 불러옵니다. .env.production과 같은 subfix로 운영 환경에 따라 환경 변수를 바꿀 수 있습니다.
- .gitattributes ⭐
링크: https://git-scm.com/book/ko/v2/Git맞춤-Git-Attributes
깃에 디렉토리와 파일 단위로 다른 설정을 적용할 수 있습니다. 개발하면서 건들 일은 없어요!
- .gitignore ⭐⭐⭐
깃에서 제외할 파일 이름들을 저장합니다. 정규식을 통해 여러 파일을 제외 시킬 수 있습니다.
- app.config.ts ⭐⭐⭐
앱의 메타 데이터를 설정합니다. title, theme 등을 설정할 수 있습니다.
- app.vue ⭐⭐⭐
앱이 처음 렌더링되는 페이지입니다. 앱의 기본 레이아웃, 초기 설정 로직, 전체 에러 처리 등이 들어갑니다.
- docker-compose.yml ⭐
도커 이미지 스크립트입니다. docker-compose 명령어를 통해 docker container에 서버를 올릴 수 있습니다.
- Dockerfile ⭐
docker-compose의 각 이미지에서 실행할 스크립트 파일입니다
- nuxt.config.ts ⭐⭐⭐⭐⭐
Nuxt 설정 파일입니다. typescript, css import, vite, module 뿐만 아니라 환경변수, ssr 등 nuxt의 전체적인 설정을 저장합니다.
- package.json ⭐⭐⭐⭐⭐
링크: https://docs.npmjs.com/cli/v9/configuring-npm/package-json/
node의 패키지 관리 json입니다. npm 명령어 alias와 개발, 프로덕션 패키지 버전 관리가 주 기능이며 프로젝트 이름, 버전, 뿐만 아니라 배포 설정도 가능합니다. node 패키지의 전반적인 설정을 관리하니 정확히 공부할 필요가 있어요.
- tsconfig.json ⭐⭐⭐
앱의 타입스크립트 설정을 저장합니다.
- yarn.lock ⭐⭐⭐⭐⭐
package.json의 실제 모든 패키지 의존 관계를 저장합니다. 패키지 설치 시 생성되며 lock파일에 의해 라이브러리 버전이 변하더라도 기존 의존 관계를 유지해 패키지로 인한 버그 발생 가능성을 줄여줍니다. 개발하면서 건들 일은 거의 없지만 정확한 개념을 아는 것은 매우 중요해요!
