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

- 필수 구현 사항

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

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

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

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

🎉 2021.05.10

TODO

• Axios cache adapter 적용하기 및 forceUpdate 옵션 사용해보기 [✔]
• 캐시가 뭔지에 대해서 공부 [x]
• 공통 로딩은 우선 보류 > 트레일러 컴포넌트부터 만들기! [x]

1. 영화 리스트, 영화 정보같은 "get" 방식의 API에 우선 캐시를 적용했다.

• 소스

// 영화 정보 API
export const fetchMovie = async (id, forceUpdate = false) => {
    const url = `/movie/${id}`;
    return await movieAxios.get(url, {
        forceUpdate,
        cache: true,
    });
};

forceUpdate: true일 경우 캐시 데이터가 있더라도 서버에 새로운 데이터를 요청한다.
API 함수에 forceUpdate를 인자로 전달해서 캐시 사용 여부를 컨트롤 하고 싶었는데, 좋은 방법을 찾아봐야 할 것같다.
performance.getEntriesByType()을 통해서 페이지가 새로고침, 뒤로가기/앞으로가기 되었는지 여부를 판단해서 forceUpdate를 true/false로 분기처리 하고 싶었지만 SPA라서 인지 한번 설정된 entryType이 변경되지 않았다.
✨ 캐시에 대해서 더 공부해볼 필요성이 있고, SPA에서 페이지 새로고침 여부를 어떻게 체크하는지 검색해보자

• 참고

1. API Cache를 사용해 SPA 페이지 사용자 경험 개선
2. 캐싱 관련 글
3. axios cache adapter 깃 허브 링크