13. [Nuxt.js] Pages & API

1. Nuxt.js Pages

  Nuxt.js 프로젝트를 생성한 뒤 웹 어플리케이션을 만드는 방법에 대해 알아보자. Nuxt.js 프로젝트를 구성하기 위해서는 Package.json 파일과 Pages 디렉터리 안에 페이지를 추가해서 구성 가능하다. 

<Package.json>

{
  "name": "test1",
  "version": "1.0.0",
  "description": "My delightful Nuxt.js project",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "nuxt": "^2.0.0"
  },
  "devDependencies": {}
}

Package.json에는 프로젝트에 필요한 기본 정보와 플러그인에 들어갈 기본 정의가 들어간다. 

- Scripts

  프로젝트를 실행하는 스크립트가 들어간다. dev라는 명령어를 통해서 프로젝트 시작을 실시할수 있다.

• npm 사용 시 : npm run dev
• yarn 사용 시 : yarn dev 

- dependencies

  플러그인에서 설치한 모듈이 추가된다.

<Pages>

  nuxt.js 프로젝트 개발 시 기본 페이지는 index.vue에 작성된다. 앞서 설명한대로 프로젝트 생성 시 기본적으로 제공되는 튜토리얼이 존재한다. 페이지 디렉터리 안에 신규로 간단한 페이지를 만들어 보자.

1.vue

<template>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">
        Hello world
      </h1>
      </div>
    </div>
  </div>
</template>

  위의 간단한 코드를 작성하게 되면 아래의 홈페이지를 개발 할 수 있다.

2. pages API

  Nuxt 프로젝트의 페이지는 모두 vue 문서로 구성된다. Nuxt 프로젝트에서는 수월한 페이지 구성을 위해서 여러 형태의 메소드 제공을 제공한다.

<script>
export default {
  asyncData (context) {
    // called every time before loading the component
    return { name: 'World' }
  },
  fetch () {
    // The fetch method is used to fill the store before rendering the page
  },
  head () {
    // Set Meta Tags for this Page
  },
  // and more functionality to discover
  ...
}
</script>

  Pages API는 페이지의 Script 태그에 존재한다.

- asyncData 메소드

  서버에서 데이터를 가져와서 사용할 때 asyncData 메소드를 통해 구현할 수 있다. 매우 기본적으로 사용되는 메소드로 사용자 입장에서는 Data 메소드와 동일한 기능을 수행한다. 두 방식의 차이는 초기화시키는 데이터가 동기적으로 실행되는지, 비동기적으로 실행되는지에 대한 차이입니다.

<script>
export default {
  asyncData (context) {
    // called every time before loading the component
    return { name: 'World' }
  },
}
</script>

  asyncData 메소드는 첫번째 인자로 context를 받는다. context엔 url에 있는 params나 query를 가져온다.

- fetch 메소드

  페이지가 렌더링 되기 전에 스토어를 채우기 위해 사용한다. asyncData처럼 데이터를 가져오는 기능을 수행하지만 데이터를 초기화 하는 대상이 다르다. asyncData는 컴포넌트에서 사용하는 데이털르 초기화 하는 반면에 fetch는 데이터 스토어에 데이터를 넣기 위해 사용한다.

  fetch 메소드에 있는 데이터는 페이지를 이동하거나 서버사이드로 가기 전에 데이터를 로딩한다.

<template>
  <h1>Stars: {{ $store.state.stars }}</h1>
</template>
 
<script>
export default {
  fetch ({ store, params }) {
    return axios.get('http://my-api/stars')
      .then((res) => {
        store.commit('setStars', res.data)
      })
  }
}
</script>

  fetch 메소드는 2개의 인자를 사용한다. store는 웹 애플리케이션에서 전역으로 사용하는 데이터 저장소로 사용된다. store.commit은 데이터 저장소에 있는 특정 함수를 실행하여 필요한 데이터로 초기화를 한다.

- head 메소드

  페이지에 대한 특정 메타를 설정할 수 있다. 각 페이지에서 head 태그를 수정하는 기능을 담당한다.

<template>
  <h1>{{ title }}</h1>
</template>
 
<script>
export default {
  data () {
    return {
      title: 'Hello World!'
    }
  },
  head () {
    return {
      title: this.title,
      meta: [
        { hid: 'ID', name: 'context', content: 'discription' }
      ]
    }
  }
}
</script>

  head 메소드를 통해 각각의 페이지마다 서로 다른 페이지 내용을 만들 수 있다. 위와 같은 코드를 작성하게 된다면 웹 페이지의 제목을 'Hello World'로 작성할 수 있다.

- Layout 메소드

  Layout 메소드는 해당 페이지에서 사용할 레이아웃을 가져오는 기능을 한다. 레이아웃은 Layout 디렉터리에 반드시 저장되어 있어야 한다. 레이아웃은 속성 형태로 정의될 수 있고 메소드 형태로도 정의할 수 있다. 별도로 설정하지 않으면 default로 설정 됩니다. 

<script>
export default {
  layout: 'blog',
  // 또는
  layout (context) {
    return 'blog'
  }
}
}</script>

- middleware 메소드

  컴포넌트가 호출되기 전에 특정 코드를 실행시키는 Middleware를 지정해준다. 미들웨어는 페이지를 렌더링 하기 전에 호출된다. 미들웨어 역시 Middleware 디렉터리에 미리 파일이 저장되어 있어야 한다. 

<script>
export default {
  middleware: 'authenticated'
}
</script>

middleware./authenticated.js 

export default function ({ store, redirect }) {
  // 사용자가 인증을 하지 않은 경우.
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}

- ScrollToTop 메소드

  ScrollToTop은 페이지의 스크롤 상단/하단 여부를 결정짓는 속성이다.

<template>
  <h1>My child component</h1>
</template>
 
<script>
export default {
  scrollToTop: true
}
</script>

  ScrollToTop 속성이 false라면 하단으로, true라면 상단으로 움직인다.