[Nuxt.js] 공식 문서 번역하기(Concepts)

Views

Views 부분은 데이터 설정과 넉스트 앱의 특정한 라우트의 뷰의 모든것을 설명합니다. 뷰는 앱 템플릿, 레이아웃 그리고 실제 페이지에 있습니다. 또한, SEO에 중요한 각각 뷰의 헤드 섹션에 들어가는 메타 태그를 정의할 수 있습니다!

 

Pages

모든 페이지 컴포넌트는 뷰 컴포넌트지만, 넉스트는 최대한 앱을 쉽게 만들도록 하기 위해 특별한 속성과 함수들을 추가합니다.

 

Layouts

레이아웃은 말 그대로 레이아웃.

Default layout

Default.vue 파일에 디폴트 레이아웃을 정의해둡니다. 이곳에 정의 된 레이아웃은 모든 페이지에 적용됩니다(특정한 레이아웃이 적용되지 않은)! 이 디폴트 레이아웃에 <Nuxt />를 추가하면 마치 slot처럼 이 부분에 페이지 컴포넌트를 렌더링 합니다.

 

Custom layout

.vue파일을 포함하는 것으로 커스텀 레이아웃을 정의할 수 있습니다. 마찬가지로 <Nuxt />를 추가해야 커스텀 레이아웃으로서 이용 가능합니다. 컴포넌트 내부에 layout: ‘something’과 같은 정의를 해 두지 않는다면, 해당 컴포넌트의 레이아웃은 디폴트 값이 적용 됩니다!

 

Error page

에러 페이지는 에러가 발생했을 때 항상 나타나지만 서버사이드렌더링 중에는 나타나지 않아요! 또한 이 파일이 layouts폴더에 있더라도, 페이지 자체로 간주됩니다. 그렇기 때문에 <Nuxt />를 추가하면 안됩니다. 그러므로 그냥 다른 컴포넌트 페이지들 처럼 작성하면 됩니다.

 

Document: App.html

App 템플릿은 넉스트 앱에 헤드와 바디에 변수처럼 콘텐츠를 주입할 수 있게 실제 html 프레임을 만드는데 사용됩니다. 이 파일은 수정할 일이 거의 없고 자동으로 생성됩니다.

물론 app.html에도 js나 css 파일을 넣을 수 있지만 nuxt.config.js를 사용하길 권장합니다.