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

- 필수 구현 사항

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

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

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

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

2021.05.09

🎉 TODO

• 공통 로딩 컴포넌트를 만든다. [✔]

• 페이지를 방문한 경우, 캐시를 사용하는 페이지면 캐시된 페이지에 현재 페이지를 등록한다.

• 캐시된 데이터가 있고, 캐시를 사용하는 페이지일 경우 캐시된 데이터를 불러온다.

🎉 1. Axios의 캐시 활용과 API 캐시 사용

0. 캐시란?

1. disk cache란?

• 참고: 메모리 캐시 vs 디스크 캐시

2. Axios 어댑터로 캐시 사용하기

2.1 Axios 옵션에 headers: { "Cache-Control": "no-cache" }를 적용한 경우 request headers의 차이

• 사진 참고
  

2.2 Axios 옵션에 headers: { "Cache-Control": "no-cache" }를 적용하지 않은 경우 request headers의 차이

• 사진 참고
  

2.2 Axios 옵션에 adapter: cacheAdapterEnhancer(axios.defaults.adapter) 적용

기본적으로 모든 API 요청에 캐시를 적용한다. 같은 API 요청이 발생할 경우 네트워크 요청을 하지않고, 캐시된 데이터를 가져온다.
좋은 방법: 링크를 직접 클릭하거나 새로고침하는 상황에서는 데이터를 새로 받아오도록 하고, 뒤로 가기 또는 앞으로 가기를 통해 페이지에 왔을때 캐싱된 데이터를 사용한다.

2.3 Axios 캐시 사용 적용하기

• Axios instance

const instance = axios.create({
    baseURL: process.env.VUE_APP_TMDB_END_POINT,
    headers: { "Cache-Control": "no-cache" },
    params: {
        api_key: process.env.VUE_APP_TMDB_API_KEY,
    },

    //1.
    adapter: cacheAdapterEnhancer(axios.defaults.adapter, {
        enabledByDefault: false,
    }),
});

• API 소스

// 영화 리스트
export const fetchMovies = async (category, page) => {
    page || (page = 1);
    const url = `/movie/${category}?page=${page}`;
    return await movieAxios.get(url, {
        // 2.
        forceUpdate: //
        // 3.
        cache: true,
    });
};

캐시를 사용하면 유용할 것 같은 영화 리스트를 가져오는 API에 캐시를 적용했다.

1. axios 인스턴스를 생성할 때 enabledByDefault: false 옵션을 적용해서 기본적으로 캐시를 사용하지 않도록 설정한다.
2. forceUpdate: true일 경우 캐시된 데이터를 사용하지 않고 새로운 데이터를 요청한다. 따라서 이 부분에서 페이지가 새로고침, 뒤로/앞으로 가기인지를 판단해서 true/false옵션을 적용해줘야 한다.
3. cache: true를 적용해서 캐시를 사용하도록 설정

• 참고

1. API Cache를 사용해 SPA 페이지 사용자 경험 개선
2. Axios API Cache 활용하기