Weeeeey Weeeeey

setInterval() 과 useSWR() 은 모두 데이터를 실시간으로 가져오는 방법이지만, 동작 방식과 목적이 다르다. setInterval() setInterval()은 매번 데이터를 가져오기 위해 API에 요청을 보내는 방식이다. 즉, 호출 횟수가 늘어날수록 서버에 부하가 증가한다. 또한 호출 간격을 지정하더라도 정확히 유지하지 못할 수 있고, 데이터를 가져오다 문제가 발생하면 예외가 발생한다. useSWR() useSWR은 데이터를 캐싱하고, 필요에 따라 API에 요청을 보내 데이터를 가져오는 방식이다. 이 방법은 API 요청 횟수가 줄어들고, 가져온 데이터를 캐싱하여 다음 요청시 캐시된 데이터를 리턴함. 호출 실패시에 적절한 에러 처리 가능함 setInterval() && useSWR() =>..

SWR, React Query 등장 이전 Redux, MobX 등의 상태 관리 라이브러리는 클라이언트 상태 관리에는 유용하지만, 서버 상태와 동기화 되지 않았기 때문에 개발자들이 직접 상태를 업데이트 해줬어야 함. => SWR과 React Query는 이러한 불편함을 해소하기 위해 등장 선언적으로 프로그래밍 가능 여러번 호출 된 동일한 API 요청은 한번만 실행 dirty해진 데이터는 적절한 시점에 알아서 업데이트 Global State 와 Server State의 관심사 분리 react-query가 swr을 앞지르고 있다. React query vs SWR React Query React Query는 리액트 에플리케이션에 서버 상태를 가져와서, 캐싱|동기화|업데이트를 쉽게 해준다 React Query ..

const Clip= (url:string) =>{ return ( ) } 요렇게 선언했는데 이 후 url 값을 업데이트 해주어도 처음 할당된 영상만 보여지는 상황이 생겼다. 하고 싶은건 버튼 클릭시 url 값이 업데이트 되어 보여지는 영상도 바뀌는 것 이에 대한 해결책으로 video 태그에 키 값을 주거나 ref를 주는 것. const Clip= ( url:string ) => { const videoRef = useRef(); useEffect(() => { videoRef.current?.load(); }, [url]); return ( ); } const Clip=( url:string )=> { return ( ); } 참고 : https://stackoverflow.com/questions/4..

프론트엔드(FE) 개발자가 브라우저(Br) 동작 원리를 알아야 하는 이유 FE에게 Br는 거의 모든 것. Br를 통해 개발, Br를 통해 테스트 및 배포 진행, 사용자들은 Br를 통해 웹에 접속 FE는 Br의 모든 것이 아닌 HTML, CSS, JS가 의도대로 동작하는지 확인해도 큰 문제x 하지만 기능이 많고 다양한 동작이 발생한다면 최적화가 필요해짐 Br의 최적화를 위해선 결국 Br의 동작 원리를 이해하는 것에서부터 시작 해당 포스트에서 알아볼 것 => Br의 렌더 과정 & 원리 ( 아래는 선 4줄 요약 ) HTML로부터 DOM 트리를, CSS로부터 CSSOM 트리를 빌드 DOM & CSSOM을 결합하여 렌더 트리를 형성 렌더 트리에서 레이아웃을 실행 => 각 노드의 기학학적 형태를 계산 개별 노드를 ..

1. useMutation은 언제 필요한가? 어떤 페이지(게시판,sns 등)에서 특정 댓글을 작성했거나 삭제 했을때 router.reload()를 통한 새로고침으로 사용자에게 보여주는 방법이 있다. 하지만 이러한 측면은 UX 측면에서 좋지 않기 때문에 새로고침 없이 업데이트 된 것을 보여주는 react-query의 useMutation() 훅을 사용한다. 2. react-query란? react-query는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주며 클라이언트 상태와 서버 상태를 명확히 구분하기 위해서 만들어진 라이브러리이다. react-query hook의 종류 ( useQuery, useMutation, useInfiniteQuery ..