Nuxt JS 라우팅, 페이지간 이동 하기 튜토리얼

NUXT의 자동 라우팅

대부분의 웹 페이지는 여러 페이지로 구성 될 것이다. 그때 필요한게 Routing인데
기존 Vue.js의 라우팅(A.K.A vue-router)은 구조적으로 불편했다. 개발자가 수동으로 구조를 config에 입력하는 방식이기때문에, 개발이 진행되고 프로젝트 규모가 커질 수록 유지보수가 불편했다. 예를들어서 아래 사진과 같은 느낌이다. 링크 하나를 변경 하려면 서너군데는 손을 봐야 한다. 귀차니즘이 폭발한다.

NUXT는 이 작업을 개발자가 직접 할 필요가 없이, 프레임워크가 폴더구조를 기반으로 자동생성 해준다. 생산성이 대폭 향상 되었다. 개발자가 할일은 pages 폴더에 .vue파일로 코드를 작성하기만 하면 된다.

네비게이션 하는법 (페이지간 이동 하기)

NuxtLink컴포넌트를 이용 하면 페이지 링크를 간편하게 생성 할 수 있다. 잡다한 모듈을 임포트 할 필요가 없으며 <a>태그와 유사한 동작을 기대 할 수 있다. 기존 vue.js프레임워크의 <RouterLink>를 완전하게 대체 할 수 있는 컴포넌트 이다.

새로운 프로젝트를 만들기는 귀찮으니
지난포스트에서 만들었던 헬로월드에 샘플코드를 작성 해보자.

yarn dev 커맨드를 이용해 디버그 서버를 실행 하고 https://localhost:3000 을 브라우저로 열면 된다. (기억이 안난다면 지난포스트를 참고)

오늘의 과제인 라우팅에 집중 하기 위해서 잡다한 그림과 장식은 삭제 하도록 한다.

소스코드

<template>
  <div class="relative flex items-top justify-center min-h-screen bg-gray-100 sm:items-center sm:pt-0">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1.2/dist/tailwind.min.css" rel="stylesheet">
    <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
      <div class="mt-8 bg-white overflow-hidden shadow sm:rounded-lg p-6">
        <h2 class="text-2xl leading-7 font-semibold">
          당신의 첫번째 Nuxt 어플리케이션을 만든것을 축하합니다!
        </h2>
        <p class="mt-3 text-gray-600">
          NUXT 기초 강의는 <a href="https://velog.io/@nuxt/Nuxt-JS-%EC%84%A4%EC%B9%98" target="_blank" class="text-green-500 hover:underline">Nuxt 튜토리얼</a>을 참고 해주세요!<br>
        </p>
        <p class="mt-4 pt-4 text-gray-800 border-t border-dashed">
          Hello World!
        </p>
      </div>
    </div>
  </div>
</template>

렌더링 결과

훨씬 보기 쉽다.

이제 본격적으로 헬로월드 텍스트 아래에 아래 코드를 추가 해준다.
간략히 설명을 덧붙이자면, nuxt-link 컴포넌트에 to attribute의 value에 원하는 이동 경로를 전달 해주면 된다. 경로는 pages 디렉토리 내의 파일명으로 생각 하면 된다. 파일명은 자유롭게 정하면 된다. 여기서는 자기소개의 의미로 introduction로 진행 해보겠다.

<nuxt-link to="/introduction">자기소개 보기</nuxt-link>

그리고 프로젝트경로의 pages 폴더 내에 introduction.vue 파일을 생성 해주자.

빈 파일이 생성 된다.

빈 템플릿을 하나 작성 한다.

<template>
  <div>자기소개 페이지 입니다.</div>
</template>

<script>
export default {
  name: 'introduction'
}
</script>

결과물

링크 클릭시

디자인은 밋밋하기 그지 없으나 기능은 완벽하다.

텍스트 아래에 홈으로 돌아가기 링크도 하나 추가 해주자.
요령은 위에서 했던 것과 동일 하다.

<nuxt-link to="/">홈으로 돌아가기</nuxt-link>

결과물

링크 클릭시 문제 없이 홈으로 이동 되는 것을 확인 할 수 있다.

다음 포스팅에서는 NUXTJS의 디렉토리 구조에 대해서 살펴보도록 한다.