서비스를 구현함에 있어서 에러처리는 굉장히 중요한 부분이다. 실제로 유저들이 서비스를 사용하면서 에러가 발생했을 때 그에 따른 처리를 구현해놓지 않는다면 사용자는 에러로 인한 터진 애플리케이션을 보게되고, 현재 서비스에 어떤 문제가 있는것인지 유저들은 확인할 수 있는 방법이 없다. 따라서 고스란히 서비스에 대한 신뢰성 하락과 유저 이탈로 이어질 수 있다. 여러 프로젝트를 진행하면서 에러처리에 신경을 썼다고 생각했지만, 에러가 발생할 만한 컴포넌트 내에서 에러 처리를 해준다거나 try catch를 남발하는 등,, 지금 돌이켜보면 효과적으로 에러처리를 진행하지는 못한 것 같다. 따라서 덕풀 서비스를 구현하면서 에러처리 중앙화에 대해서 고민했던 상황들을 소개해보고자 한다. 발생 가능한 에러 상황 나는 덕풀 프..
저번 포스팅에서는 React-query를 활용하여 custom hook을 만들어 사용하는 과정을 소개했다. 이번에 다뤄볼 내용은 React-query를 활용한 데이터 필터링이다. 아띠즈 프로젝트에서 해당 데이터 필터링 기능이 사용되는 컴포넌트가 몇개 있었지만, 그 중에서 검색된 작품들의 경매상태가 경매중인지 경매 완료인지 필터링하는 기능에서 React-query를 사용했던 부분에 대해 다뤄보려고 한다. React-query select 옵션 select 옵션을 사용하지 않고 데이터를 직접 가공하여 state로 관리하는 방법을 사용할 수 있겠지만, React-query에서 제공하는 select 옵션을 사용하면 클라이언트 단에서 필터링을 진행하지 않을 수 있다. select 옵션은 React-query를 통..
지난 포스팅에서도 이야기 했듯이 아띠즈 프로젝트를 진행하면서 사용된 API의 개수는 60개 이상이었기 때문에, 서버 데이터 관리가 필수적이었다. 많은 사용자들이 사용한다는 것을 가정하고, 데이터 캐싱 또한 필수적이었는데, React-query를 도입하면서 보다 간편하게 위에서 언급했던 사항들을 처리할 수 있었다. React-query에서 제공하는 useQuery, useMutation 등을 사용하는 것 또한 간편하지만, 여러 컴포넌트에서 데이터가 필요한 경우도 많았기에 재사용성을 고려하여 custom hook을 만들어 관리했다. 추가적으로 React-query에서 제공하는 제네릭을 사용하여 관리하는 데이터의 타입 또한 같이 다뤄보자. useQuery와 useMutation 훅에서 사용되는 제네릭 타입은 ..
