# usehooks-ts
usehook-ts 라이브러리에 대해 알아보자
키워드 usehooks-ts useBoolean useEffectOnce useFetch useInterval useEventListener useLocalStorage useDarkMode swr react-query 최종 목표 간단한 서버를 만들고, custom hook 을 사용하여 서버에서 데이터를 받아올 수 있다. 현재 목표 usehook-ts 라이브러리에 대해 알아보자. usehooks-ts 란? usehooks-ts 공식문서 타입스크립트로 만들었지만 자바스크립트에서도 사용 가능하다. 모든 Hook 에 대해 어떻게 만들었는지 나와있어서 Hook 을 만드는데 많은 영감을 얻을 수 있다. usehooks-ts 설치하기 useBoolean 이란? [useBoolean 공식문서](https://
[1주차][과제] 리액트 프로젝트 세팅하기
🐋 학습 목표 교재에서 아샬이 제공한 레퍼런스처럼 프론트엔드 세팅을 위한 나만의 README 문서와 설정을 만들어 두면 매우 편합니다. 매번 프로젝트 때마다 문서를 따라서 생각없이 따라만 해도 세팅이 완료된다면 인지자원을 대단히 아낄 수 있습니다. 🐋 목표 Node.js를 설치하고 프로젝트를 진행할 수 있는 Node.js 패키지를 만든다. 그리고 코드 퀄리티를 일정 수준 이상으로 유지할 수 있도록 lint와 test를 실행할 수 있는 상태를 만든다. 🐋 세팅 목록 Node.js 개발 환경 세팅 TypeScript ESLint React Jest Parcel React Router styled-components styled-reset usehooks-ts usestore-ts Axios tsyringe reflect-metadata jest-dom MSW CodeceptJS
React 18 에서 useLocalStorage 구현
localStorage를 통해 칸반의 추가, 삭제, 업데이트, 드래그, 드랍을 하고자 변경감지될 때마다 localStorage에서 꺼내고 빼서 쓸 수 있는 Hook이 필요했다. 초기에 구현했던 useLocalStorage 값 읽기 초기의 state값으로 localStorage에서 getItem(key) 메소드를 호출했을 때 해당 key에 대한 항목이 존재하면 string 형태로 반환하며, 없으면 null을 반환한다. 해당 key에 대한 항목이 존재한다면 사용자가 그 값을 한 번이라도 저장했다는 소리가 된다. 그러니까 초기값 대신 저장된 값을 반환해야 한다. 반면 null이 반환되었을 경우 사용자가 값을 저장한 적이 없거나 삭제했다는 의미이기 때문에 초기값을 반환해야 한다. 따라서 어떤 key에 대해 읽어진 값은 아래와 같이 쓸 수 있다. SSR의 경우 window is undefined 오류가 발생할 수 있다. 따라서 window를 한