- 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 ..
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 사용하기 (기본) 아래의 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를 사용하여 연결하였다. 전체 구조는 다음과 같다 실제 구현 예제)
simplebar-react - npm (npmjs.com)에서 제공하는 라이브러리를 사용할 때, 스크롤을 세로 가운데 정렬 구현. dom에 대한 참조는 크게 2가지 방법이 있다. 1. scrollableNodeProps를 useRef로 사용하여 참조하는 방법 scrollableNodeProps You can pass props to the underlying scrollable div element. This is useful for example to get a ref of it, if you want to access the scroll event or apply imperative directive (like scrolling SimpleBar to the bottom, etc.). const s..
목차 1. CORS 에러 2. Proxy서버로 우회하는 방법 3. express 로 프록시 서버 만들기 4. React에 적용해보기 5. package.json 을 사용한 프록시 설정 6. CRA의 setupProxy.js 를 사용하기 1. CORS 에러 많은분들이 익히 알고있겠지만 빠르게 그 원인에 대해서만 정리하면 다음과 같다 웹 어플리케이션에서 다른 도메인 또는 포트로 부터 리소스를 요청할 때 발생하는 보안 메커니즘인데, 웹 어플리케이션은 보안 상의 이유로 스크립트에서 동일 출처 정책(Same Origin Policy)을 따르게 되어있다. 동일 출처 정책은 웹 페이지가 다른 도메인, 포트, 프로토콜로 부터 리소스를 요청할 때 제한을 두는 보안 메커니즘이다. CORS는 클라이언트에서 발생한다. 따라서..