[🚨응급실 알리미] React-query에서 error 처리 프로젝트를 진행하면서 일관된 에러 처리에 대한 중요성을 느꼈습니다. 에러가 발생하면 사용자에게 적절하게 알리고, 일관된 방식으로 대응하는 것은 사용자의 경험을 향상 시키는데 큰 역할을 합니다. [응급실 알리미] 서비스의 발생할 수 있는 에러 상황과 대응 방법 응급실 알리미는 로그인 없이 응급실 정보를 제공하며, 정보는 일방향으로만 제공됩니다. 따라서 일반적으로 권한이 없는 유저가 접근했을때, 데이터 변경 HTTP 메서드에 따른 에러 처리를 하지 않았습니다. 1. get이 실패한 상황(api 요청 에러) 사용자 화면에 각 API에 따른 유의미한 메시지와 함께 toast 알림으로 표시한다. 새로 고침 버튼을 넣어 새로 고침을 유도하여 다시 API를 요청한다. 개발자 error 로그를 남긴다 2. 404가 발.. [🚨응급실 알리미]React Query와 Router loader 함께 쓰기 응급실 알리미의 구조 설계 초기 때 Router의 loader를 사용하여 미리 데이터를 받아와 컴포넌트를 렌더링 하려고 하였습니다. 하지만 loader함수는 컴포넌트가 아니기 때문에 데이터를 가져오기 위해 useQuery훅이나 recoil의 상태 관리 훅을 사용할 수 없었습니다. 해결책을 찾지 못하고 차선책으로 API를 사용하는 공통 컴포넌트에서 React Query로 데이터를 가져와 rocoil로 관리하기로 하였습니다. 프로젝트 완성 후 리팩토링 과정에서 React Query와 Router loader를 연결할 수 있는 방법을 찾았고 그 과정을 정리한 글입니다 현재 상황 제일 최상위인 app 컴포넌트에서 모든 페이지에 사용하는 공통 API를 호출하여 Recoil 전역 변수에 업데이트합니다. 또 sele.. 이전 1 다음
