3. 페이지와 경로(Routing)

Nuxt 는 '파일시스템 기반 라우팅'을 제공한다. 간단하게 정리하면 디렉터리 및 파일 명으로 라우팅을 제공한다는 의미이다. 자세한 내용은 이 곳을 참조 하고 이번 시간에는 실습에 집중하자.

새로운 페이지 생성

프로젝트 디렉터리에서 하위 디렉터리로 pages 디렉터리를 생성한다. 이 후 pages 디렉터리에 events.vue 파일을 생성하고 아래와 같이 내용을 채운다.

/pages/events.vue

<template>
  <div>events page</div>
</template>

파일시스템 라우팅이라는 말에서 직관적으로 해당페이지가 바로 디스플레이 될 것이라고 유추 할 수 있다.

http://localhost:3000/events 를 호출해보자. app.vue 를 호출한 http://localhost:3000 의 내용과 동일할 것이다. 의도한 바와 다르다. 아래 내용을 계속 살펴보자.

NuxtLayout

내장컴포넌트인 NuxtLayout 을 사용하여 경로를 생성해보자 NuxtLayout 의 자세한 내용은 이 곳을 참조하자.

app.vue 의 내용을 아래와 같이 고치자.

app.vue

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

아래와 같이 페이지가 정상적으로 호출 될 것이다.

대신 기존 app.vue 의 내용을 확인해보기 위해 http://localhost:3000 을 호출하면 404 에러가 발생한다.

우리가 의도한 대로 파일시스템 기반 라우팅을 이용하기 위해서는 pages 디렉토리를 기준으로 파일들이 계층화 되어야 한다. pages 디렉토리가 루트 경로가 되므로 슬래시로 구분되는 경로에 해당되는 url 의 페이지를 보이려면 해당 디렉터리에 index.vue 파일이 있어야 한다. 아래와 같이 기존 app.vue의 내용을 index.vue 파일로 옮기자.

/pages/index.vue

<template>
  <div class="text-3xl font-bold underline">
    Welcome to Nuxt3
  </div>
</template>

아래와 같이 정상적으로 표시될 것이다.

디렉토리 계층 구조

위 내용에서 root URL 이 생성되는 구조를 보면 events.vue 파일도 디렉터리 구조로 변경할 수 있음을 알 수있다.. pages 디렉터리에 events 디렉터리를 만들고 events 디렉터리에 index.vue 파일을 만들어 event.vue 파일의 내용을 그대로 옮기자. 디렉터리 구조는 아래와 같다.

아래 처럼 http://localhost:3000/events 를 호출하면 기존과 동일하게 호출 됨을 알 수 있다.

동적 라우팅

파라미터를 기반으로 하는 동적 라우팅에 대해 알아보자, URL 경로는 동적일 때가 많다. 보통 List - Item 구조를 URL 로 표현할 때 개별 Item 은 ID 로 구분되는 경우가 많다. 예을 들면 ~/books/1, ~/members/ironman 과 같은 식이다. 이런 방식의 동적URL 은 동적경로(흔히 파라미터를 대괄호로 감싸는 형태로 만든다. /pages/event 디렉토리에 [id].vue 파일을 만들자.

/pages/events/[id].vue

<template>
  <div>
    event id: {{$route.params.id}}
  </div>
</template>

http://localhost:3000/events/1234 를 호출해 보자. 아래와 같이 보일 것이다. 동적 라우팅 페이지를 추가하면 HMR 이 작동되지 않는 경우가 있다. 이럴 경우 서버를 다시 기동해야 한다.

/1234 부분을 다른 문자열로 바꾸면서 테스트 해보자.

동적 라우팅의 경로는 통상 파라미터로 쓰이는 경우가 많으며, 이런 경우에는 데이터베이스에 던지는 질의 값의 일부일 경우가 많기 때문에 통상은 <script> 블록에서 처리되어야 하는 경우가 많다. script 블록에서 쓰일때는 useRoute 컴포저블을 이용한다. [id].vue 파일의 내용을 아래와 같이 바꾸자.

<script setup lang="ts">
const route = useRoute();
console.log(route.params);
</script>
<template>
  <div>
    event id: {{$route.params.id}}
  </div>
</template>

다시 호출하면 서버 터미널과 브라우저 디버거에서 console 출력을 확인할 수 있을 것이다.

서버 터미넡

브라우저 콘솔

왜 두번 출력되는지는 나중에 설명하고, 일단은 의도된 대로 동작하는 것 같다. 스크립트 블록에서 ID 값을 받아서 데이터베이스 질의를 만드는 것도 가능해졌다. Nuxt 는 내장 컴포넌트, 컴포저블, 컴포넌트 및 기본 디렉토리의 자원들을 자동으로 임포트 한다. 위 예에서도 별다른 import 선언없이 useRoute 를 사용했다. 자동 임포트와 관련된 내용은 이 곳 의 Concep 1. Auto-imports 를 참조한다.

useNuxtApp

참고로 라우트 경로 뿐만 아니라, Nux App 의 전체의 현재 컨텍스트 상태를 참고해야 될 때가 많다. 이럴 때는 useNuxtApp 을 사용하면 된다. [id].vue 의 소스를 아래와 같이 수정하자.

<script setup lang="ts">
const nuxt = useNuxtApp();
console.log(nuxt);
</script>
<template>
  <div>
    event id: {{$route.params.id}}
  </div>
</template>

브라우저 콘솔을 확인하면 아래와 같이 보일 것이다. Nuxt App 의 전체 컨텍스트 정보를 담고 있기 때문에 useRoute 컴포저블을 사용해 가져온 라우트 관련 정보도 확인할 수 있다.

네비게이션

통상 어플리케이션을 만들때, 각 대표 페이지들에 대한 네비게이션을 생성할 때가 많다. 예을 들어 어플리케이션 상단의 메뉴와 웹사이트의 페이지 맵 구성이 대표적이다. 내장 컴포넌트 <NuxtLink> 를 이용해 어플리케이션 상단에 메뉴를 생성해보자. 이를 위해 app.vue 의 내용을 아래와 같이 바꾸자.

app.vue

<template>
  <div>
    <NuxtLayout>
      <header>
        <ul>
          <li>
            <NuxtLink to="/">Home</NuxtLink>
          </li>
          <li>
            <NuxtLink to="/events">Events</NuxtLink>
          </li>
        </ul>
      </header>
      <NuxtPage class="bg-yellow-100"/>
    </NuxtLayout>
  </div>
</template>
<script setup lang="ts">
</script>

http://localhost:3000 을 호출하면 아래와 같은 화면을 확인할 수 있다. 디자인은 조악하지만 흔히 모바일 화면에서 좌측 상단에 위치하는 햄버거 메뉴를 생각할 수 있다.

별도의 임포트 과정과 복잡한 스크립트 과정없이 파일시스템 기반으로 경로를 정의하는 법을 배웠다. 특정 경로는 인증/인가 과정이 필요할 수도 있다. 예를 들면 인가된 회원들에게만 제공되는 특정 페이지 및 기능을 생각할 수 있다. 경로가 바뀌는 과정에 개입하여 유효성을 체크할 수가 있는데, 이는 경로(라우트) 미들웨어에서 처리한다.