티스토리 뷰
1. 도큐먼트 (Document)
Nuxt는 페이지를 기반으로 작동하게 된다. 하지만, 웹 서비스의 구성상 페이지가 개별적으로 구성된다면 서비스를 개발하는데 많은 시간이 소요된다. 게다가 프로젝트의 공동 요소에 대한 로딩이 없다면 페이지 렌더링에도 많은 시간이 소요 될 것이다.
Nuxt.js는 이러한 문제점을 해결하기 위해서 프로젝트 구조에 대한 효율성을 제공한다. Nuxt View의 구조는 이러한 개념에서 출발하게 된다.
-Nuxt.js Views
Nuxt 프로젝트에서 화면 구성은 페이지에 들어가게 된다. 하지만 header나 footer 처럼 여러 페이지에 거쳐 공통으로 들어가는 요소들은 매번 렌더링 하는 작업은 매우 번거롭다. 이러한 반복적인 요소를 모아서 한번에 담을 수 있도록 제공하는 방법이 있다. 그것이 바로 Layout이다. 그리고, 레이아웃을 포함하는 문서를 만들기 위해 프로젝트에서 사용하는 HTML file에 대한 기본 양식을 만들 수 있다. 이것이 바로 도큐먼트(Document)이다.
- 도큐먼트 사용 방법
도큐먼트를 커스터마이징 하기 위해서는 app.html 파일을 생성해야한다. 프로젝트 최상위 디렉토리에 생성하면 된다. (nuxt.config.js와 동일한 레벨)
<app.html>
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html {{ HTML_ATTRS }}> <head {{ HEAD_ATTRS }}> {{ HEAD }} </head> <body {{ BODY_ATTRS }}> {{ APP }} </body> </html> | cs |
이렇게 Nuxt 프로젝트에서 사용할 기본 HTML 문서 템플릿을 만들었다.
2. 레이아웃 (Layout)
Nuxt 프로젝트에서 사용할 레이아웃은 layouts 디렉터리에 생성한다.
<default.vue>
1 2 3 4 | <template> <nuxt/> </template> | cs |
레이아웃의 기본 코드는 위와 같이 구성된다. 레이아웃을 만들기 위해서는 반드시 <nuxt> 컴포넌트가 있어야한다. 레이아웃을 호출하기 위한 컴포넌트가 이곳에 작성되기 때문이다.
- error 레이아웃
네트워크 프로젝트에서는 에러가 자주 발생한다. 사용자 입장에서 네트워크 에러가 나왔을 때 아무런 메세지가 주어지지 않는다면 서비스 사용에 혼란이 올 것이고. 서비스 이탈의 주요 원인이 된다. 따라서, 적절한 에러 메세지를 통해 사용자가 이탈하지 않도록 서비스를 구성하는 것이 중요하다.
네트워크 서비스를 사용하던 도중 존재하지 않는 페이지에 접속하게 된다면 404 에러가 나타나게 된다. URL에 사용자가 잘못 입력하거나, 서비스의 링크를 잘 못 설정하는 경우에 나타나는 에러로 아마 많은 사람들이 자주 겪은 에러일 것이다.
우리가 만드는 프로젝트에서도 404 에러 페이지를 노출시키기 위한 페이지를 만들 수 있다. vue if문을 활용하여 error.statusCode가 404로 나올 때 보여지는 페이지를 만들고, 메인 홈페이지로 이동하는 링크를 만들어 이탈을 최소화 시키는 방법이 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <template> <div class="container"> <h1 v-if="error.statusCode === 404">Page not found</h1> <h1 v-else>An error occurred</h1> <nuxt-link to="/">Home page</nuxt-link> </div> </template> <script> export default { props: ['error'], layout: 'blog' // you can set a custom layout for the error page } </script> | cs |
실행 결과는 아래와 같다. "Home page" 버튼을 누리게 된다면 index.vue 페이지로 이동하게 된다.
3. 레이아웃 예제
3-1) default.vue
NBA의 선수들과 각 팀을 소개하는 서비스를 만들고자 한다. 이를 위해서 우리는 웹 페이지에 총 3개의 디렉토리를 만들것이다. 처음 홈페이지에 접속하게 되면 Team / Player / Rank 버튼을 눌러서 각각의 디렉토리 초기 화면으로 이동할 수 있다. 그리고 어느 페이지에서든 이동이 가능하도록 레이아웃으로 설정 할 것이다.
1 2 3 4 5 6 7 8 9 | <template> <div class =" "> <nuxt-link to ="/"> Home Page </nuxt-link><br> <nuxt-link to ="/player"> 1.Player </nuxt-link><br> <nuxt-link to ="/team"> 2.Team </nuxt-link><br> <nuxt-link to ="/rank"> 3.Rank </nuxt-link><br> <nuxt /> </div> </template> | cs |
해당 레이아웃은 서비스의 모든 페이지에 노출이 될 것이다.
위 버튼을 통해 링크에 표시된 위치로 이동하게 된다.
Home Page -> index.vue로 이동
1.Player -> player.vue로 이동
2.Team -> team.vue로 이동
3.Rank -> rank.vue로 이동
3-2) 사용자 정의 레이아웃
default.vue에 선언되는 기본 레이아웃이 아닌 사용자 정의 레이아웃도 만들 수 있다.
<layout/player.vue>
1 2 3 4 5 6 7 | <template> <div class =" "> <h3> NBA Player </h3> <div> This page will show NBA Player Infomation</div> <nuxt /> </div> </template> | cs |
다음과 같은 사용자 정의 레이아웃을 만들었다. 이 레이아웃은 player 디렉터리 아래에 등록된 페이지에 해당된다.
<pages/player/main.vue>
1 2 3 | export default { layout: 'player' } | cs |
페이지 디렉토리 중 player 하위에 새로운 vue 페이지를 만든다. 그리고 선언부에 다음과 같이 레이아웃 키워드를 연결해준다. 그리고 main.vue 상단에는 웹 페이지의 내용을 구성한다. 이런 구조를 통해 만들어진 웹 페이지는 아래와 같다.
'Skill > Programming - Server & Client' 카테고리의 다른 글
| 16.[Node.js] Node.js와 서버 요청 (0) | 2020.02.29 |
|---|---|
| 15. [Nuxt.js] Component (0) | 2020.02.23 |
| 13. [Nuxt.js] Pages & API (0) | 2020.02.02 |
| 12.[Nuxt.js] 프로젝트, 설정, 라우팅 (0) | 2020.01.27 |
| 11.[Nuxt.js] 개념 및 소개 (0) | 2020.01.19 |