const [startDate, setStartDate] = useState() const [endDate, setEndDate] = useState() const [title, setTitle] = useState('') const [description, setDescription] = useState('') const [location, setL...

configureStore() 스토어를 구성하는 함수 reducer, middleware 등의 정보를 전달한다. import { configureStore } from '@reduxjs/toolkit' import additionalMiddleware from 'additional-middleware' import logger from 'redu...

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