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등은 중복으로 에러핸들링을 하고 있을 수도 있음.)어떤 에러를 기준으..

Debounce사진 처럼 와인가격을 input으로 조절하면 그 범위에 있는 가격의 와인데이터들이 불러와지는 로직을 짯는데 인풋의 gap이 하나라도 바뀔때마다 get요청을 보내기때문에 드래그를 할때마다 api get요청을 우수수 받는 문제가 있었다. 이를 디바운싱(debouncing) 과 쓰로틀링(throttling)을 이용하여 개선해보고자 하였다. 둘 중 어느 것을 사용하는게 적합할까?  디바운싱은 연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 것쓰로틀링은 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것 필터에서 사용자가 게이지 바를 움직일 때마다 API 요청을 보낸다면, 디바운싱을 통해 입력이 끝난 시점에만 (즉 마지막 함수 호출 시점) 요청이 이루어지는게 좋..

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

무한스크롤시 두번 데이터를 받아오는 현상무한스크롤을 구현하기 위해 아래 처럼 ref를 이용하여 페이지의 끝에 도달하였을때를 감지하여 뒤에 더 불러올 데이터가 있는지 확인하는 wineCursor상태, 데이터를 추가로 불러올 시점을 제어하는 isLoading과 hasMore을 이용하여 로직을 짯다. const [wineList, setWineList] = useState([]); const [wineFilterValue, setWineFilterValue] = useState({ wineType: WineEnum.Red, winePrice: { min: 0, max: 100000 }, wineRating: 0, }); const [wineName, setWineName] = useSt..