* 넷플릭스 클론 페이지 공통 로딩 컴포넌트 만들기

- 필수 구현 사항

1. App.vue에 각 컴포넌트 마다 발생하는 API 요청을 체크해서 로딩 상태를 표시하는 AppLoading.vue 컴포넌트 생성하기 [✔]

2. 현재 접근하는 컴포넌트에서 발생하는 API 요청이 모두 완료되었는지 체크할 수 있는 로직 찾아보기

3. 방문한 적 있는 컴포넌트에는 캐시 데이터를 활용해서 다시 API 요청하지 않기 []

4. 믹스인, 플러그인, Vue-router 네비게이션 가드를 활용한 공통 로직 처리 찾아보기 []

🎉 2021.05.05

1. Apploading.vue 컴포넌트 생성 및 마크업

참고

1. Spinner 컴포넌트 사용하기
2. 16:9 비율을 가진 로딩 박스 생성하기
3. CSS 백그라운드 이미지 트랜지션
4. CSS 애니메이션
5. Vue 스타일 인라인 바인딩

🎉 2021.05.06

1. 애플리케이션 공통 로딩 상태 및 API 요청 개수를 관리하는 Common 모듈 생성

2. uuid를 활용한 request 마다 유니크한 아이디 부여

• 적용한 소스

// MainMovie.vue
async fetchMovie() {
    const uuid = this.$uuid.v4();

    this.START_REQUEST(uuid);

    await this.FETCH_MAIN_MOVIE(this.id);

    this.END_REQUEST(uuid);
},

3. request 종료 시 appLoading 상태 변경하기

• 적용한 소스

// common/actions.js
// request 시작
START_REQUEST({ commit, getters }, id) {
    commit("SET_IS_APP_LOADING", true);
    commit("PUSH_REQUEST", id);

    console.log(getters.requests);
},

// request 종료
END_REQUEST({ commit, getters }, id) {
    commit("POP_REQUEST", id);

    console.log(getters.requests);

    if (!getters.requests.length) {
        commit("SET_IS_APP_LOADING", false);
    }
},

// common/mutations.js
PUSH_REQUEST(state, id) {
    state.requests.push(id);
},

// request 배열에서 request ID 제거
POP_REQUEST(state, id) {
    state.requests = state.requests.filter((req) => req !== id);
},

// appLoading 변경
SET_IS_APP_LOADING(state, loading) {
    state.appLoading = loading;
},

• App.vue 구조

<div id="app">
    <AppLoader v-if="appLoading"></AppLoader>
    <header />
    <router-view></router-view>
    <footer>Footer</footer>
    <MovieDetailModal v-if="isDetailModal" />
</div>

참고

1. actions에서 getters 호출하기
2. 유니크한 아이디 생성하기
3. Vue uuid
4. Vuex 장바구니 예제