머리가 나뻐서 삽질 SAP(Study And Programming)

그라파나 대시보드를 리액트에 바로 표시할 수 있도록 해보자 테스트 준비물1. 그라파나 대시보드의 Public dashboard (admin 권한 필요)2. 프록시 서버3. 리액트 CRA 1. 그라파나 대시보드의 Public dashboard (admin 권한 필요) 1-1) Public dashbaord 란- 누구나 접근할 수 있도록 설정된 대시보드- 기본적으로 Grafana 대시보드는 인증을 요구하지만, 대시보드 공개 설정하면 인증 없이 접근할 수 있다 1-2) Public Dashboard 설정 방법- 다음과 같이 대시보드를 통째로 가져올 수 있다   - 일일이 그래프 하나씩 가져오는 것 보다, 그라파나 대시보드에 필요한 모니터링 자원을 셋팅해서       그 대시보드를 전부 가져오는게 더 효율적이다..

Zustand- reduxjs/toolkit 이 많이 편해지긴 했지만, 여전히 다루기 거대하고 복잡하다   포스팅 게제 현시점 (2024.12.24) zustand의 인기와 사용량이 상당히 증가하였다 - 1위가 reduxjs/toolkit 인 것은 여전하다, 그렇지만 zustand가 거의 동일한 수준으로 인지도가 높아졌다 - jotai 는 3순위 정도 되며, 4순위 recoil 과, 5순위 valtio(어려워 보인다...) 는 상대적으로 1, 2 순위와 비교하였을 때  그 사용량이 매우 저조하다   - zutand는 Redux와 매우 닮아 있으며, 간단하게는 메서드 방식과 프로젝트 규모와 소스코드가 길어지는 경우  redux처럼 리듀서 방식으로 사용할 수 있다. zustand 의 메서드 방식장점간단함: ..

리액트의 useState가 필요없을 때, 혹은 form 에서 useState를 언제쓰는가에 대한 설명 input 값을 입력받고 보여줄 때, useState를 사용하지 않아도 된다useState를 배제하므로써, 리렌더링 없앨 수 있다

- ContextAPI를 이용하여 Sub.js에서 사용한 값을 App.js 에서도 감지가 가능하다

- 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 run sta..

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);..

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..

복습겸 기본적인 전역 상태 관리를 위해서 리덕스툴킷 간단하게 축소하여 구현하였다. RTK를 설치하고 configureStore에 combineReducers를 연결하고 그 안에는 createSlice된 액션 reducer들이 있다. 또한 비동기 함수 디스패치를 위해서 createAsyncThunk 함수를 생성한뒤, extraReducers에 할당 해 주었다. 이로써, 리덕스 툴킷에 대한 설치와 사용 + Thunk까지 실제 API를 사용하여 연결하였다. 전체 구조는 다음과 같다 실제 구현 예제)