Dev Diary 💻

Intro 안녕하세요. 이번 시간에는 Zustand 설치 방법 및 예졔를 살펴보도록 하겠습니다. 그전에 앞서 zustand 가 무엇인지 궁금하신 분들은 위 포스팅 참고 부탁드립니다 :) How to install Zustand Zustand 설치방법은 아래와 같습니다. 각자 사용하는 패키지 관리 툴(npm / yarn)에 맞춰 설치해주시면 됩니다. 1. npm npm install zustand 2. yarn yarn add zustand Zustand Simple Example 간단한 예제로 카운터를 만들어 보겠습니다. zustand를 import하고, 상태 컨테이너를 생성해줍니다. 컨테이너 안에는 count, increment(), decrement()이 들어있습니다. import create fro..

Intro 안녕하세요. 이번 시간에는 리액트에서 로딩바 표시 및 로딩 속도를 조절하는 방법에 대해 알아보겠습니다. How to solve the problem 다음의 List 컴포넌트가 있다고 가정해봅시다. handleFilterClick함수를 클릭 할때마다 필터기능이 작동되는 로직입니다. 필터를 누를 때마다 필터가 된듯한 동작을 표현하기 위해 로딩바를 추가보도록 하겠습니다. const List: NextPage = () => { const {dataList, setDataList} = useLoginStore(); const [totalCtn, setTotalCtn] = useState(); const [filterStatus, setFilterStatus] = useState("ALL"); const..