본문 바로가기
근무일지

(뒤로가기 데이터유지)상품목록페이지 유지 및 속도 개선

by Developer RyanKim 2019. 3. 13.

먼저 요청받았던 부분은 상품목록에서 상세보기로 이동한 후

뒤로가기를 하였을 때 기존 목록(검색조건 및 보고있던 상품목록 부분 등)이 유지되지 않고 

새 페이지가 로딩 되어 기존정보가 유지되도록 해달라는 것이었다.


이 문제를 해결하기 위해 3가지 방법을 고려 하였고

Session Storage를 사용하여 문제를 해결하였다.


1. javascript history-back cache 사용

- 가장 이상적인 방법이라고 생각하였으나 브라우저 별, OS별로 버그가 있고

원하는 대로 페이지가 보이지 않을 확률이 높다는 정보가 있어 보류하였다.


2. (Vue.js) component keep-alive 사용

- 현재 페이지는 Vue를 사용하고 있기 때문에 목록 부분을 component로 만들고 

그부분만 keep-alive라는 기능을 사용하여 보존하려고 하였으나 레퍼런스에 맞게 적용하였음에도

뒤로가기를 눌러 페이지로 돌아갔을 때 목록이 보존되지 않았다.

 

3. Session Storage 사용

-  상품목록페이지에서 상세페이지 진입시에는 Session Storage에 이전에 사용하였던 필터의 조건과 결과 목록을 저장해 놓고

상품목록페이지가 로딩될 때 상세페이지를 들렀었는지 구분하는 값을 Session Storage에서 꺼내 확인 후

상세페이지를 들렀던 경우라면 상품목록을 새로 받아오지않고 Session Storage에서  꺼내 목록을 세팅한다.


뒤로가기 문제를 해결한 것 뿐 만아니라


이전 버젼에서는 무조건 모든 목록을 새로 불러오기 때문에 속도가 좋지 않았는데


이번 변경으로 경우에 따라 목록을 새로 불러오지않는 부분이 추가되어 속도도 개선되었다.




댓글