injae

에러바운더리는 리액트16에서 나온 개념으로 js에러를 기록하여 깨진 컴포넌트 대신 폴백 UI를 보여주는 리액트 컴포넌트다. getDerivedStateFromError()와 componentDidCatch()를 정의한 클래스형 컴포넌트를 만들어야 한며,getDerivedStateFromError()를 사용해서 fallback component를 보여주고, componentDidCatch()를 사용해서 에러 내용을 기록하는 형태로 사용하면 된다. 하지만 react-error-boundary 라이브러리로 함수형 컴포넌트방식으로 에러바운더리를 사용할 수 있기 때문에 라이브러리를 이용하여 함수형 컴포넌트 방식으로 구현하였다.  1. 리액트 쿼리와 에러바운더리 적용 문제기본적으로 에러바운더리 컴포넌트를 만들어서 ..

COWERKER의 에러 핸들링 부분을 리펙토링 진행하였다!우선 프론트에서 처리하는 에러핸들링을 살펴보면프론트에서의 에러 핸들링JS의 try/catch문react-query의 onError옵션 (API에 관한 에러 처리)axios 설정 (API에 관한 에러 처리)Error boundary ( 클라이언트 쪽의 컴포넌트의 렌더링 문제가 발생했을 때 보여줄 컴포넌트 정의 및 경계 )next.js 에서 제공되는 에러핸들링 (404, 500, error 페이지)1. 에러 관심사의 분리앞서 정리한 에러처리들을 모두 사용한다면 중복된 에러처리를 하거나, 유지보수가 어려워질 수도 있다. (axios와 react-query, next의 error page등은 중복으로 에러핸들링을 하고 있을 수도 있음.)어떤 에러를 기준으..

버추얼 스크롤팀 페이지에서 팀내의 할 일 목록, 멤버의 데이터를 불러와서 페이지에 뿌려야하는 부분이다.{ "teamId": "string", "image": "string", "name": "string", "id": 0, "members": [ { "role": "ADMIN", "userImage": "string", "userEmail": "string", } ], "taskLists": [ { "groupId": 0, "name": "string", "id": 0, } ]} API상으로 GetGroup요청 한 번으로 팀과 연관된 모든 할 일 목록들과 멤버들의 데이터를 불러올 수 있도록 설정되어있지만, 할 일 목..