router함수를 사용해 페이지 엘리베이터를 만드는 방법

이번글에서는 페이지 엘리베이터, 줄여서 PE를 만드는 방법에 대해서 설명해보자 한다. 변경사항이 즉시 웹페이지에 적용되는 Node.js 개발환경에서는 view page를 주기적으로 변경해야 할 상황이 발생한다. 예를들어 A라는 컴포넌트를 사용하는 2개의 페이지가 있다고 하자. 해당 컴포넌트는 각기 다른 위치에 배치되어있기 때문에 수시로 두 페이지를 이동해가며 시각적인 피드백을 받아야 한다.

이러한 작업이 2개 페이지에만 해당된다면 어떻게든 page next, prev정도로 사용 가능하겠지만 3개, 4개, 그 이상의 페이지에서 피드백이 필요하다면 어떨까? 매번 페이지 url를 입력해가며 이동하는건 피곤하고 비효율적인 작업일테고, 보통의 경우라면 엘리베이터 페이지를 사용할것이다.

 

/elevator 페이지이다

 

이와같이  사용중인 페이지의 링크를 a태그 리스트로 작성해 원클릭만으로 해당 페이지로 이동할 수 있는 기능을 구현해놓은 모습인데 이러한 기능을  페이지 엘리베이터(PE)라고 부른다. 그러나 이런 페이지 방식의 엘리베이터에도 단점은 있었다.

 

1. 다른페이지로 이동하기 위해서는 매번 PE 페이지로 이동해야 한다.
2. 새로운 페이지가 생성될때마다 수작업으로 이름과 링크를 추가해줘야한다.

1번 문제를 해결하기 위한 방법으로 mouse hover이벤트가 발생하면 menu dropdown을 실행하는 vuetify의 컴포넌트를 활용하기로 했다.

 

Menu Component

 

해당 버튼을 컴포넌트화시켜 사용하면 상단 메뉴에서 언제든지 원하는 페이지로 이동할 수 있으며 페이지 이동을 위한 PE 페이지 이동을 할 필요가 없어진다. 비효율적인 중간과정이 사라짐에 따라 더욱 효율적인 페이지 이동을 할 수 있게 되었다.

 

그리고 2번 문제를 해결하기 위해서 고민하던중 npm fs 패키지를 사용해서 page 디렉토리 내의 파일명을 읽어 데이터로 사용하는 방법을 사용하려고 했지만 아래와 같은 오류를 마주치게 되었다.

 

콘솔에 나온 오류

 

오류 코드의 내용으로는 

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

라는 내용이였는데 구글링을 통해 fs 패키지는 백엔드 환경에서 작동하도록 설계되었기 때문에 nuxt 개발 환경에서는 사용할 수 없다는 사실을 알게되었다. 파일 정보를 읽는 패키지중에서는 fs보다 안정성이 있고 프론트 개발 환경에서도 잘 작동하는 패키지를 찾을 수 없어 파일명 자체를 읽는 방법은 포기하고 다른 방법을 찾아보게 되었다.

 

뷰 문서를 읽어보던 중 vue router에서 지원하는 함수중 router.options라는 함수를 사용하여 라우팅 구조 정보를 불러오는 방법이 있다는것을 알게 되었다.

API Reference | Vue Router

 

route config의 정보를 가져올 수 있는 함수를 created단계에서 사용하기로 했고 아래는 그 코드이다.

export default {
  created() {
    this.$router.options.routes.forEach(route => {
      this.list.push({
        title: route.name,
        url: route.path
      })
    })
  },
  data: () => ({
    list: [] // route list here
  }),
  mounted() {
    this.list.sort(function(a, b) {
        return a.title < b.title ? -1 : a.title > b.title ? 1 : 0;
    });
  }
}

this.$router.options.routes로 가져온 오브젝트를 forEach문법으로 list객체에 삽입했고 그렇게 생성된 데이터를 mounted단계에서 this.list.sort를 사용하여 알파벳순으로 정렬했다. 그 결과로 아래와 같이 작동하는 엘리베이터를 사용할 수 있게 되었다.

 

 

 

마우스 오버 이벤트를 통해 PE를 열람할 수 있으며 원클릭으로 해당 페이지로 이동할 수 있도록 개발했다. 이런 사소하지만 효율성을 올려주는 작업을 함으로써 개발의 효율 및 속도 상승을 기대할수 있을것같다.