분류 전체보기

string union type을 type guard 하는 법 (부제 typeof Array[number] 와 const assertion ) string으로 이루어진 union type을 타입가드하고 싶을 때를 알아보자 🧨 문제상황 color 의 타입을 담는 `string union type` 을 만들었다. type ColorKey = 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple' 그리고 그 color값을 저장하는 state 를 만들고, 외부에서 `val string` 을 받아오면 state에 저장하는 handler 함수까지 만들었지만.. const [color, setColor] = useState('red') const onChange = (..

📌 headless component (헤드리스 컴포넌트) 헤드리스 컴포넌트를 설명하기 전에, `useToggle` hook을 추출하여 코드 중복을 줄이는 방법을 알아보자. ✨ 토글 컴포넌트 (Toggle Component) 토글은 단순히 특정 상태를 on/off 시키는 역할을 가진다. 아래처럼 간단히 구현할 수 있다. const ToggleButton = () => { const [isToggled, setIsToggled] = useState(false); const toggle = useCallback(() => { setIsToggled((prevState) => !prevState); }, []); return ( Do not disturb {isToggled ? "ON" : "OFF"} ); ..

🤔 쿠키와 세션을 사용하는 이유 HTTP는 인터넷에서 데이터를 주고받기 위한 약속(프로토콜) 이다. HTTP는 몇가지 단점이 있는데, 바로 `비연결성`, `무상태성` 이다 비연결성(Connectionless) 클라이언트가 요청을 한 후 응답을 받으면 연결을 끊어버리는 특징 무상태성(Stateless) 통신이 끝나면 상태를 유지하지 않는 특징 쿠키와 세션은 위의 두가지 특징을 해결하기 위해 사용한다. (쿠키와 세션을 이용하지 않으면, 웹사이트에 로그인을 했음에도 페이지를 이동할 때 마다 로그인을 해야 한다.) 🍪 쿠키 (Cookie) 클라이언트(브라우저)에 저장되는 key와 value값이 들어있는 작은 데이터 파일 단점 보안에 취약하다 용량제한이 있다 브라우저간 공유가 불가능하다 사이즈가 커질수록 네트워크..

React를 개발하다보면 자주 쓰이는 useRef 와 ref라는 녀석에 대해서 알아보자. 어떨때 쓰나요? 우선 `useRef` 는 어떤 상황에서 사용할까? 개발을 하다보면 단순히 React JSX Element 만으로는 DOM 을 완벽하게 제어하기 어렵다. 가장 흔하게 예시를 들자면, 사용자가 특정 액션을 했을 때 input element에 focus를 해주어야 한다면 React에서 어떻게 구현해야 할까? useRef를 알고있다면, 해결법은 간단하다. input element를 ref에 연결하고, ref에 연결된 element를 focus해주면 된다. ref 가 뭔데요? ref는 reference의 줄임말이다. 한국말로는 참조정도 되겠다. ref는 일반 객체다. ref를 console.log 로 찍으면 ..