콘요맘떼 개발일지

react-query는 onError 옵션을 통해 에러 처리 메소드를 지정할 수 있도록 해준다. 그런데 매 쿼리마다 onError 메소드를 지정해주는 것은 비효율적이다. 예를 들어서 서버 점검으로 인해 503번 HTTP 상태 코드가 반환되었을 때 우리는 공통적으로 서버 점검 관련 안내 메시지 혹은 화면을 보여줄 것이다. 그런데 매 쿼리가 생성될 때마다 503번 코드를 받았을 때 해당 작업을 수행하는 메소드를 지정해주는 것은 비효율적이다. 다행히 react-query는 QueryClient를 생성할 때 default option들을 지정하게 해 준다. 그 중 onError 옵션에 에러 처리 함수를 지정해주면 해당 QueryClient 내부에서 사용하는 모든 useQuery와 useMutation hook에..

Intersection Observer Intersection Observer API는 타겟 요소와 상위 요소(혹은 최상위 요소인 document)의 viewport 사이의 intersection의 변화를 비동기적으로 관찰한다. (MDN에서 정의된 바는 이렇다.) 보다 간단하게 정리하면 특정 Element가 기준 화면(viewport)에 노출되었는지 여부를 감지한다고 보면 된다. 사실 element의 가시성을 판단하기 위해서는 다른 방법도 존재한다. window에 scroll 이벤트에 대한 event listener을 추가하고 Element.getBoundingClientRect( )를 통해 element가 viewport에 상대적으로 가지는 위치를 점검한다면 특정 element의 가시 여부를 판단할 수..