문제점: 세션 저장소의 한계

현재 대시보드 탭은 Stimulus 컨트롤러를 통해 세션 저장소(sessionStorage.setItem(...))에 선택된 탭 정보를 저장하여 사용자가 페이지를 재방문할 때 마지막 상태를 유지합니다. 이는 일반적인 내비게이션에는 유용하지만, 애플리케이션 내 다른 곳에서 link_to를 통해 특정 탭으로 직접 이동하려는 새로운 기능 요청에서 문제가 발생했습니다. link_to가 클릭되어도 페이지는 세션 저장소에 캐싱된 이전 탭 정보를 우선적으로 로드하여, link_to가 의도하는 탭이 아닌 기존 탭이 표시되는 현상이 나타났습니다. 이는 사용자 경험을 저해하는 요인이었습니다.

해결책: Turbo 캐시 무효화 활용

이 문제를 해결하기 위해 Hotwire의 Turbo 프레임워크가 제공하는 캐시 관리 기능을 활용했습니다. Turbo는 특정 페이지를 캐시에서 제외시키는 메서드를 제공합니다.

• Stimulus 액션 추가: link_to 요소에 `data: { action: ‘submenu

clearCache’ } 속성을 추가하여, 링크 클릭 시 clearCache` Stimulus 액션이 실행되도록 합니다.

• clearCache 함수 구현: Stimulus 컨트롤러 내부에 다음과 같은 clearCache() 메서드를 정의합니다. javascript clearCache() { Turbo.cache.exemptPageFromCache(); } Turbo.cache.exemptPageFromCache() 메서드는 현재 페이지가 Turbo의 캐시에서 제외되도록 지시합니다. 이로 인해 다음 페이지 로드 시 캐시된 버전 대신 서버로부터 새로운 페이지를 요청하게 됩니다.

결과

이러한 구현을 통해 link_to가 클릭될 때마다 페이지 캐시가 무효화되고 서버로부터 최신 페이지가 로드됩니다. 결과적으로 세션 저장소의 캐싱된 탭 정보에 얽매이지 않고 link_to가 가리키는 정확한 탭이 표시되어, 새로운 기능 요구사항을 성공적으로 충족시키고 사용자 경험을 크게 향상시켰습니다.