[nuxt3] nuxt3 + vuetify3 + pinia + typescript로 todolist앱 만들기 -1- Nuxt 폴더 구조

• 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파일에 의해 라이브러리 버전이 변하더라도 기존 의존 관계를 유지해 패키지로 인한 버그 발생 가능성을 줄여줍니다. 개발하면서 건들 일은 거의 없지만 정확한 개념을 아는 것은 매우 중요해요!