무한 스크롤 기능을 구현하는데 있어 반드시 병행되어야 할 기능이 있습니다. 바로 무한 스크롤로 렌더링된 상품을 누르고 다시 [뒤로가기]를 했을 시 여전히 그 상품의 위치로 와야 한다는 것입니다. Show [JavaScript] 무한 스크롤 기능 구현하기 무한 스크롤은 이커머스 관련된 웹이나 앱을 사용하면 쉽게 접할 수 있는 기능입니다. 스크롤의 위치가 어떠한 조건을 충족하게 되면 추가적으로 상품들을 불러옵니다. 그럼 어떻게 구현하는지 kingofbackend.tistory.com 만약, 이 기능이 구현되어 있지 않으면 상품을 누르고 맘에 들지 않아 [뒤로가기]를 눌렀을 때 다시 이 상품이 나왔던 곳까지 스크롤을 내려야 합니다. 오늘의 집, 아이디어스은 어떻게 되어있는 지 한번 보겠습니다. [오늘의 집]오늘의 집 같은 경우 sessionStorage를 이용한 걸 알 수 있습니다. 오늘의 집뒤로 가기 이벤트가 발생했을 경우 이를 감지하여 sessionStorage에서 값을 뿌려주는 것 같았습니다. 그래서 만약 저 값들을 지우게 된다면 상품을 보고 [뒤로가기]를 눌렀을 때 전에 위치로 돌아오지 못합니다. [아이디어스]아이디어스 같은 경우는 우선 현재 무한 스크롤의 위치를 localStorage에 저장합니다. 하지만 상품을 눌렀을 경우 새로운 페이지가 생겨나서 사실 [뒤로가기]의 의미가 없어집니다. 아무튼 LocalStorage와 SessionStorage를 이용하면 어렵지 않게 [무한 스크롤 시 상품 위치 유지](제가 이름 붙인거라 보편적인 이름은 아닙니다..) 기능을 구현할 수 있을 것 같습니다. 오늘의 집과 유사하게 기능을 구현해보겠습니다. 무한 스크롤 기능은 구현되어있다 가정하겠습니다.
* 참고 : SessionStorage에 관한 function입니다. [STEP1] 무한 스크롤을 이용해서 새로 상품을 불러 올때마다 해당 위치와 불러온 상품들을 SessionStorage에 담는다
* 참고 : totalReturnData에는 html이 담겨져 있습니다. 스크롤을 내릴시 특정 위치에 스크롤이 가게되면 ajax를 통해 상품들을 추가적으로 불러옵니다. 이후 ajax success 부분에 위 코드를 추가하여 SessionStorage에 담아줍니다. [STEP2] 상품을 클릭한다상품 디테일 이전 페이지상품 클릭 후 상품 디테일 페이지로 이동 후 SessionStorage보면 값들이 잘 담겨져 있습니다. [STEP3] 뒤로가기를 눌러 이전 페이지로 이동하면 전에 보았던 상품의 위치로 이동되어 있다상품 디테일상품 디테일 화면에서 뒤로가기를 눌러 이전 페이지로 이동합니다. 상품 디테일 이전 페이지상품 위치로 잘 온것을 확인 할 수 있습니다. [최종코드][뒤로가기]를 했을 시 돌아오는 페이지에서 "[뒤로가기]를 해서 이 페이지로 왔다" 라는 이벤트를 감지해야 합니다.
위 코드를 이용하여 [뒤로가기]의 이벤트를 감지 할 수 있습니다. 사실 여기까지만 되면 더 이상 어려울 건 없습니다. [무한 스크롤 시 상품 위치 유지] 기능에 대한 최종 코드입니다.
onPageShow 로 [뒤로가기] 이벤트를 감지한 후 콜백함수(initReturnData)를 호출하여 SessionStorage에 있는 값들을 렌더링 시켜줍니다. 이상 오늘의 집에서 영감을 얻어 [무한 스크롤 시 상품 위치 유지] 기능을 구현해봤습니다. |