브라우저 또는 다른 탭에서 동일한 데이터로 동기화하기

사용자가 탭을 전환하거나 페이지 가시성이 변경된 경우, 동일한 세션의 사용자가 있다고 가정을 해보아요.

사용자가 A와 B의 브라우저 또는 탭을 동시에 켜놓았을 때 A의 브라우저 서비스의 데이터를 업데이트 할 경우, B로 접근할 때 새로고침을 하지 않는 이상 동기화된 데이터를 얻을 수 없어요.

 

이 경우, 만약 사용자가 데이터를 혼동하여 기존 B 데이터를 이용하여 전체 데이터를 수정하고 업데이트 하는 경우에는 잘못된 데이터 동기화 현상이 발생하게 됩니다. 이러한 상황을 방지하고자 사용자가 탭을 전환하거나 페이지 가시성이 변경된 후 다시 페이지로 돌아왔을 때 최신화된 데이터를 확인하고 싶거나, 혹은 서로 다른 브라우저에서 동일한 데이터를 동기화해서 확인하고 싶을 때 아래와 같은 윈도우 이벤트를 사용하여 동기화 처리를 진행할 수 있어요.

 

이 이벤트는 메모리가 정말 큰 데이터 값을 가지고 있는 지도를 사용자가 해당 탭을 보지 않는 순간 렌더링을 막아 메모리의 사용을 절감하거나, 지속적으로 데이터를 호출하는 경우 사용자가 백그라운드로 해당 서비스를 사용하지 않을 때는 호출하지 않는 방법으로 효율적인 메모리 작업을 수행할 수 있어요. 예를 들어 비디오 또는 오디어 플레이러를 일시 중지하거나 다시 시작하는 이런 상황에서 사용할 수 있을 것 같아요.

window.addEventListener('visibilitychange', () => {
	if (document.visibilityState === 'visible') {
    	console.log('현재 window 창이 보이는 상태예요');
    }
    if (document.visibilityState === 'hidden') {
    	console.log('현재 다른 윈도우 창이 켜져있어 현재 window 창은 가려진 상태예요');
    }
});

위 이벤트는 탭을 이동하거나, 브라우저 창을 최소화할 때 발생이 되어요. 그렇다면 만약 A 브라우저에서 데이터를 변경해 반영하고, B 브라우저를 클릭했을 때 탭을 바꿔서 데이터를 반영하는 것이 아닌 B 브라우저가 포커스되어 클릭되었을 때 최신화된 데이터를 바로 받아보고 싶다면 아래와 같이 이벤트를 설정할 수 있어요. 위에서 설명했던 visibilitychange 이벤트와 유사하지만 이벤트 명이 바뀌었다는 것을 참고해주세요.

window.addEventListener('focus', () => {
	if (document.visiblityState === 'visible') {
    	console.log('현재 window 창이 보이는 상태예요');
    }
    if (document.visibilityState === 'hidden') {
    	console.log('현재 다른 윈도우 창이 켜져있어 현재 window 창은 가려진 상태예요');
    }
});

위와 같이 이벤트를 추가하게 되고, A 브라우저에서 데이터를 추가한 후 다시 B 브라우저에서 데이터를 확인하기 위해 클릭하게 된다면 focus 이벤트가 발생하여 관련 이벤트를 실행하고, 개발자가 추가한 데이터 조회 로직이 발생하여 최신화된 데이터를 visibilitychange 이벤트와는 다르게 윈도우 창에 들어온 순간을 포착하여 이벤트를 바로 실행할 수 있게 됩니다. visibilitychange와 다른 점은 visibilitychange는 탭을 이동하거나, 브라우저 창을 최소화할 때만 발생을 하기 때문에 브라우저가 포커스 되었을 때의 이벤트는 잡지 못해요.

 

일부 프로젝트에서 tanstack-query를 사용하다가 윈도우가 포커스될 때 데이터가 동기화되는 것을 보고 정말 신기했던 경험이 있어요. 현재 tanstack-query 에서는 windowOnFocus 라는 옵션 값이 존재하여 이 경험 덕분에 어떤 이벤트로 동작할까에 대한 궁금점이 있어 이렇게 기본 이벤트를 통해 적용하는 방식을 진행해보았습니다. 아래 추가로 주의할 점에 대해 읽어보시면 아시듯이, 이런 이벤트를 사용하게 되면 데이터가 그대로여도 호출을 한다는 단점을 가지고 있어요. tanstack-query는 캐싱 처리와 적절하게 사용이 잘 되고 있기 때문에 이러한 방식과 더불어 윈도우가 포커스 될 때 이벤트 방식은 효율적으로 데이터를 관리하는데 도움을 많이 주는 것 같아요.

 

페이지가 자주 동기화되어야하는 기능의 경우에는 해당 이벤트를 사용하는 것이 어쩌면 사용성 측면에서 바람직할 수 있지만, 중요도가 낮아 자주 사용되지 않거나 페이지 동기화가 굳이 많이 필요하지 않는 케이스인 경우에는 이런 이벤트가 어쩌면 오버 스펙으로 인한 오버 엔지니어링이 될 수 있으니 주의를 해야해요.