사용자는 내부 시스템을 알지 못하기 때문에, 사소한 멈칫거림이나 불친절한 에러 메시지 하나에도 쉽게 불안함을 느낍니다.
그리고 이 불안은 곧 "이 서비스는 믿을 수 없다" 는 인상으로 이어지곤 합니다.
프론트엔드 개발자는 단순히 API를 연결하고 화면을 그리는 것을 넘어, 사용자가 서비스를 안심하고 사용할 수 있도록 돕는 역할도 해야 한다고 생각합니다.
이 글에서는 우리가 무심코 놓치기 쉬운, 하지만 사용자의 불안을 덜어줄 수 있는 몇 가지 디테일을 살펴보려고 합니다.
데이터 요청 상태에 따라 다르게 노출되는 UX/UI 설계는 많은 고민을 필요로 한다. 이러한 문제를 해결하기 위해 React는 다양한 방법을 제공하는데, 그 중 Suspense와 ErrorBoundary를 활용한 선언적 데이터 패칭이 있다.
지금부터 Suspense와 ErrorBoundary를 활용한 선언적 데이터 패칭이 어떻게 효과적인지 함께 알아보자.
원티드 프리온보딩 사전과제를 진행하며 여러 리다이렉트 작업이 필요했다.
Root 컴포넌트 / 경로 접근 시 SignIn 페이지로 리다이렉트를 하고 있었으며 라우팅 시 SignIn과 Todo 페이지는 로그인 여부에 따라 리다이렉트 처리하는 고차 컴포넌트 AuthenticationGuard가 감싸고 있었다.
useNavigate로 라우팅할 때 리다이렉트 로직으로 인해 뒤로가기가 제대로 되지 않는 문제가 발견되었고, 이를 해결하기 위해 useNavigate를 좀 더 꼼꼼하게 살펴보게 되었다.