#3. [Node.js] 웹 어플리케이션 개발 - 레이아웃

1. 레이아웃 설정

  Nuxt.js를 통해 기본 레이아웃을 설정해보자. 앞서 웹앱을 설치하는 이유를 Navigation Bar와 같이 모든 페이지에서 공통적으로 쓰이는 요소의 개발을 위해 사용한다고 안내했다. 이제 설치는 완료가 되었으므로 실제로 구현을 해야한다. 그러기 위해서 사용하는 것이 바로 레이아웃 설정이다. 

  Nuxt.js 공식 홈페이지를 살펴보면 다음과 같은 경우에 레이아웃을 사용하라고 안내가 되어 있다.

  - 사이드바를 포함할 지 또는 모바일 및 데스크톱을 위한 개별 레이아웃을 포함할지 여부와 같은 Nuxt.js 앱의 모양과 느낌을 바꾸고 싶을 때 레이아웃을 사용한다.

  레이아웃에 대한 기본 설정은 레이아웃 디렉토리 안에 있는 default.vue에서 생성한다. 

경로 : Layout > default.vue

<template>
  <div>
    <top-header/>
    <main id="main" role="main">
      <nuxt/>
    </main>
    <bottom-footer/>
  </div>
</template>
 
<script>
import TopHeader from '~/components/TopHeader.vue'
import BottomFooter from '~/components/BottomFooter.vue'
 
export default {
  components: {
    TopHeader,
    BottomFooter
  }
}
</script>
 
<style lang="scss">
@import '../assets/scss/style.scss';
</style>

  이제 각각 부분을 분석해보자.

1) Template 태그

  Template 태그의 기본 구조는 앞서 배운대로 다음과 같다.

<template>
  <nuxt/>
</template>

• Template 태그 : Layout에 대한 기본 구조가 들어가게 되는 부분
• nuxt 태그 : 페이지 component를 포함할 수 있도록 반드시 선언 되어야 한다. 

  Template 태그안에 header와 footer를 정의한다. 반드시 아래의 이름을 따라서 만들 필요는 없다.

• top-header : 모든 페이지의 최상단에 노출 시킬 내용 (<top-header/>)

• bottom-footer : 모든 페이지의 최하단에 노출 시킬 내용 (<bottom-footer/>)

  template 안에 실제로 코딩을 개발해도 되지만 그렇게 되는 경우 default.vue 파일 자체가 너무 길어지게 되므로 별도의 component 파일을 만들어 관리 해보도록 하자. 선언 방법은 하단에 있다.

• Main tag : 문서에 단 한번만 나와 페이지의 내용을 입력한다. (nav, section, header 등과 같은 요소와 동일하게 사용할 수 없다.)

  위 내용을 종합하게 된다면 아래와 같은 Template 태그가 완성된다. 

<template>
  <div>
    <top-header/>
    <main id="main" role="main">
      <nuxt/>
    </main>
    <bottom-footer/>
  </div>
</template>

2) Script

  해당 부분은 두부분으로 나누어져 있는데, 레이아웃에서 사용할 컴포넌트에 대한 정의와 해당 정의가 담긴 경로를 명시해 import 하는 부분으로 나뉜다.

  우선 컴포넌트에 대한 정의를 하자. 컴포넌트의 이름은 각각 다음으로 지정했다.

• TopHeader Componets : top-header 태그에 대한 정의가 담긴 컴포넌트
• BottomFooter Componets : Bottom-Footer 태그에 대한 정의가 담긴 컴포넌트

export default {
  components: {
    TopHeader,
    BottomFooter
  }
}

 

  그리고 두 컴포넌트의 경로를 명시하여 default.vue에 import 해주자.

• TopHeader Componets 경로 : ~/components/TopHeader.vue 
• BottomFooter Componets 경로 : ~/components/BottomFooter.vue

import TopHeader from '~/components/TopHeader.vue'
import BottomFooter from '~/components/BottomFooter.vue'

3) Style 태그

  앞서 assets에 추가했던 구글 기본 폰트를 사용하기 위해서 스타일 태그에 불러오기를 한다. 이 부분 역시 미리 정의된 style.scss 를 불러오기 위한 경로만 설정해준다.

<style lang="scss">
@import '../assets/scss/style.scss';
</style>

  이렇게 기본 레이아웃에 대한 정의가 끝났다. 이 코드를 실행한다면 TopHeader.vue와 BottomFooter.vue가 존재하지 않아 오류가 발생할 것이다. 이제 저 두 파일을 정의하자.

2. Header / Footer 정의

  Header의 주요 기능은 사이트에 따라서 조금씩 다르겠지만 거의 대부분의 사이트는 Navigation 용도로 사용된다. HTML에서는 이러한 점을 파악했고, HTML5에 이러한 기능을 조금 더 수월하게 진행할 수 있도록 Navigation 관련 태그를 새로 만들었다.

  

(출처 : https://www.w3schools.com/html/html5_semantic_elements.asp)

  위의 구조가 기본적으로 웹 사이트를 볼 때 많이 사용하게 되는 구조다. 이제 앞서 만들었던 두개의 파일 'TopHeader.vue'와 'BottomFooter.vue' 파일을 만들자. 우선 우리가 원하는 구조는 다음과 같다. 

  이 구조를 만들기 전에 우선 파일을 만들어 제대로 사이트에 로딩이 되는지 확인해보자.

  이번 Nuxt.js에서는 편리한 개발을 위해서 Visual Composer로 Storyblok을 사용할 예정이다. 해당 사이트에서 기본 Header와 Footer를 제공해주고 있다. Visual Composer가 무엇인지는 다음 시간에 더욱 자세히 설명을 하도록 하자.

 이 사이트에 있는 튜토리얼을 이용해 기본 Header와 Footer를 가져온다. 코드는 다음과 같다.

<TopHeader.vue>

<template>
  <header class="top-header util__flex util__container">
    <nav class="top-header__col">
      <ul class="nav">
        <li>
          <nuxt-link class="nav__item" to="/">Home</nuxt-link>
        </li>
        <li>
          <nuxt-link class="nav__item" to="/en/blog">Blog</nuxt-link>
        </li>
      </ul>
    </nav>
    <a href="/" class="top-header__col top-header__logo">
      <img src="http://a.storyblok.com/f/42016/1096x313/0353bf6654/logo2.png">
    </a>
    <nav class="top-header__col top-header__second-navi">
      <ul class="nav">
        <li>
          <nuxt-link class="nav__item" to="/en/blog">English</nuxt-link>
        </li>
        <li>
          <nuxt-link class="nav__item" to="/de/blog">German</nuxt-link>
        </li>
      </ul>
    </nav>
  </header>
</template>
 
<style lang="scss">
  .top-header {
    justify-content: space-between;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .top-header__logo {
    text-align: center;
    position: absolute;
    left: 50%;

    img {
      position: relative;
      max-height: 60px;
      left: -50%;
      top: -15px;
    }
  }

  .top-header__second-navi {
    text-align: right;
  }
</style>

<BottomFooter.vue>

<template>
  <footer class="bottom-footer">
    <div class="util__container">
      <nuxt-link class="bottom-footer__link" to="/en/sitemap">Sitemap</nuxt-link>
    </div>
  </footer>
</template>
 
<style lang="scss">
.bottom-footer {
  background: #e3f2ed;
  padding: 40px 0 120px 0;
  text-align: center;
}

.bottom-footer__link {
  color: #8ba19a;
  text-decoration: none;
}
</style>

(출처: https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial#build-a-skeleton)

  그 다음 메인 페이지에서 로딩한 프로젝트가 무엇인지 인지하기 위해 간단한 설명을 추가시켜준다.

<index.vue 의 template 태그>

<template>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">
        nba-stats
      </h1>
      <h2 class="subtitle">
        nba stats information site
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green"
        >
          Documentation
        </a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
        >
          GitHub
        </a>
      </div>
    </div>
  </div>
</template>

  그 다음 사이트를 로딩하면 다음과 같이 만들어 지는 것을 확인할 수 있다.