ResizeObserver HTML 엘리먼트의 크기 변화를 감지할 수 있는 API다. (브라우저 창의 크기가 변경됨을 감지하려면 window.addEventListener('resize')) const resizeObserver = new ResizeObserver((entries) => { for (const entry of entrie...

패킷의 기본 패킷은 헤더와 데이터의 두 부분으로 구성된다. 네트워크 계층을 거치면서 패킷에 헤더나 데이터가 붙게 된다. TCP 담당 부분은 통신 상대와 대화할 때 IP 담당 부분에 의뢰하여 데이터를 패킷의 모습으로 만들어 상대에게 보낸다. TCP/IP 패킷에는 MAC 헤더(이더넷용 헤더)와 IP 헤더(IP용 헤더)가 붙어있다. I...

Clipboard API Clipboard API는 시스템 클립보드에 데이터를 읽거나 쓸 수 있는 비동기 API이다. 아래 메서드를 포함한다. read() 클립보드에서 이미지 등의 데이터를 가져온다. const clipboardContents = await navigator.clipboard.read() for (const item of c...

에러 React에서 ref를 props로 전달하기 위해 forwardRef를 사용하면 “형식에 ‘current’ 속성이 없습니다.” 라는 에러가 발생했다. const Nav = forwardRef<HTMLVideoElement | null>((props, ref) => { const handleScreenShare = useCa...

redux 상태 업데이트 전/후 콘솔 찍기 const handleClick = () => { console.log("before count", count); dispatch(increment()); console.log("after count", count); }; return <button onClick={handleClic...

리액트에서 불변성 지키면서 상태 관리하기 리액트에서는 상태를 불변성으로 관리해야 한다. 보통 상태를 업데이트 할 때 스프레드 연산자를 사용하여 얕은 복사를 한다. const onToggle = (id) => { setUsers( users.map((user) => user.id === id ? { ...user, ...

브라우저에 url을 입력하면 일어나는 일 브라우저에 url을 입력하면 가장 가까운 DNS 서버에 IP 주소를 요청한다. DNS 서버에 조회한다는 것은 DNS 서버에 조회 메시지를 보내고, 응답 메시지를 받는다는 것을 의미한다. 브라우저 자체에는 메시지를 네트워크로 송출하는 기능이 없으므로 Socket 라이브러리를 사용하여 OS의 프로토콜 스택을 ...

설치하기 npm i @tanstack/react-query # or yarn add @tanstack/react-query @tanstack/react-query(v4)는 react-query(v3)에서 업그레이드 된 최신 버전으로 React 18을 지원한다. 참고 기본 사용법 먼저 react-query를 사용하기 위해 QueryCli...

useEffect 의존성 배열에 useCallback 함수를 넣으면 어떻게 될까? useEffect 안에서 useCallback 함수를 사용하는 경우, 의존성 배열에 함수를 넣지 않으면 eslint가 노란색 밑줄을 표시한다. 밑줄에 마우스를 갖다대면 ‘Either include it or remove the dependency array.’ 이런...

에러 발생 아래와 같이 컴포넌트에서 ref.current를 클린업하면 에러가 발생한다. useEffect(() => { if (containerRef.current) { containerRef.current.addEventListener(() => { console.log('event') }) } r...