Nuxt 의 레이아웃 layouts

화면을 구성할때 반드시 잡아놓는것... 바로 레이아웃이다.
흔히들 말하는 GNB, LNB, 컨텐츠 등등... 아무튼 화면개발 하게되면 이건 무조건 잡고 가는거다

Nuxt 에서는 간편하게도 layouts 라는 디렉토리를 통해 화면별 사용할 레이아웃들을 만들어 둘 수가 있다.
레이아웃은 크게 3가지 종류가 있다고 내가 맘대로 정했다

1. default 레이아웃

말그대로 모든 화면에 적용되는 default 레이아웃이다. 파일명을 default.vue 로 만들면 그것이 디폴트 레이아웃이 된다.

<template>
  <div>
    <Header />
    <Nuxt />
    <Footer />
  </div>
</template>

예시로 든 Header 와 Footer 는 실제로 만들어둔 컴포넌트이며, Nuxt 컴포넌트에서 화면 routing 이 일어난다.
즉 화면의 상단과 하단에 공통적으로 항상 출력되는 컴포넌트가 있을 때, default.vue 에 해당 내용을 구현하면 된다.
디폴트 레이아웃은 말그대로 디폴트라서 page 컴포넌트에 임의로 레이아웃을 명시할 필요 없이 자동으로 적용된다.

2. 임의의 이름을 갖는 레이아웃

모든 화면이 똑같은 레이아웃을 가지고 있다면 좋겠지만...
디폴트 레이아웃이 적용되면 안되는 화면들이 있을 때는 임의의 레이아웃을 만들어 주면 된다.

<template>
  <div>
    <Header />
    <Nuxt />
  </div>
</template>

뭐 간단한 예시긴 하다. 디폴트 레이아웃이 사용하고 있는 Footer 가 필요 없는 화면이라면 디폴트 레이아웃 외에
추가로 레이아웃 컴포넌트를 만들어 주면 된다. 대신 디폴트 레이아웃과는 다르게 page 단에서 레이아웃명을 명시해 주어야 한다.

export default {
  layout: 'CustomLayout',
  ...
}

만약 레이아웃 이름이 CustomLayout.vue 라고 한다면 해당 레이아웃을 사용하는 page 컴포넌트에는 위와같이 명시하면 된다.

3. error 레이아웃

기존 vue 만 사용한 프로젝트에서는 에러가 나서 임의의 에러 페이지로 화면을 routing 할때는
실제로 에러가 catch 된 상황에서 에러 페이지로 직접 화면을 라우트처리 해주었는데
nuxt 에는 error 상황에서 보여지게 될 레이아웃을 정해둘 수가 있다.

재밌는 것이, nuxt context 에서 제공하는 error() 메소드를 호출하면 해당 error 레이아웃이 그려지기 때문에
props 로 error 를 받게 되어있다.

<template>
  <component :is="errorPage" :error="error" />
</template>

export default {
  // error 레이아웃에서도 기존의 레이아웃을 유지하고 싶다면, 아래와 같이 레이아웃을 명시할 수도 있다
  layout: 'default',
  props: {
    error: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    errorPage () {
      // statusCode 별로 별개의 화면이 있다면, 원하는 컴포넌트를 보여줄 수가 있다.
      return this.error.statusCode === 404 ? error404 : error500
    }
  }
}

물론 저절로 모든 에러에 대해서 error 레이아웃으로 화면이 그려지는 것은 아니고
에러 핸들링을 하는 위치에서 직접 nuxt context 내의 error() 메소드를 호출해 주어야 한다.

// asyncData 와 같이 this 에 접근할 수 없는 경우
async asyncData ({ error }) {
  try {
    const result = await someRequest()
    return result
  } catch (err) {
    return error({ statusCode: 500, message: 'Error!!!' })
  }
}

// this 에 접근이 되는 경우
this.$nuxt.error({ statusCode: 404, message: 'Error!!!' })

마무리하며...
요정도로 위의 3가지 사용법만 알아도 레이아웃을 잡을 때 유용하게 쓸 수 있을 것이다.