[B_CMS] vue의 keep-alive를 사용해보자 feat. vue-router

GitHub - B-HS/B_CMS: 자작 Vue3 + Spring boot CMS

 요즘 실무로만 썩히기에는 조금 아까운.. vue로 열심히 CMS를 작성하고 있다

거의 막바지에 다 와가고 있기에 이제 슬 포스팅을 시작해보려 한다 

 

이번에는 keep-alive와 vue-router를 이용한 동적 caching을 설명해보려 한다 

 

 

keep-alive

https://vuejs.org/guide/built-ins/keep-alive.html

KeepAlive | Vue.js

사실 더 설명할 필요도 없이 vue 공식문서에 떡하니 올라와있긴 하다

 

그래도 정리를 해야 하니 가장 중요한 개념 몇 가지만 짚고 가자 

 

keep-alive의 라이프사이클

 

keep-alive는 설정 시에 페이지를 죽이는 게 아닌

그냥 잠시 비활성화시키는 것이다 

그에 대한 라이프사이클로 공식문서에서는

 

onActivated(), onDeactivated()

위의 두 가지가 작동한다고 설명하고 있다

 

 

뭐.. 여태 작업 진행하면서 이 라이프사이클에 직접 접근한 기억이 없다

조금 더 규모가 큰 프로젝트로 들어가면 갈 일이 있겠으나 지금은 기억만 해두자

 

include / exclude

keep-alive를 조금 더 간편하고 동적으로 사용하기 위해서 필요한 기능이다

이 두 param은 동적으로 설정이 가능하다 (exclude는 동적으로 안 써봤는데 사실 없어도 문제없다)

 

동적으로 설정가능한 이 기능을 활용하면 keep-alive 캐시를 지우는 것도 함수 몇 줄로 가능해진다

keep-alive의 컴포넌트를 새로고침하는 방법은 따로 포스팅을 작성할 예정이다 

 

또한 include는 해당 컴포넌트의 name을 기준으로 설정이 된다

해당 컴포넌트의 name을 어떻게 아냐고?

 

아주 간단하다 

 

당장 컴포넌트에 가서 아래의 코드를 script에 넣고 실행시켜 보자 

 

// ... template
<script setup lang="ts">
import { getCurrentInstance } from 'vue'
console.log('해당 컴포넌트의 이름 : ', getCurrentInstance()?.type.__name)
</script>

콘솔창에서 위와 같이 확인이 가능하다

 

사실 <script setup> 구문을 쓰지 않는다면 당연히 name을 지정하는 부분이 있으니 

거기서 설정해 주어도 된다(script setup은 자동으로 이름을 추론해서 넣어버린다)

 

그런데 여기서 궁금한 점이 생길 수가 있다

" 그럼 router는요..? "

 

router를 조금이라도 설정해본사람이면 무조건 알 수가 있다

이미 router를 설정할 때는 name을 설정할 수가 있다..

 

이거 기준으로 name을 include에 작성하면 된다

 

예를 들어서 com1, com2라는 이름을 가진 컴포넌트가 있다면 아래와 같이 작성한다 

 

<keep-alive :include=['com1', 'com2']>

혹은

<keep-alive include="com1, com2">

 

그럼 두 페이지가 캐싱되는 것을 확인할 수가 있다 

 

 

vue-router와 keep-alive

그럼 이 두 가지를 조합해 보자 

 

vue router에서도 친절하게 템플릿을 작성해 준다 

https://router.vuejs.org/guide/migration/#-router-view-keep-alive-and-transition-

Vue Router | The official Router for Vue.js

 

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

 

이러면 router와 연계하여 설정이 가능해진다 

 

 

 

간단한 keep-alive의 설명이 끝났다

 

동적으로 keep-alive 설정하는 것과

keep-alive 설정이 된 특정 페이지를 새로고침 하는 방법

 

이 두가지는 추후 따로 포스팅을 마련해보겠다