[Nuxt.js] 공식 문서 번역하기(폴더 구조 중심)

---

영어로 돼 있지만 난 굴복하지 않는다

---

라우팅(Routing)

자동 라우트(Auto-route)

• 일반적인 vue로 개발을 할 때는, router.js와 같은 configuration 파일을 셋업 후 내부에 모든 라우터를 import 해야 라우터를 구현할 수 있지만, nuxt는 자동으로 생성해줍니다. 라우터 config를 적을 필요가 없다는 뜻!
• 모든 라우트에 자동 코드 스플리팅도 제공해줍니다.
• 이 말인 즉, 앱 라우팅을 위해서는 그냥 pages폴더 내에 (이름).vue 파일을 만들면 됩니다.
• 예를 들어, pages 폴더 안에 home.vue 라는 파일을 만들면 /home 으로 자동 라우팅 됩니다.
• 어떻게 라우팅이 적용됐는지는 root단계에서 .nuxt 파일 내 router.js를 확인하면 됩니다.

네비게이션(navigation)

• NuxtLink 컴포넌트를 통해 페이지를 네비게이션 합니다. 예를 들면 <NuxtLink></NuxtLink>라고 쓰는 것 입니다.
• 이 컴포넌트는 nuxt 안에 이미 포함 돼 있어서 다른 컴포넌트를 import 하는 수고를 하지 않아도 됩니다.
• to="/about"이라고 하는 점을 제외하면 a태그와 비슷합니다.
• vue-router를 써 보았다면 <RouterLink>와 같습니다.

 

---

 

폴더구조

처음 nuxt 앱을 만들면 방대한 폴더들에 눈이 돌아가기 마련입니다.

대체 어느 폴더가 어떤 역할을 하는지에 대해 알려드려요.

 

-      Pages

앱의 view와 route를 포함합니다. nuxt는 디렉토리 안 xxx.vue 파일을 읽고 그것들로 앱 라우터를 만듭니다.

 

-      Components

모든 vue 컴포넌트들이 들어가며, 이것들을 pages에 임포트 시켜 사용합니다.

nuxt는 auto import 시켜주기 때문에 굳이 import 를 적을 필요가 없어요!

 

-      Assets

Styles, images, fonts와 같은 컴파일 되지 않은 assets를 포함합니다.

 

-      Static

이 디렉토리는 서버 루트와 바로 맵핑되고 robots.txt같은 이름을 유지해야하는 파일이나 favicon과 같은 변하지 않는 파일을 포함합니다.

 

-      Nuxt.config.js 파일

Nuxt.js의 유일한 환경설정 파일입니다. 모듈을 추가하거나 디폴트 세팅을 오버라이드 하고 싶을 때, 이곳에서 수정하면 됩니다.

 

-      Package.json 파일

본인의 앱에 대한 설명과 디펜던시들을 포함합니다.

 

프로젝트 구조에 대한 더 많은 지식

 

Nuxt 에는 content, layouts, middleware, modules, plugins 그리고 store 라는 더 많은 유용한 폴더와 파일들이 있습니다. 사실 이것들은 작은 앱을 만들 때는 딱히 필요하지 않습니다. 그러나 간단히 설명하자면 아래와 같습니다.

 

.nuxt 폴더는 .gitignore에 포함시켜 커밋되면 안되게 해야합니다! 이는 자동으로 nuxt dev나 nuxt build를 입력하면 생성되긴 합니다.

 

.nuxt 폴더의 내부:

-      Router.js 파일은 pages 폴더에 .vue 파일을 생성시키면 자동으로 생성됩니다. 이 파일은 디버깅 할 때 어떤 라우트가 vue-router를 위해 생성됐고, 특정 라우트의 이름을 찾기 위해서 사용하면 됩니다.

 

-      Router.scrollBehavior.js 파일은 router scrollbehavior입니다.

 

-      Components 폴더는 NuxtChild 와 NuxtLink 같은 당신의 모든 넉스트 컴포넌트들이 있습니다. Nuxt-build-indicator도 가지고 있는데, 이것은 우리가 당신 페이지 로딩을 기다릴 때 nuxt-loading 컴포넌트를 볼 수 있게 해줍니다.

 

-      Mixins 폴더는 넉스트 $fetch 메소드를 필요로하는 파일들이 있습니다.

 

-      Views 폴더는 앱 템플릿과 서버 에러 페이지를 포함합니다.

 

-      App.js는 메인 앱 파일입니다.

 

-      Client.js 파일은 클라이언트 쪽에서 일어나는 모든것들을 필요로하는 클라이언트 파일입니다.

 

-      Empty 파일은 의도적으로 아무기능도 하지 않는 aliases를 위해 비워둡니다.

 

-      Index.js 파일은 앱을 부트스트랩합니다.

 

-      Loading.html 파일은 페이지가 로딩중일 때 사용됩니다.

 

-      Middleware 파일은 미들웨어를 저장하는 곳 입니다.

 

-      Server.js는 서버에서 돌아가는 코드들 입니다.

 

-      Utilities는 넉스트가 작동하기 위해 필요한 유틸리티들을 포함합니다.