분명 프론트엔드가 이전보다 존나 발전했는데

순 html로 로드 할때가 덜 골치 아팠던거 같아.......

keepalive쓰면 다른 컴포넌트 간 전환시 괜찮은거 아님?

아니면 page key를 route.query로 묶고 keepalive를 같이 써볼까

https://velog.io/@nikki/TIL-Nuxt

안됨?

흠 그니까

다른 컴포넌트 간에는 keepalive가 통함

예) 해당 리스트페이지를 쭉 내렸다가

about페이지 갔다가 다시 리스트페이지로 뒤로가기해서 돌아오기

그럼 됨 완벽함

데이타, state, dom, 스크롤 포지션 전부 유지됨

근데 위처럼 1개의 같은 컴포넌트 안에서는

(같은 리스트 페이지 컴포넌트 안에서 필터 조건만 바꾸는 상황, query parameter만 변함)

1. route의 query를 watch해서 변할 시 api를 다시 call 하고 data만 교체하거나

(page load 없음, unmounted, mounted 사이클 안돔)

2. 아니면 page key를 route의 query 파라메터로 지정을 해서,

query파라메터가 변할 시 다른 page로 인식해서 페이지를 reload 해야하는데

(unmounted, mounted 사이클 다시 돔)

둘다 keepalive가 적용이 안됨

몬말인지 정확히 이해가 안가는데

현재 페이지 안에서, query에 따라 리스트가 변하는데, 이전 query의 리스트 데이터를 유지하고 싶다는거임?

그러면 query별로 보여줄 list를 각각 컴포넌트화하고, 해당 컴포넌트들을 query에 따라서 보여지도록 keepalive 걸면 될거같은데

```js

<template>

...다른 태그 및 컴포넌트들

<KeepAlive>

<List1 v-if="query === 'first'" />

<List2 v-else-if="query === 'second'" />

....기타 리스트들

</KeepAlive>

</template>

<script setup>

const route = useRoute();

const query = computed(() => ...원하는 쿼리);

</script>

```

이럼 안됨?

query가 한둘세가지가 아니라

경우의수가 많음

그니까 다나와에서 컴퓨터 산다 생각하면 됨

cpu: 10세대 11세대 12세대 13세대

메모리: ddr3 ddr4 ddr5

글카: nvidia amd

그외 이런저런 필터들

이래 필터가 있자나

이걸 if문으로 할순없지

그런거면 요구사항이 너무 무리한거 같은데

정확하게 어느정도까지 저장되는걸 원하는지 명확하게 정할 필요가 있을듯

굳이 구현한다면 런타임 메모리에서 들고있기에는 너무 비대해질 수 있으니, indexedDB에다가 넣어놓고 꺼내쓰는 방안이 젤 나을거 같은데

아니면 최신 몇개의 조건만 리스트를 메모리에 넣어놓고 꺼내쓰던지