티스토리 뷰

일단 사이트나 어플리케이션의 UI 파트를 개발할 때 몇가지 필수요소가 있는데 그 종류를 이야기하면

  1. 페이지 이동(Router)
  2. 페이지 권한(Authenticate) 및 로그인
  3. 미들웨어 - 모든 페이지에 공통적용할 수 있는 싱글턴 객체
  4. Restful API 연동

이 네가지만 해결이 되면 UI 개발에 가장 중요한 요소들은 얼추 해결이 된다고 보면 된다.(순전히 내 생각일 뿐이고 다른 의견있으면 댓글로 전달 바람) 물론 세부적인 내용들은 조금 더 추가를 해야할지는 모르겠지만 대충 저정도만 먼저 알면 프로젝트를 시작하는데 큰 이슈가 없다고 생각하면 되겠다.


오늘은 저 중에서 첫번째 내용중 기본 라우트에 대해서 이야기 해보려고 한다.


Vue에서 사용하는 대표적인 Router는 vue-router 라는 라이브러리가 가장 흔하게 사용되는줄 알고 있는데 Nuxt.js 또한 vue-router를 이용해 라우터를 구성한다. 다만 Nuxt.js에서는 디렉토리와 파일을 생성하면 자동으로 감지하여 vue-router 설정파일을 갱신해서 생성해버린다.

그래서 첨엔 "음??" 하고 쳐다보고 "헐..."하고 감탄하게 된다.



일단 지난번 프로젝트 생성 이후부터 시작하는걸 전제로 아래의 화면처럼 프로젝트가 있다고 가정한다.



자 여기서 Ctrl + ` 를 입력하거나 "보기 > 터미널" 메뉴를 클릭해서 터미널 창을 띄운다.



터미널에서 "npm run dev" 명령을 입력한다. 그러면 막 컴파일을 실행한다.



그리고 얼마 뒤에 컴파일을 성공했다는 메시지가 나오면 이제 준비는 끝났다.



이제 기본적인 라우터를 위해 페이지를 만들건데 디렉토리중에 pages 디렉토리를 찾아서 "hello" 폴더를 만들고 index.vue 파일을 만들어보자.



이렇게 생성을 하면 갑자기 터미널에서 컴파일러가 마구 동작하는 것을 볼 수 있다.

그리고 ".nuxt" 디렉토리를 열어보면 "router.js" 파일이 있는데 이 파일을 열어서 아래쪽을 확인해보자.


이렇게 라우터 셋팅이 자동적으로 생성되어있는 것을 확인할 수 있다.(확인했으면 닫는다. 안 닫으면 nuxt 코드의 변경량이 감지되어 코드를 재생성하려는 시점에 코드가 충돌하여 권한없음으로 컴파일 오류를 발생시킨다. - 윈도우 환경의 경우)


그리고 방금 만들었던 index.vue 파일에 아래와 같이 코딩해보자.


<template>.
<div>
    <h1>Hello, World!</h1>
</div>
</template>


이렇게 코딩을 하고 저장을 한 뒤에 브라우저에 "http://localhost:3000/hello"에 접속해보자.




이렇게 페이지에 접속 할 수 있다는 것을 확인할 수 있다.


그렇다면 그 하위 페이지를 만들어보자.


hello 디렉토리 아래로 "thank.vue" 파일을 만들고 아래처럼 코딩해보자.



<template>
<div>
    <h1>I'm fine. Thank you, and you?</h1>
</div>
</template>


이렇게 간단하게 하위 페이지가 생성된 것을 확인 할 수 있다. 그렇다면 .nuxt 디렉토리에 있는 router.js 파일을 확인해볼까


그런데 thank 페이지가 hello의 children이 아닌 별도의 페이지에 속해있다는 사실을 확인할 수 있다. children에 속하도록 하려면 어떻게 해야할까?

이러한 라우팅을 "중첩 라우팅"이라고 하는데 아주 단순하게도 파일 하나와 태그하나를 추가하면 문제는 해결된다.


일단 hello 디렉토리 위에 hello.vue 파일을 만들고 아래와 같이 코딩을 하자.


<template>
    <div>
       <nuxt-child />
    </div>
</template>


이렇게 nuxt-child 태그를 추가해주고 난 뒤에 router.js 파일을 확인해보면



이렇게 자동으로 중첩 라우팅이 셋팅 된 것을 확인할 수 있다.


Nuxt.js가 라우팅 셋팅을 자동으로 처리해줌으로써 라우팅으로 골머리를 썩었던 Angular와는 다르게 너무 쉽게 풀리는 코드가 잠시 무섭기까지 했다. 왜 이렇게 간단하게 되는거지???




이제 다음 시간에는 동적 라우팅에 대해서 알아보는 시간을 갖도록 하겠다.

오늘은 이만 안녕




댓글
댓글쓰기 폼