이번에 풀스택으로 개발 해 볼 서비스로 이전에 react만을 이용해 만들어봤던 지도검색 사이트를 강화해보고자 한다. 기술 스택을 어떻게 정하고 갈지 기획하는 단계인데 지도 검색 서비스 특성상 많은 데이터를 다뤄야 하는 만큼 데이터 관련 라이브러리에 대한 고민을 이어가다 SWR, React Query 두 가지로 후보군을 좁혔다. 둘 다 프로토타입을 만들어 볼 예정이긴 하지만 내 서비스의 특징과 두 라이브러리의 특징을 비교해서 어떤 것이 더 적합할지 예상해보려고 한다.
SWR (Stale-While-Revalidate)
SWR은 "Stale-While-Revalidate" 전략을 사용하여 데이터 패칭을 관리합니다. 이 접근 방식은 데이터를 사용자에게 빠르게 제공하고 배경에서 데이터를 갱신하는 데 유리합니다. 주요 특징은 다음과 같습니다
데이터 자동 갱신: SWR은 포커스 재검증(focus revalidation), 인터벌 폴링(interval polling) 등을 통해 자동으로 데이터를 갱신합니다. 이는 사용자가 앱을 다시 열거나 탭으로 다시 돌아올 때 자동으로 최신 데이터를 가져오는 데 유용합니다. 실시간 상호작용: 실시간으로 변경되는 데이터에 적합합니다. 예를 들어, 주식 시세, 뉴스 피드, 실시간 채팅 등의 애플리케이션에서 효과적입니다.
React Query
React Query는 복잡한 데이터 의존성을 관리하고, 서버 상태와 클라이언트 상태 간의 동기화를 자동화하는 데 강점을 가집니다. 주요 특징은 다음과 같습니다
강력한 캐싱과 데이터 동기화: 캐시의 유효 기간 관리, 데이터 동기화, 캐시 무효화 등을 세밀하게 제어할 수 있습니다. 이전에 패칭한 데이터를 효율적으로 재사용할 수 있으며, 필요한 경우 캐시를 쉽게 무효화할 수 있습니다. 복잡한 데이터 패칭 요구 사항 처리: 여러 데이터 소스에서 데이터를 패칭하고, 이를 조합하여 사용해야 하는 복잡한 시나리오에 적합합니다.
라고 한다.
내가 이해한 것을 바탕으로 정리해보면 SWR은 실시간으로 업데이트 돼야하는 데이터 관리를, React Query는 짧은 시간 자주 사용하는 데이터 관리에 강점이 있다는 것으로 확인이 된다.
내가 만들 지도 검색 서비스의 특징을 생각해보자. swr의 장점 첫번째인 실시간 데이터 관리 측면에서 어떤 것들이 실시간으로 이루어 질 수 있는지 생각해보자.
- 실시간 도로 교통 상황
- 버스 정류장의 버스 도착 예정 정보 (지하철도 해당 되겠다.)
등이 있겠다. 나름 중요한 기능들이라고 생각이 된다.
두번째 장점인 포커스 재검증을 통한 자동 데이터 갱신에 대해 사용자 경험에 맞춰 생각을 해봤다. 내가 이해한 바에 따르면 이 기능은 해당 웹 사이트를 자주 들락 거릴 경우 유용하다. 근데 내가 경험한 지도 서비스들의 특징은 내가 원하는 정보를 얻어 낼 때 까지 다른 앱 웹을 들락거리는 경우가 없었다. 빠르게 원하는 정보를 얻어서 그 정보로 길, 교통수단, 걸리는 시간등을 예상하고 정해야 하기 때문에 이 부분은 지도 서비스에는 적합하지 않다는 생각을 했다.
React Query의 장점을 생각해보자. 이전에 패칭한 데이터를 효율적으로 사용할 수 있단다. 우리가 지도 서비스를 이용해 검색을 진행할때 이런 경험이 있지 않은가. 내 출발지를 픽스해두고 도착지를 어디로 선정했을때 가장 효율적으로 루트를 정할 수 있는지 또는 도착지를 픽스해둔 채 내 출발지를 어디로 해야 효율적인 루트가 나오는지를 비교하는 것들 말이다. 이런 경우 픽스한 주소의 데이터를 캐싱해둔다면 검색할 때마다 데이터를 요청해야하는 번거로운 작업들이 줄어들 것 같다는 생각을 해본다.
그리고 이전 검색 기록들도 꽤나 중요한 기능이라고 생각하는데 그런 측면에 있어서도 React Query의 구 데이터 재사용성에 대한 기능이 꽤나 매력적으로 느껴졌다. 이러한 사고과정을 근거로 이번 웹 서비스 개발의 메인 데이터 라이브러리는 React Query가 될 것 같다. 이 지도 서비스 라는 주제를 되게 선정을 잘 한 것 같은게 실시간으로도 데이터를 처리할 여지가 분명히 있는 서비스라서 이 부분은 또 SWR을 이용해 간접적으로 비교도 가능할 것 같아 데이터 처리에 있어서 좋은 공부가 될 듯 하다.
6월 19일 까지로 개발 기한을 빡세게 잡아봤다. 사실 풀스택 개발은 처음이라 이 기간이 긴지 짧은지도 가늠이 잘 안되지만 진짜 데드라인이라는 생각을 가지고 임해 볼 생각이다. 그리고 오늘 작성한 SWR, React Query 처럼 다른 스택들도 비교군을 뽑아서 저번 멘토링 후기 글 때 작성했던 성능 향상을 주안점을 두고 개발 과정을 거쳐볼것이다.
Ghost