20220515 TIL

• 모달 구현시 뒷배경 블러처리 backdrop << 사용하면된다

• border-radius에 % 주는건 박스가 정사각형이 아닌이상 예쁘게 안나옴

  리액트쿼리

  아직 더 공부해보아야하겠지만 자동으로 데이터 캐싱, isloading, suspense, refetchwindowfocus등 많은 기능이 있다.

• 반응형 웹은 모바일뷰 -> 데스크탑으로 나아가는것이 좋다.

• optional chaining (?.) : 참조가 유효하지않으면 에러를 내는 대신 undefined를 리턴한다.

• react-intersection-observer : 어떤 elements가 뷰포트에 노출되었는지 감지하는 api로, 이를 이용해 무한스크롤을 구현하였다.

const [ref, inView] = useInView()

return(
	<div ref={ref}></div>
)

기본적인 형태로, ref를 달은 태그가 뷰포트에 노출되었는지 감지한다. 노출된 경우 inView(boolean)가 true로 set된다.

• 장점 : onscroll이벤트로 구현시 사용되는 debounce,throttle 을 사용하지않아도 된다.