프론트엔드 개발자는 유저에게 좋은 경험을 제공해야 한다는 의무가 있습니다. 이번에는 프론트엔드 개발자가 유저에게 좋은 경험을 제공할 수 있는 skill중 하나인 preFetch에 대해 이야기 해보려합니다.
우리는 프로덕트를 개발하면서 유저의 다음 행동을 어느정도(?) 예상할 수 있습니다. 다음 예시를 한번 보시죠.
위 사진은 제가 진행한 '대박 사건'이라는 편지 서비스의 페이지 일부입니다. 해당 페이지는 박을 터트리면 박 속에 들어있던 편지지들이 나타나는 페이지입니다. 그렇다면 위 상황에서 유저의 다음 행동을 예상해볼까요?
1. 유저는 박을 클릭하여 터트려 박 속에 들어있던 편지지들을 볼 것이다
2. 뒤로 돌아간다
아마도 위 두 가지 정도로 유저의 다음 행동을 예상할 수 있을 것입니다. 만약 네트워크 환경이 좋지 못한 상황에서 유저가 박을 클릭한다면 박속에 들어있는 편지 데이터들을 요청하고 유저에게 보여주기 까지에 시간이 상당히 오래 걸릴겁니다. 실제로도 그랬고요.
그렇다면 지금과 같은 상황에서 우리 프론트엔드 개발자는 어떤 역할을 할 수 있을까요? 여기서 우리는 `preFetch`를 사용할 수 있습니다.
`preFetch`는 말 그대로 '미리 fetch 하다' 그런 뜻입니다. 이것을 TanStack Query의 관점에서 바라보면 미리 데이터를 fetching 하여 캐시에 저장하는 것이죠.
기본적으로 TanStack Query의 prefetchQuery는 기본 staleTime을 사용하여 캐시의 기존 데이터가 최신인지, 아니면 다시 가져와야 하는지 확인합니다. 추가로 프리페치된 쿼리에 대해 useQuery 인스턴스가 나타나지 않으면 gcTime에 저장된 시간 이후 캐시에서 삭제됩니다.
그렇다면 어디에 prefetchQuery를 적용할지 고민해 보겠습니다. 우선 waterfull 방식으로 해당 페이지에 진입 하자마자 저 박을 터트렸을 때에 대한 데이터를 미리 받아올 수 있겠죠. 하지만 이 방법은 좋지 안다고 생각하였습니다. 그 이유는, 유저가 클릭을 잘못하여 잘못된 페이지에 들어왔을 경우 뒤로가기를 할 수 있기 때문입니다. 그렇게 된다면 의미없는 데이터를 요청하게되고 우리는 쓸데없는 메모리를 사용하게 되겠죠.
그래서 저는 좀더 유저가 해당 데이터를 볼 것이라는 명확한 행동이 무엇이 있을지 고민하여 유저가 박에 마우스를 올려놓으면 그때 prefetching을 하기로 결정하였습니다. 유저가 페이지에 들어만 온 것 보다는, 박 위에 마우스를 hover 하는게 다음 데이터를 확인 할 확률이 높다고 생각했기 때문입니다.
위처럼 핸들러 함수를 만들어 onMouseEnter 이벤트에 함수를 할당하고 유저가 박에 마우스 hover 하면 각각 `channel`, `channelPosts`라는 각각의 queryKey(캐시)에 데이터가 저장이 될 것입니다. 이후 박이 열리면 useQuery를 통해 각각의 queryKey에 저장된 데이터를 불러와 바로 유저에게 보여줄 수 있는 것이죠.
prefetchQuery를 사용했을 때와 안했을 때를 한 번 비교해보겠습니다.
또 다른 예시를 보겠습니다. 아래 사진은 여러개의 카드 컴포넌트를 페이지네이션으로 구현해 놓은 페이지입니다. 그렇다면 위 상황에서 유저의 다음 행동을 예상해볼까요? 아마 다음과 같을 것입니다.
1. 유저는 `>` 또는 `<`버튼을 클릭 할 것이다.
2. 유저는 1, 2, 3, 4, ... 등 페이지네이션 번호를 클릭 할 것이다.
3. 유저가 카드 컴포넌트를 클릭하여 해당 카드의 자세한 내용을 확인한다.
위 상황에서는 어디에 prefetchQuery를 사용하는 것이 좋을까요? 개인적인 생각으로는 화살표와 숫자의 onMouseEnter 이벤트에만 적용하는 것이 가장 좋아보입니다. 이유는 유저가 화면을 보다 보면 마우스를 많이 움직일 것입니다. 화면에 대부분을 차지하고 있는 카드 컴포넌트를 마우스가 지나칠때마다 계속해서 데이터를 요청하게 될텐데 그것은 어마어마한 메모리 낭비로 이어지죠.
하지만 화살표 버튼 또는 숫자 버튼은 유저의 다음 행동인 `클릭`으로 이어질 가능성이 높습니다. 숫자의 범위도 그렇게 크지 않아 마우스가 여기저기 hover 할 일도 없구요. 따라서 화살표와 숫자 버튼에만 prefetchQuery를 적용하는게 좋아 보입니다.
prefetch는 유저의 경험을 개선하는데 있어 아주 유용한 기능이라고 생각합니다. 하지만 정작 필요하지 않은 곳에 prefetch를 남발하게 된다면 메모리 낭비 및 데이터 요청 비용이 많이 발생하겠죠. 따라서 유저의 다음 행동이 예상이 될 때에 적절하게 잘 사용해 준다면 UX를 개선하여 유저의 페이지 이탈을 줄여줄 수 있다고 생각합니다.
'React' 카테고리의 다른 글
| useState 동작원리로 알아보는 자바스크립트 기본기 (2) | 2024.10.15 |
|---|---|
| 렌더링을 빨리 빨리!! by 번들 사이즈 최적화 (2) | 2024.04.25 |
| 프론트엔드 성능 최적화(Image 압축 및 확장자 변경 자동화) (0) | 2024.04.13 |
| 프론트엔드 성능 최적화(Font) (0) | 2024.04.12 |
| human error를 줄여 동료 개발자의 경험을 개선해보자! with console.log() (0) | 2024.04.08 |
같은 실수를 반복하지 않고, 한 번 학습한 내용을 오래 기억하기 위해 개발하면서 겪었던 트러블 슈팅과 학습한 내용을 정리하고 기록합니다 🧑💻
