httpOnly httpOnly 옵션은 웹서버에서 Set-Cookie 헤더를 이용해 쿠키를 설정할 때 지정할 수 있다. 이 옵션은 자바스크립트 같은 클라이언트 측 스크립트가 쿠키를 사용할 수 없게 한다. httpOnly 옵션이 설정된 쿠키는 document.cookie로 쿠키 정보를 읽을 수 없기 때문에 쿠키를 보호할 수 있다. 자바스크립트로 ...

useTranslation 사용 import React from 'react' import { useTranslation } from 'react-i18next' export function MyComponent() { const { t } = useTranslation() t('total', { value: 10 }) } // ko....

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...