Nuxt.js 튜토리얼 : 네비게이션바 추가하기

Nuxt.js 튜토리얼 : 네비게이션바 (Navbar) 추가하기

레이아웃?

모든 페이지에 같은 엘레먼트를 표시 하고 싶다면 어떻게 하면 될까?

예를 들어 네비게이션바(Navbar), 사이드바(Sidebar) 같은 기본 배치 말이다.

예를 들어 네비게이션바를 추가하고싶다면 layouts에 추가 하면 되는데 심플하게
<nuxt/> 태그 위에 <nav>태그를 추가 하면 된다.

구체적인 예제

넉스트에서 모든 페이지에 같은 레이아웃을 표시 하는 방법을 구체적인 예제로 알아보자.

새 프로젝트를 생성 한다.

yarn create nuxt-app mynavbar

프로젝트 생성 헬퍼에는 모두 기본값으로 응답 하겠다.

create-nuxt-app v3.7.1
✨  Generating Nuxt.js project in mynavbar
? Project name: mynavbar
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username?
? Version control system: Git

폴더로 이동 후 서버를 돌려주자.

	cd mynavbar
	yarn dev

VSC(비주얼 스튜디오 코드)를 이용해 프로젝트를 열어 준다.

layouts/default.vue 폴더와 파일을 생성 한다.

<template>
  <v-app dark>
    1
    <nuxt />
    2
  </v-app>
</template>

<script>
export default {}
</script>

<nuxt />가 본문을 의미 한다. 앞뒤로 텍스트 1과 2를 넣어 어떻게 표시 되는지 알아보자.

pages/index.vue 파일을 아래와 같이 작성 해준다.

<template>
  <div>index입니다.</div>
</template>

<script>
export default {}
</script>

실행 결과 이다.

원하는데로 잘 되는듯 하다.
따라서 1자리에 <navbar>를 넣어보자.

...자리에 네비메뉴를 구성 하면 되겠다.

레이아웃 파일에 그대로 코드를 작성해나가는 것도 하나의 방법 이지만
커스텀 컴포넌트를 만들어서 심플함을 더하고 코드의 재사용성을 올리는 것은 훌륭한 선택이다.
그러므로 컴포넌트를 추가 해보자.

components/MyNavbar.vue 파일을 만들자. (=<MyNavbar> 로 명명한 컴포넌트를 추가하자.)

그리고 기존의 코드를 새 컴포넌트로 대체 하자.

실행 결과이다. 렌더링 결과는 동일 하지만 더 '엘레강스'한 코드가 되었다.

그리고 커스텀 컴포넌트를 확장하고 꾸미기 위해 다음 코드를 작성 하자.

<template>
  <nav class="nav">
    <div class="logo">
      <a href="#" class="logo text-lg">
        넉스트
      </a>
      <span class="subheader">넉스트를 마스터 하는 그날까지</span>
    </div>
    <ul>
      <li class="btn btn1 mx-5 px-5">버튼1</li>
      <li class="btn btn2">버튼2</li>
      <li class="btn btn3">버튼3</li>
    </ul>
  </nav>
</template>

<script>
export default {}
</script>

<style scoped>
nav {
  box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
  background-color: #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 70px;
  font-weight: ligher;
  letter-spacing: 0.5px;
}
.logo {
  box-sizing: content-box;
  padding: 0 12px;
  height: 100%;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  background-color: transparent;
}
.text-lg {
  font-size: 24px;
}
.subheader {
  color: #ccc;
}
a {
  color: var(--theme-link-color);
  text-decoration: none;
  cursor: pointer;
}

.btn {
  position: relative;
  display: inline-block;
  padding: .8em;
  color: var(--theme-button-color);
  border: 1px solid transparent;
  border-radius: 3px;
  background-color: transparent;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.15384615;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  margin: 2px;
}
.btn:hover {
  opacity: 0.7;
}

.btn1 {
  background-color: #fcc;
}
.btn2 {
  background-color: #ffc;
}
.btn3 {
  background-color: #cff;
}
</style>

스타일 때문에 다소 길지만 CSS는 원하는데로 아무렇게나 구성 해도 좋다.

작업이 완료 되면 layouts/default.vue에서 방금 만들었던 커스텀 컴포넌트를 임포트 해주자.

<script>
  import MyNavbar from '@/components/MyNavbar'
  export default {
components: {
  MyNavbar,
}
</script>

그리고 브라우저에서 결과를 확인 할 수 있다.

이로써 공통 레이아웃 구성 방법에 대해서 알아보았다.
사이드바 <Sidebar>와 풋터 <Footer>를 넣는 요령도 마찬가지이다.
이들은 다음 포스팅에서 알아보기로 한다.