[Vue.js] Hacker News - 데이터 호출과 UX

데이터 호출 시점

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

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

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

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

데이터 호출 시점 문제 해결하기

지금까지 구성한 Hacker News 시스템에서 문제점이 있다.

• 페이지 이동 시 이전 페이지 데이터가 잠깐 표시되는 현상
• 구현한 로딩바 표시 시점 오류 현상

이와 같은 문제 발생 원인은 데이터 호출 시점이 불분명하게 정의되어 있어 발생한 문제이다.

 

기본적인 호출 순서

1. src/mixins/ListMixin.js 내 this.$store.dispatch('FETCH_LIST')
2. src/store/actions.js 내 FETCH_LIST
3. src/api/index.js 내 fetchList(pageName)
4. src/store/actions.js 의 fetchList().then() 내 commit('SET_LIST')
5. src/store/mutations.js 내 SET_LIST
6. src/mixins/ListMixin.js 내 this.$store.dispatch('FETCH_LIST').then()

컴포넌트 라이프 사이클 훅

// src/store/action.js
import { fetchList } from "../api/index.js";

export default {
  FETCH_LIST({ commit }, pageName) {
    return fetchList(pageName)
      .then(({ data }) => commit("SET_LIST", data))
      .catch((error) => console.log(error));
  },
};

위 코드처럼 선언된 FETCH 함수의 처리 결과를 return 해야 비동기 처리 순서를 보장할 수 있기 때문에 원하는 동작 결과를 얻을 수 있다. return 하지 않을 경우 호출 순서 6번의 then() 함수는 의미가 없어진다.

라우터 네비게이션 가드

// src/routers/index.js
import Vue from "vue";
import VueRouter from "vue-router";

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

// HOC
import createListView from '../views/CreateListView.js';
// EventBus
import bus from "../utils/bus.js";
// Store
import { store } from "../store/index.js";

Vue.use(VueRouter);

export const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      redirect: "/news",
    },
    {
      path: "/news",
      name: "news",
      // HOC
      // component: createListView('NewsView'),
      component: NewsView,
      // beforeEnter : 특정 URL 접근 시 인증정보 유무 같은 확인할 때 많이 사용
      // to : 이동할 URL 라우터 정보
      // from : 현재 URL 라우터 정보
      // next : to에서 지정한 URL로 이동하기 위해 호출해야하는 함수
      beforeEnter: (to, from, next) => {
        bus.$emit("start:spinner");
        // router -> store 접근 시 store import 필요
        store.dispatch("FETCH_LIST", to.name)
          .then(() => {
            bus.$emit("end:spinner");
            next();
          })
          .catch((error) => {
            console.log(error);
          });
      },
    },
  ],
});

beforeEnter 속성을 이용하여 페이지 진입 전 URL 라우터 정보를 확인하여 동작한다.

스피너 종료 시점 변경하기

현재 스피너는 데이터를 받아오고 종료되도록 설정되어있는데 이렇게 되면 화면이 로딩되기 이전에 스피너가 종료된다.

따라서 스피너 종료 시점을 화면이 로딩 된 이후로 변경하려면 인스턴스가 화면에 로딩되었을 때 수행하는 라이프 스타일 훅인 mounted() 속성을 사용할 수 있다.

 

구현하기

1. src/mixins/ListMixin.js 에 mounted() 속성으로 스피너 종료 이벤트 실행

import bus from '../utils/bus.js'

export default {
  // 인스턴스가 화면에 로딩되었을 때
  mounted() {
    bus.$emit("end:spinner");
  },
};

2. src/routers/index.js 에 beforeEnter 내에 스피너 종료 이벤트 제거

beforeEnter: (to, from, next) => {
  bus.$emit("start:spinner");
  store.dispatch("FETCH_LIST", to.name)
    .then(() => {
      // src/mixins/ListMixin.js 로 이동
      // bus.$emit("end:spinner");
      next();
    })
    .catch((error) => {
      console.log(error);
    });
},