대시보드

대시보드 프로젝트에 tabPage 기능이 필요했는데이때 적용했던 react-tabs의 탭을 동적으로 사용하기 위해사용했던 방법에 대해 설명해보려고 합니다!결론은 useEffect 리액트 훅에 의존성배열을 잘 활용하자! 입니다.제가 이 라이브러리를 도입한 이유는 tabI

이번에는 검색기능과 react-tabs의 tab포커싱 연동에 대해서 설명해보려고 합니다.대시보드 1편을 보고오시면 이해하기 편하실 듯 합니다.우선 어떤 기능인지 화면으로 보시죠사용자가 원하는 키워드를 입력하고 해당 키워드에 맞는 탭페이지로 이동하는 기능 입니다.핵심 속

이번에 대시보드를 만들면서 사용자가 위젯을 이리저리 움직일 수 있고 크기도 조정할 수 있는 기능이 필요해서 드래그앤드랍 라이브러리를 찾아보다가 React DnD 라이브러리를 알게 되었습니다.가장 유명한 라이브러리인 거 같아서 "그냥 이걸로 사용하지 뭐 보니까 크기 조정

대시보드 프로젝트를 하면서 위젯 크기 수정,삭제 기능이 있었습니다 예를들어 2x2 크기의 위젯을 2x3 이라든지 3x4로 크기를 수정하는 기능과 삭제하는 기능이죠. 이 기능을 만들당시 시간이 너무 촉박하여 일단 기능이 제대로 돌아가도록 만들고 납품하자! 라는

사이드바 on/off 기능은 SideBar 컴포넌트에서간단하게 toggle 불리언값에 따라 조건부 렌더링으로 구현하였습니다.이 sidebarToggle state는 다른 컴포넌트에서도 사용하기 때문에Recoil을 사용해 전역관리 하였습니다.sidebar가 생기거나 사라