본문 바로가기
반응형

전체 글703

[Zustand] 상태 값 초기화 하기 "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2" How to reset state zustand에서는 상태값을 초기화시켜주는 내장 함수를 제공해주고 있을까? 찾아보니 따로 제공해주고 있는게 없어 별도로 정의해 사용해야만 한다. 그래도 공식문서에서 이러한 방식들이 있다고 안내해주고 있어 참고하여 만들어두면 좋다. 공식문서의 코드를 그대로 가져와보자. import { create } from 'zustand' // define types for state values and actions separately type State = { salmon: number tuna: number } type Actions = { addSalmon: (qty.. 2024. 4. 4.
[Zustand] get()을 사용하여 최신값 가져오기 "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2" get은 도대체 언제 쓰는 걸까? 얼핏 zustand를 살펴보면 set/get을 제공해주고 있는데 get이라는 녀석을 언제 쓰라고 제공해 주는 건지 의아하다. Read from state in actions 혹시나 공식문서에 나와있나 살펴보면 Read from state in actions라는 세션으로 설명을 해주고 있다. const useSoundStore = create((set, get) => ({ sound: 'grunt', action: () => { const sound = get().sound ... 이러한 사용 방식은 store의 action 함수를 선언할 때 현재 store s.. 2024. 4. 3.
[Zustand] Auto Generating Selectors 설정으로 더 간단하게 state값 가져오기 "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2", Auto Generating Selectors 공식문서에서 제공하는 선택기 자동 생성 패턴이다. const count = useCountStore((state) => state.count) 보통 이런 식으로 state값을 가져오기는 하는데 state => state.count 이런 방식조차 너무 자주쓰면 귀찮긴 하다. 훌륭하게도 zustand쪽에서 자동으로 실렉터를 생성해 주는 방식을 제공해 주어 그대로 적용해 보자. store/index.ts import { StoreApi, UseBoundStore } from 'zustand' type WithSelectors = S extends { .. 2024. 4. 3.
[Zustand] 스토어 값 한 번에 여러개 가져오기 (ft. useShallow) "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2", 스토어 값 여러 개가 필요한 경우 이전 게시글 "[Zustand] Zustand 상태 관리 라이브러리 설치 및 기본 사용법"에서 스토어 값을 가져올 때 이런 식으로 사용했었다. import { useCountStore } from '../store/countStore' const CountButton = () => { const increase = useCountStore((state) => state.increase) const decrease = useCountStore((state) => state.decrease) return ( 증가 감소 ) } 하지만 한 컴포넌트에서 하나의 스토어.. 2024. 4. 3.
[Zustand] Zustand 상태 관리 라이브러리 설치 및 기본 사용법 "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2", Zustand란? zustand는 수많은 상태 관리 라이브러리 중 하나로, 작은 패키지 크기와 직관적이며, 단순한 방식의 사용법을 제공하여 최근에 굉장히 각광받는 라이브러리이다. 개인적으로는 러닝커브가 높지 않다는 게 아주 큰 장점이 아닐까 싶다. Zustand 설치 및 적용 Zustand 설치 # NPM npm install zustand # Yarn yarn add zustand 여느 라이브러리와 같이 동일하게 추가를 해주고 별다른 설정은 필요 없다. Zustand 사용 아주 간단하게 설치를 마쳤으니 사용도 아주 손쉽게 해 보도록 하자. 공식문서에서도 아주 간단하게 설명이 되어있는데, 공.. 2024. 4. 1.
[NextJS] framer-motion을 활용한 모달(Modal) 구현 framer-motion을 굳이 사용한 이유는? React에서 제공하고 있는 Portal기능만을 사용하여 모달창을 구현할 수는 있으나 "Exit Animation"을 주기가 어려웠다. React환경에서는 show/hide의 상태값을 변경하여 리렌더링 되면, 모달 컴포넌트가 보이거나 사라진다. 하지만 "리렌더링"이 되면서 보이거나 사라지기 때문에 사라질 때는 애니메이션 없이 바로 사라지는 현상이 발생한다. 라이브러리도 있는 마당에 어떻게든 구현할 방법은 있겠지만 이미 훌륭하게 제공하고 있는 라이브러리를 굳이 쓰지 않을 이유가 없었다. 그리고 라이브러리 종류 역시 많았는데 그 중에 framer-motion을 선택한 이유는, 어차피 이왕 선택해서 사용하는 거 가장 인기가 많고, 호환성이 좋다고 알려진 라이브러.. 2024. 3. 22.
[CSS] 모바일 브라우저에서 발생한 sticky 하단 고정 오류 버튼이 자유분방하게 움직인다고? 회사에서 업무를 진행하던 도중 놀랍게도 말썽꾸러기인 사파리 환경이 아니라 크롬, 삼성 브라우저에서 이슈가 발생하였다. QA팀 제보로 알게 되었는데, bottom: 0으로 박아두었던 버튼이 자유분방하게 돌아다닌다는 것이다. 놀랍게도 position: sticky / bottom: 0px 의 조합으로 구현된 footer버튼이 전혀 예상하지 못한 방향으로 동작하였다. 원인 파악 사실 이 글을 작성하는 시점에서도 정확한 원인을 알 수 없다는 게 좀 슬프다. 단지, 브라우저의 뷰포트를 잘못 인식하는게 아닌가 "추측"만 할 뿐이다. 특히 이는 본문 시작할 때 언급한 것 처럼 크롬, 삼성브라우저 중에서 유독 삼성브라우저에서 재현이 잘된다. 크롬의 경우에는 "특정 버전"에서만 stick.. 2024. 3. 22.
[SCSS] Sass Variable in calc() function Error SCSS문법을 사용하여 스타일을 주던 중 calc() 함수에 SCSS변수를 넣어 계산을 하려고 하였더니 빌드 오류가 발생하였다. 이렇게 사용하면 안 되는 건가? 싶어 레퍼런스 조사를 해보았더니 SCSS변수를 calc() 함수에 넣어서 사용하려면 "보간 문법"을 사용해야 한다고 한다. 이렇게 까지 귀찮을 일인가? 고작 변수를 가져다 계산에 사용하려는 건데 보간문법(#{})까지 써야 한다니 여간 불편한 게 아닌가 싶었다. 그리고 몇 가지 의문들이 해결이 안되었다. 참고한 레퍼런스의 sass버전을 알 수 없었다. 이게 버전 문제가 아닌가라는 의문도 들었고, 우리랑 같은 환경이 아닌 이상 언제든지 상황은 바뀔 수 있다고 생각된다. sass 개발진들이 이렇게 귀찮은 것들을 그대로 방치했을까? 말 그대로다. 빠르.. 2024. 3. 19.
[CSS] aspect ratio - 요소 가로세로 비율 지정하기 aspect-ratio? 언제 나왔는지는 모르겠으나 과거에는 css에서 비율로 요소를 조절할 수 없었다. 하나 이제부터 aspect-ratio 속성을 사용하여 비율을 지정할 수 있게 되었다. aspect-ratio 속성은 주로 이미지나 동영상을 비율대로 줄이거나 늘리는데 활용되며 매우 직관적인 특징이 있다. 해당 속성으로 인해여 이제 요소를 width/height로만 지정하던 시대가 저물지 않을까 싶다. 일반적인 사용방법은 다음과 같다. aspect-ratio: 1 / 1; aspect-ratio: 1; /* fallback to 'auto' for replaced elements */ aspect-ratio: auto 3/4; aspect-ratio: 9/6 auto; /* Global values *.. 2024. 2. 15.
반응형
TOP

티스토리툴바