AI 요약
Vue3 기반의 웹 서비스에서 사용자가 긴 스크롤 페이지를 브라우징하다가 다른 페이지로 이동한 뒤 다시 돌아오거나 화면을 새로고침할 때, 기존 스크롤바가 최상단으로 리셋되어 탐색 흐름이 끊어지는 고질적인 불편함이 존재했습니다. 본 기사에서는 복잡한 전역 상태 관리 모듈 대신, 단순한 ref 참조 객체와 브라우저 로컬 스토리지만을 조합해 이 문제를 우회하고 사용자 편의성을 높이는 초간결 해결법을 제시합니다. 원리는 단순하지만 확실합니다. 먼저 템플릿의 스크롤 컨테이너 요소를 ref 객체(scrollRef)로 지정하여 스크롤 이벤트를 실시간으로 제어할 수 있는 통로를 엽니다. 사용자가 페이지를 이탈할 때 호출되는 onBeforeRouteLeave 라우터 네비게이션 가드를 통해 안전한 수치 형태의 현재 scrollTop 값을 받아와 로컬 스토리지에 직렬화하여 임시 보관합니다. 이후 사용자가 다시 페이지에 들어와 데이터를 로드 완료한 시점에 Vue의 비동기 DOM 업데이트 API인 nextTick 콜백 안에서 저장된 높이를 불러와 스크롤 컨테이너의 상단 높이값에 재대입하는 방식으로 화면 위치를 정확하게 복원해 냅니다.
핵심 인사이트
- 가상 DOM 극복을 위한 ref 조작: Vue3의
ref객체(scrollRef)를 컨테이너 DIV 엘리먼트에 직접 바인딩하여 실제 브라우저 렌더링 트리의scrollTop프로퍼티를 동적으로 제어합니다. - 라우터 가드와의 연동: Vue Router가 제공하는
onBeforeRouteLeave생명주기 훅을 통해 사용자가 다른 URL로 이동하는 즉시 최종 스크롤 좌표를 캡처하는 타이밍을 확보합니다. - 로컬 스토리지 영속화: 데이터 유실을 막기 위해 브라우저 LocalStorage에
'project_height'(STORAGE_PROJECT_HEIGHT)라는 고유 키값을 지정해 스크롤 객체를 유지 및 관리합니다. - 비동기 렌더링 동기화: REST API 등 데이터 호출이 끝나 가상 DOM이 실제 화면에 그려진 시점을 정확히 맞추기 위해 Vue의
nextTick()유틸리티를 적용해 스크롤 복구 타이밍의 오작동을 원천 봉쇄합니다.
주요 디테일
- HTML 구조에서 스크롤을 감지하고 제어하는 주체로
<div class="content-wrapper" ref="scrollRef">요소를 활용하여 전체 레이아웃과의 스크롤 간섭을 방지합니다. - 이탈 가드 내부에서 혹시 모를 비정상 좌표 기록을 걸러내기 위해
!isNaN(currentScrollTop) && currentScrollTop >= 0검증 로직을 추가하여 유효한 숫자 데이터만 저장 장치로 보냅니다. - 로컬 스토리지에 정보를 보존할 때 단순 문자열이 아닌
{ height: currentScrollTop }과 같은 JSON 객체 구조로 포매팅하여 나중에 다중 스크롤이나 추가 메타데이터가 필요할 때 확장할 수 있도록 설계했습니다. - 브라우저 내장
localStorage.setItem을 원형으로 커스텀 매핑한Storage.set및Storage.get유틸리티 함수를 이용해 코드 유지보수성과 재사용성을 배가했습니다.
향후 전망
- 복잡한 상태 관리 패키지(Pinia, Vuex)의 오버헤드를 줄이려는 경량급 모바일 웹앱 및 싱글 페이지 애플리케이션(SPA) 개발 시 표준 스크롤 보존 패턴으로 폭넓게 차용될 것입니다.
- 향후 모바일 브라우저의 BFcache(이전 페이지 뒤로가기 캐시)와 연동 시 한층 더 빠른 프레임 응답률을 보장하기 위한 추가 튜닝 기법으로 확장될 가능성이 큽니다.
출처:juejin