프론트엔드 개발자의 기록 공간

❗❗ 데브코스 54일차 (10.14) 오늘도 자주 사용되는 컴포넌트 로직을 함수로 뽑아내는 연습을 진행한다. 프론트 개발을 하다 보면, 프론트에서 자체적으로 저장해야 하는 데이터들이 있다. (임시저장 데이터, 토큰 등) 이를 위해서 localStorage, sessionStorage를 이용하게 된다. 또한, 특정 이벤트가 발생하고 몇 초 뒤에 어떠한 로직을 수행하는 setTimeOut() 함수도 자주 사용된다. 몇 초 뒤 다른 페이지로 이동 등등... 이 두 가지를 Custom Hook으로 만들어보는 과정을 설명하겠다. ✅ useLocalStorage - Custom Hook import { useState } from "react"; // localStorage 저장할 key값, 초기값 const us..

❗❗ 데브코스 53일차 (10.13) 53일차 두 번째 시간 또한, 컴포넌트 연습하기로 진행된다. 또한 사용자 정의 Hook 만드는 연습도 진행된다. 사용자 정의 Hook 코드 하나를 예시로 설명을 하겠다. ✅ useHover - 마우스 hover Hook 마우스를 컴포넌트에 올렸을 때, 올리지 않았을 때 처리를 위한 Hook이다. 이와 같은 useHover Hook은 많이 사용된다. 버튼에 hover 했을 때 css 처리, 이벤트 발생 등등 다양하게 사용할 수 있다. import { useCallback, useEffect, useState, useRef } from "react"; const useHover = () => { const [state, setState] = useState(false);..