12 리팩토링 4 - 데이터 호출과 UX

source: categories/study/vue-beginner-lv3/vue-beginner-lv3_9-03.md

• vue training lv3

12.1 UX를 고려한 데이터 호출 시점

• created 라이프 사이클 훅 API 문서
• 네비게이션 가드 블로그 글 링크
• 네비게이션 가드 뷰 라우터 공식 문서

데이터 호출 시점

1. 컴포넌트 라이프 사이클 훅: 여태까지 사용했던 방법

• created: 컴포넌트가 생성되자마자 호출되는 로직

1. 라우터 네비게이션 가드

• 특정 URL로 접근하기 전의 동작을 정의하는 속성(함수)

위와 같이 데이터 호출 시점은 크게 2가지로 나뉩니다.

네비게이션 가드란?

네비게이션 가드(navigation guard)란 뷰 라우터로 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법을 말합니다.
예를 들어, 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할 때 사용하는 기술입니다.

위 링크 참고.

12.2 라이프 사이클 훅을 이용한 데이터 호출 방법의 문제와 비동기 처리 코드 수정

현재 문제

• 757d6ae

위 시점의 코드에서 문제점은, Ask, News, Jobs 각각의 탭을 클릭해 이동할 때마다
이전 탭메뉴의 데이터가 보였다가 업데이트되는 현상이 있다는 것이다.
이는 UX적으로 안좋은 동작이다.
이러한 현상의 원인은 이전 데이터를 담고있는 state를 업데이트 되기 전에도 렌더링해서 보여주기 때문이다.

현재는 Ask, News, Jobs 모두 state의 list값에 데이터를 담아서 렌더링한다.
그렇기 때문에 다른 탭메뉴로가면 이전 텝메뉴의 데이터가 list에 담겨있기 때문에 그거를 보여주고,
클릭된 메뉴의 데이터가 list에 담기게되면 그때 다시 렌더링되면서 화면이 바뀌는 것이다.

지금은 list라는 state로 하나의 state에만 관리를해 이런 현상이지만,
이전에 news, jobs, ask 각각의 state로 관리했을 땐,
이전에 담긴 news 데이터를 미리 렌더링해 보여주고, 다시 업뎃되면 새로 불러와진 news 데이터를 렌더링하고..

뭐 이런 식이었다.

여튼 스피너 돌아가는 상태에서 이전 데이터가 미리 렌더링되어있던건 예나 지금이나 같은 현상이다.
이를 해결해야된다.

• 프로미스 then 메소드 체이닝 return 값 신경써!

12.3 라우터 네비게이션을 이용한 데이터 호출 방법

• 네비게이션 가드 뷰 라우터 공식 문서

import NewsView from "../../views/NewsView";

const newsRouter = [
    {
        // path: url 주소
        path: '/news',
        // component: url 주소로 갔을 때 표시될 컴포넌트 ( 페이지단위라고 보면됨, 예를 들어서 MainPage 같은 페이지단위 컴포넌트 )
        name: 'news',
        component: NewsView,
        beforeEnter: (to, from, next) => {
            console.log('to', to);
            console.log('from', from);
            console.log('next', next);
            // if (to.matched === '~~') {
                // 가장 많이 쓰이는 형식. to - 즉, 이동할 URL의 라우팅 정보에 ~~가 있다면, 여기 코드 실행
            //     next();
            // }
            if (to.auth === '~~~') {
                // 아니면 to에 인증 값이 있다고 했을 때, 인증값이 있다면 next();
                next();
            } else {
                // 인증 값이 없다면
                router.replace('/login'); // redirect를 해준다. router.replace('/login')는 redirect해주는 메소드임
            }
        },
    },
]

export default newsRouter

• to: 이동할 URL의 라우팅 정보
• from: 현재 URL의 라우팅 정보
• next: beforeEnter에서 이 next 함수를 호출해줘야지만, 해당 URL, news로 이동할 수 있다. next() 함수를 호출하지않으면 해당 URL로 이동할 수 없다.

위와 같은식으로 라우터 네비게이션 가드를 활용해 정의를 해주실 수 있다.
beforeEnter라고하는 것은 특정 URL로 접근할 때, 인증정보가 있는지 없는지를 확인할 때 가장 흔하게 쓰이는 것입니다.
저희같은 경우는 beforeEnter에서 데이터 호출을 하기 위해서 beforeEnter를 쓰고 있습니다.

UX를 어떻게 가져가냐에따라 beforeEnter라는 라우터 네비게이션 가드를 사용하시던지
아니면 라이프사이클 훅에서 데이터를 호출하실건지,
그것은 정책적으로 결정하시면 됩니다.

import NewsView from "../../views/NewsView";
import bus from "../../utils/bus";
import store from "../../store";

const newsRouter = [
    {
        // path: url 주소
        path: '/news',
        // component: url 주소로 갔을 때 표시될 컴포넌트 ( 페이지단위라고 보면됨, 예를 들어서 MainPage 같은 페이지단위 컴포넌트 )
        name: 'news',
        component: NewsView,
        beforeEnter: async (to, from, next) => {
            bus.$emit('start:spinner');
            // this.$store는 인스턴스 안에서 접근 가능한 것이다.
            // store에 접근하려면 import 해와야된다.
            // this가 인스턴스를 가리켜야되는데, 여기 안에선 인스턴스를 가리키지 않는다!!!!
            // this.$store -> import해와서 그냥 store로..
            // this.$route -> 첫번째 인자 to로..
            await store.dispatch('FETCH_LIST', to.name);
            bus.$emit('end:spinner');
        }, 
    },
]

export default newsRouter

• 12.3 라우터 네비게이션을 이용한 데이터 호출 방법

12.4 [실습] 라우터 네비게이션 가드 실습 안내

이미 12.3에서 다 함.

12.5 [실습] 라우터 네비게이션 가드 실습 및 스피너 종료 시점 변경

• 12.3 라우터 네비게이션을 이용한 데이터 호출 방법 - 페이지 전환효과 디테일 수정

위 코드 기준.. 나는 강의와는 다르게 로딩 스피너 작동 잘함.
제때 꺼지고, 켜지고.

12.6 UX를 고려한 데이터 호출 시점 요약 정리 및 추가 고려 사항 안내

데이터 호출 시점

1. 라우터 네비게이션 가드

   • 특정 URL로 접근하기 전의 동작을 정의하는 속성(함수)

2. 컴포넌트 라이프 사이클 훅

   • created: 컴포넌트가 생성되자마자 호출되는 로직

번외 - 프로그래스바

Completing our Progress Bar

• Use Progress bar with EventList
• Use Progress bar with EventCreate

Prerequisite Knowledge

• Vue Router
• Vuex

현재 상황: 프로그래스바 로직을 실행하는 fetchEvent 함수가 있는 상황

import EventCard from '@/components/EventCard.vue'
import {mapState} from 'vuex'

export default {
   components: {
      EventCard,
   },
   created() {
      this.perPage = 3;

      // 프로그래스바를 created 라이프 사이클 훅에 넣어도 안되고,
      // 왜냐면 컴포넌트가 created되고 난 후 바로 실행되는 거기 때문에.
      // 그래서 프로그래스바가 그냥 시작되었다가 바로 끝나버리는거.
      this.$store.dispatch('event/fetchEvents', {
         perPage: this.perPage,
         page: this.page,
      })
   }
}

const router = new Router({
   mode: 'history',
   routes: [
      {
         path: '/',
         name: 'event-list',
         component: EventList,
         // 여기에 beforeEnter로 프로그래스바 로직을 넣으면?
         // 이것도 안됨.
         // 이건 라우터 진입 전에 실행되는 로직이라.
         // 그래서 해당 페이지로 들어가면 프로그래스바 로직인 fetchEvent가 실행안됨.
      }
      // ...
   ]
})

그럼 프로그래스바 로직을 어디에 넣어야할까?

• beforeRouteEnter(routeTo, routeFrom, next): called before component is created.
• beforeRouteUpdate(routeTo, routeFrom, next): called when the route change, but still using the same component.

우리는 beforeRouteupdate를 사용해야됩니다.

이벤트 목록에서 진행률 표시줄이 작동하도록 하기 위해 취해야하는 단계

1. 먼저 페이지당 상태로 이동해야합니다. (We need to move perPage into the State.)
2. EventList라는 컴포넌트에서 beforeRouteEnter와 beforeRouteUpdate를 사용해야합니다. Use beforeRouteEnter and beforeRouteUpdate in EventList.
3. currentPage props를 전달하기 위해서 router.js를 수정해야합니다. We need to modify the router.js to send in the currentPage as a prop.