티스토리 뷰

지난 시간엔 정적 라우트와 중첩 라우트에 대해서 공부했었는데 오늘은 동적 라우팅에 대해서 알아보는 시간을 갖겠다. 우리가 깨달아야할 것은 온라인 서비스를 개발한다는 것은 일단 페이지 이동만 갖고는 전부 개발 할 수 없다는 점이다.

기능 없이 페이지만 이리저리 돌아다니기만 하면 그건 서비스를 개발하는게 아니라 그냥 목업(Mock-up) 사이트에 불과할 뿐이다. 모든 서비스는 기능이 필요하고 그 기능은 파라미터와 쿼리 문자열을 통해 페이지간 데이터를 옮기는 것에서 시작된다. 오늘 동적 라우팅에 대해서 배워보고 Nuxt.js에서 제공되는 라우팅 기능을 끝내보도록하자.


Nuxt.js 가이드 문서에 따르면 동적 라우팅을 하기위해서는 언더 스코어(_)를 붙인 폴더나 파일(.vue) 파일을 page 폴더에 생성해야한다고 나와있다.



우리도 저렇게 따라해보도록 하자.


지난 번에 만들었던 프로젝트에서 hello와 관련된 애들은 지우고 "users" 라는 디렉토리를 만들자. 그리고 "_id.vue" 파일도 만들자.



이렇게 만들면 router.js 파일에는 아래와 같이 설정이 셋팅되어있는걸 확인할 수 있다.



그러면 파라미터를 감지하기 위해서 "_id.vue" 파일에 아래와 같이 코딩을 해보도록 하자.


<template>
    <div>
        <h1>User</h1>
        <p>
            User ID : {{id}}
        </p>
    </div>
</template>
<script>
export default {
    asyncData({params}) {
        console.log( params );
        return {
            id: params.id
        };
    }, validate({params}) {
        return /^\d+$/.test(params.id);
    }
}
</script>


이렇게 코딩을 하고 localhost:3000/users/100 에 접속해보자.



파라미터 값이 전달된 것을 확인할 수 있다.

그리고 파라미터 값에 숫자가 아닌 다른 문자를 입력하게 되면 validate 메서드에 의해 파라미터 id 값을 검사하여 에러페이지로 이동하게 된다.



아, 그리고 이 파라미터 값은 비동기 데이터로 분류 되기 때문에 기존에 사용하던 "data"로는 감지를 할 수가 없고 'asyncData' 에서만 감지할 수 있다는 것도 알아두자.


그렇다면 쿼리 문자열은 어떻게 감지를 할 수 있을까?

위에서 작성했던 코드를 아래처럼 수정하자.


<template>
    <div>
        <h1>User</h1>
        <p>
            User ID : {{id}}
        </p>
        <p>
            Hello: {{hello}}
        </p>
    </div>
</template>
<script>
export default {
    asyncData({params, query}) {
        console.log( query );
        return {
            id: params.id
            , hello: query.hello
        };
    }, validate({params}) {
        return /^\d+$/.test(params.id);
    }
}
</script>


이렇게 query라는 전달자(?) 로 쿼리 문자열을 전달받을 수 있다. 이 또한 비동기 데이터이므로 asyncData에서 전달받는다. 위의 코드를 확인하러 "http://localhost:3000/users/5?hello=world" 로 접속해보자.



이렇게 패스 파라미터(Path Parameter)와 쿼리 문자열을 전달 받아 화면에 노출 시킬 수 있게 되었다.

그 다음에 알아야 할 것은 정적 라우팅에서 배웠듯 동적 중첩 라우팅에 대해서 알아볼 필요가 있다. 동적 중첩 라우팅은 쓸일이 자주있지는 않겠지만 동적 파라미터가 연속해서 필요하게되는 일도 종종 발생하니 미리 알아두고 가도 나쁘지 않다.


일단 아래와 같이 폴더와 파일을 만들어보자.



이렇게 보여주면 뭔가 알아보기 힘들것 같아서 Nuxt.js 가이드 문서에 있는 내용을 다시 한번 보여주겠다.


이러면 좀 더 보기 편하겠지.


이렇게 만들고 나면 route.js 파일은 이제 상당히 복잡한 구조가 되어있다는 것을 확인 할 수 있다.



이제 각 페이지마다 각각 코딩을 해서 결과를 확인해보자.


_category.vue

<template>
    <div>
        <h1>Category</h1>
        <p>
            Category: {{category}}
        </p>
        <nuxt-child />
    </div>
</template>
<script>
export default {
    asyncData({params}) {
        return {
            category: params.category
        };
    }
}
</script>


_category/index.vue

<template>
    <div>
        <h2>Category</h2>
    </div>
</template>
<script>
export default {
    asyncData({params}) {
        console.log( params );
    }
}
</script>


_category/_sub-category.vue

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


_category/_sub-category/index.vue

<template>
    <div>
        <h2>Sub Category</h2>
    </div>
</template>


_category/_sub-category/_id.vue

<template>
    <div>
        <h2>Sub-Category : ID</h2>
        <p>
            ID : {{id}}
        </p>
    </div>
</template>
<script>
export default {
    asyncData({params}) {
        console.log( params );
        return {
            id: params.id
        }
    }
}
</script>


위 처럼 각각의 파일들에 코드를 작성하고 난 뒤에 화면들을 확인해보면 정상적으로 파라미터들이 전달되는 것을 확인 할 수 있을거다.


예를 들어 "https://localhost:3000/10/sub-category/20" 같은 주소로 접속하면



이런 화면을 볼 수 있게 된다.


사실 중첩 라우팅이라는 것 자체가 시간을 오래두고 관찰과 이해가 필요한 부분이라 처음 봐서 생소한 분들은 천천히 이해를 해도 괜찮다. 어차피 이런 동적 중첩 라우팅이 자주 쓰이는 것도 아니고.


아무튼 여기까지 라우팅을 익혔다면 일단 Nuxt.js 에서 사용되는 라우팅에 관한건 이만하면 되었다. 이제 Vuex를 이용한 Store 라는걸 한번 공부해보자. 나도 Vue.js는 처음이라 이 Store 객체가 뭘 하는 녀석인지 조금 들여다 봐야할 것 같다.


그럼 오늘은 이만. 안녕!


댓글
댓글쓰기 폼