zustand 메서드 방식과 리듀서 방식
Zustand- reduxjs/toolkit 이 많이 편해지긴 했지만, 여전히 다루기 거대하고 복잡하다 포스팅 게제 현시점 (2024.12.24) zustand의 인기와 사용량이 상당히 증가하였다 - 1위가 reduxjs/toolkit 인 것은 여전하다, 그렇지만 zustand가 거의 동일한 수준으로 인지도가 높아졌다 - jotai 는 3순위 정도 되며, 4순위 recoil 과, 5순위 valtio(어려워 보인다...) 는 상대적으로 1, 2 순위와 비교하였을 때 그 사용량이 매우 저조하다 - zutand는 Redux와 매우 닮아 있으며, 간단하게는 메서드 방식과 프로젝트 규모와 소스코드가 길어지는 경우 redux처럼 리듀서 방식으로 사용할 수 있다. zustand 의 메서드 방식장점간단함: ..
- RHF에 내장된 FormProvider, useOrderFormContext를 이용하여 ContextAPI구현 - Control을 주입받은 컴포넌트로 모든 컴포넌트는 같은 useForm 생성 시점과 일치 시킨다 - setValue, resetField, useWatch 이용하여 useState와 리렌더링 없이 양방향 값 핸들링하고 연산 - 제출(Submit)시, 컴포넌트에 정의된 name 기준으로 값들을 반환한다
- 박스 우측 하단을 드래그하여 리사이즈가 가능한데, 리사이즈가 될 때 박스 안의 내용은 계속 중앙정렬 되도록 한다 - 박스 우측 하단 드래그는 최소, 최대로 높이가 제한되어있다 - 기본 포지션별로 15개씩 - 리사이즈 할 때 최소 수량은 포지션별 10개씩 - 리사이즈 할 때 최대 수량은 포지션별 20개씩 리액트 코드로 구현해보면 다음과 같다 원본코드 import React, { useState } from "react"; import { render } from "react-dom"; import { Resizable } from "re-resizable"; const style = { display: "flex", // flexDirection: "column", // 내부 요소들을 세로로 배치하기 ..
yarn berry node 20.10.0 적용 후 error 처리 기록 에러 원인 - 이전 구성 버전: node 16.15.0 / packageManager yarn@3.2.3 - node 20.10.0 으로 node 버전 변경 시 에러 현재 package.json { "name": "my-project", "version": "0.1.0", "private": true, "packageManager": "yarn@3.2.3", ... } node 20.10.0 설치 후 20.10.0으로 변경하여 프로젝트를 구동 # 현재 버전 $ node -v $ v16.15.0 # node 20.10.0 으로 변경 $ nvm install 20.10.0 $ nvm use 20.10.0 # 프로젝트 실행 $ yarn ..
FLUX pattern (작성중)
FLUX pattern Flux 패턴 자바스크립트에서 데이터 레이어를 생성하기위한 아키텍쳐로 Flux라는 이름으로 패턴이 구현되었다. 프로그램의 데이터에 대한 명확하고 이해하기 쉬운 업데이트 경로를 만드는데 중점을 둔다. 개발과정에서는 변경사항을 추적하는 것이 간단하고, 버그를 찾고 수정하는것이 용이해진다. 개요 플럭스를 가장 잘 설명하기 위해 MVC와 같은 주요 클라이언트 측 아키텍처 중 하나와 비교해 보면 알 수 있는데, 클라이언트 측 MVC 애플리케이션에서 사용자의 상호 작용은 컨트롤러의 코드를 트리거한다. 컨트롤러는 모델의 메소드를 호출하여 하나 이상의 모델에 대한 변경 사항을 조정하는 역할을 한다. 이는 모델이 변경되면 하나 이상의 뷰에 통보하고 모델에서 새 데이터를 읽고 사용자가 새 데이터를 ..
useMutation.mutate 사용의 예 이전 블로그에 작성했었던 tanstack-react-query (useQuery, useMutation.mutate) 내용은 useQuery로 내용을 불러오고, useMutation의 mutate메서드로 post api를 전송하였는데 mutate 메서드의 경우 호출 이후 값을 비동기로 catch 하기 위해서는 isSuccess 속성으로 성공 여부를 판단하고 data 속성으로 실제 데이터 여부를 가져올 수 있었으므로 이렇게 보내고) const { mutate, mutateAsync, data: postTodoResponse, isSuccess: postTodoIsSuccess } = useMutation(queries.fetchPostTodos); ... con..
tanstack-react-query (useQuery, useMutation.mutate)
tanstack-react-query 의 useQuery, useMutation 사용하기 (기본) 아래의 API 들을 반환하는 비동기 함수들을 각각 useQuery, useMutation으로 불러와서 사용해 보자 // promise-then const fetchGetTodos = async (userId = 1) => { return fetch(`https://jsonplaceholder.typicode.com/todos?userId=${userId}`) .then((response) => response.json()) .then((json) => json); }; // async-await const fetchPostTodos = async ( posts: any = { title: "foo", bod..